Bootstrap Grids:

Bootstrap News Grid with Images

Bootstrap grid is one of the essential parts of any website. So, the following code helps you to increase the number of your audiences. We have provided the Bootstrap News Grid with Images with an attractive design. This Bootstrap News Grid Code is so beneficial and includes several parts. Using this HTML Grid with Image lets you organize your website’s information in regular order. As a result, the visitors won’t be confused, and they will be interested in your website more than before.

As the following preview presents, this Free News Grid Code contains many sections, and each one has a beautiful color that increases the beauty of your website. The backgrounds of these grids are so colorful and funny. Additionally, the titles and writings of these sections are white with a bigger font size. You can add the author’s name at the bottom of this title with a smaller font size. This form allows the website’s owner to add the latest news regularly. The backgrounds of this code are different, and you can change them based on your desire. This CSS News Grid is presented in this post, and you can download and enjoy it.

Bootstrap News Grid Code

HTML Grid with Image

Free News Grid Code

CSS News Grid

<!-- This script got from frontendfreecode.com -->
<div class="wrapper">
  <nav role='navigation'>
    <ul>
      <li><a href="#">Navigation</a></li>
    </ul>
  </nav>
  <div class="features">
    <article>
      <a href="#">
        <h3>This is a big story.</h3>
        <div href="#" class="comments">10</div>
        <p class="meta">
          By <strong>Author</strong>
        </p>
        <div class="thumbnail" style="background-image: url(http://placepuppy.it/400/300);"></div>
      </a>
    </article>
    <article>
      <a href="#">
        <h3>This is another one.</h3>
        <div href="#" class="comments">10</div>
        <p class="meta">
          By <strong>Authorn</strong>
        </p>
        <div class="thumbnail" style="background-image: url(http://lorempixel.com/400/500);"></div>
      </a>
    </article>
    <article>
      <a href="#">
        <h3>Surprise! Free money for everyone.</h3>
        <div class="comments">10</div>
        <p class="meta">
          By <strong>Author</strong>
        </p>
        <div class="thumbnail" style="background-image: url(http://placekitten.com/800/400);"></div>
      </a>
    </article>
    <article>
      <a href="#">
        <h3>Not really that important.</h3>
        <div class="comments">10</div>
        <p class="meta">
          By <strong>Author</strong>
        </p>
        <div class="thumbnail" style="background-image: url(http://lorempixel.com/600/400);"></div>
      </a>
    </article>
    <article><a href="#">
      <h3>We landed on the moon. Again.</h3>
      <div class="comments">10</div>
      <p class="meta">
        By <strong>Author</strong>
      </p>
      <div class="thumbnail" style="background-image: url(http://lorempixel.com/400/300);"></div>
      </a></article>
    <article>
      <a href="#">
        <h3>You won't believe what just happened.</h3>
        <div class="comments">10</div>
        <p class="meta">
          By <strong>Author</strong>
        </p>
        <div class="thumbnail" style="background-image: url(http://placepuppy.it/500/600);"></div>
      </a>
    </article>
    <article>
      <a href="#">
        <h3>I haven't seen my left hand in five days.</h3>
        <div class="comments">10</div>
        <p class="meta">
          By <strong>Author</strong>
        </p>
        <div class="thumbnail" style="background-image: url(http://placekitten.com/400/300);"></div>
      </a>
    </article>
  </div>  
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

* {
  box-sizing: border-box;
}
.wrapper {
  max-width: 70em;
  margin: 0 auto;
}
nav {
  background: #333333;
  color: #ffffff;
  font-family: "din-condensed-web", sans-serif;
  text-transform: uppercase;
  padding: 1rem;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav a {
  color: #ffffff;
  text-decoration: none;
}

.features h3 {
  margin-top: 0;
  font-weight: 300;
}
.features p {
  margin-bottom: 0;
}
article {
  background: linear-gradient(45deg, #9e0c80, #fa602a);
  position: relative;
}
article:first-child h3 {
  font-size: 3em;
}
article:nth-child(2) {
  background: linear-gradient(45deg, #fa602a, #fcb400);
}
article:nth-child(3) {
  background: linear-gradient(45deg, #00e2ff, #fa602a);
}
article:nth-child(4) {
  background: linear-gradient(45deg, #9e0c80, #fcb400);
}
article:nth-child(5) {
  background: linear-gradient(45deg, #fa602a, #00e2ff);
}
article:nth-child(6) {
  background: linear-gradient(45deg, #9e0c80, #00e2ff);
}
article:last-child h3 {
  font-size: 3em;
}
article > a {
  display: block;
  text-decoration: none;
  position: relative;
  padding: 1rem;
  color: #ffffff;
  height: 100%;
}
article > a:hover .thumbnail {
  opacity: 0.2;
}
article .thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.4;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  box-shadow: inset 10px -10px 25px rgba(0, 0, 0, 0.9), inset -10px 10px 25px rgba(0, 0, 0, 0.9);
}
article h3, article .comments, article .meta {
  position: relative;
  z-index: 1;
}
article h3 {
  font-family: "adelle", Georgia, serif;
  text-shadow: 1px 1px 1px #333333;
  font-size: 2em;
  line-height: 1;
  margin-bottom: 2rem;
}
article .comments {
  float: right;
  background: #95ae20;
  color: #333333;
  font-family: "din-condensed-web", sans-serif;
  padding: 0.25rem;
}
@media all and (min-width: 40em) {
  .features {
    font-size: 0px;
  }
  article {
    display: inline-block;
    width: 50%;
    min-height: 200px;
    vertical-align: top;
    font-size: 1rem;
    overflow: hidden;
  }
  article:last-child {
    width: 100%;
  }
  article > a {
    position: absolute;
    width: 100%;
  }
}
@media all and (min-width: 70em) {
  .features {
    position: relative;
    overflow: auto;
    margin-bottom: 2rem;
  }
  .wrapper {
    margin-top: 2rem;
  }
  article {
    display: block;
    float: left;
    min-height: 200px;
    width: 33.3%;
  }
  article:first-child, article:last-child {
    min-height: 400px;
    width: 33.3%;
  }
  article:nth-child(5) {
    clear: left;
  }
  article:last-child {
    position: absolute;
    bottom: 0;
    right: 0;
    margin-right: 0.1%;
  }
}

try{Typekit.load();}catch(e){}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<style>
* {
  box-sizing: border-box;
}
.wrapper {
  max-width: 70em;
  margin: 0 auto;
}
nav {
  background: #333333;
  color: #ffffff;
  font-family: "din-condensed-web", sans-serif;
  text-transform: uppercase;
  padding: 1rem;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav a {
  color: #ffffff;
  text-decoration: none;
}

.features h3 {
  margin-top: 0;
  font-weight: 300;
}
.features p {
  margin-bottom: 0;
}
article {
  background: linear-gradient(45deg, #9e0c80, #fa602a);
  position: relative;
}
article:first-child h3 {
  font-size: 3em;
}
article:nth-child(2) {
  background: linear-gradient(45deg, #fa602a, #fcb400);
}
article:nth-child(3) {
  background: linear-gradient(45deg, #00e2ff, #fa602a);
}
article:nth-child(4) {
  background: linear-gradient(45deg, #9e0c80, #fcb400);
}
article:nth-child(5) {
  background: linear-gradient(45deg, #fa602a, #00e2ff);
}
article:nth-child(6) {
  background: linear-gradient(45deg, #9e0c80, #00e2ff);
}
article:last-child h3 {
  font-size: 3em;
}
article > a {
  display: block;
  text-decoration: none;
  position: relative;
  padding: 1rem;
  color: #ffffff;
  height: 100%;
}
article > a:hover .thumbnail {
  opacity: 0.2;
}
article .thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.4;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  box-shadow: inset 10px -10px 25px rgba(0, 0, 0, 0.9), inset -10px 10px 25px rgba(0, 0, 0, 0.9);
}
article h3, article .comments, article .meta {
  position: relative;
  z-index: 1;
}
article h3 {
  font-family: "adelle", Georgia, serif;
  text-shadow: 1px 1px 1px #333333;
  font-size: 2em;
  line-height: 1;
  margin-bottom: 2rem;
}
article .comments {
  float: right;
  background: #95ae20;
  color: #333333;
  font-family: "din-condensed-web", sans-serif;
  padding: 0.25rem;
}
@media all and (min-width: 40em) {
  .features {
    font-size: 0px;
  }
  article {
    display: inline-block;
    width: 50%;
    min-height: 200px;
    vertical-align: top;
    font-size: 1rem;
    overflow: hidden;
  }
  article:last-child {
    width: 100%;
  }
  article > a {
    position: absolute;
    width: 100%;
  }
}
@media all and (min-width: 70em) {
  .features {
    position: relative;
    overflow: auto;
    margin-bottom: 2rem;
  }
  .wrapper {
    margin-top: 2rem;
  }
  article {
    display: block;
    float: left;
    min-height: 200px;
    width: 33.3%;
  }
  article:first-child, article:last-child {
    min-height: 400px;
    width: 33.3%;
  }
  article:nth-child(5) {
    clear: left;
  }
  article:last-child {
    position: absolute;
    bottom: 0;
    right: 0;
    margin-right: 0.1%;
  }
}
</style>

</head>
<body>
<div class="wrapper">
  <nav role='navigation'>
    <ul>
      <li><a href="#">Navigation</a></li>
    </ul>
  </nav>
  <div class="features">
    <article>
      <a href="#">
        <h3>This is a big story.</h3>
        <div href="#" class="comments">10</div>
        <p class="meta">
          By <strong>Author</strong>
        </p>
        <div class="thumbnail" style="background-image: url(http://placepuppy.it/400/300);"></div>
      </a>
    </article>
    <article>
      <a href="#">
        <h3>This is another one.</h3>
        <div href="#" class="comments">10</div>
        <p class="meta">
          By <strong>Authorn</strong>
        </p>
        <div class="thumbnail" style="background-image: url(http://lorempixel.com/400/500);"></div>
      </a>
    </article>
    <article>
      <a href="#">
        <h3>Surprise! Free money for everyone.</h3>
        <div class="comments">10</div>
        <p class="meta">
          By <strong>Author</strong>
        </p>
        <div class="thumbnail" style="background-image: url(http://placekitten.com/800/400);"></div>
      </a>
    </article>
    <article>
      <a href="#">
        <h3>Not really that important.</h3>
        <div class="comments">10</div>
        <p class="meta">
          By <strong>Author</strong>
        </p>
        <div class="thumbnail" style="background-image: url(http://lorempixel.com/600/400);"></div>
      </a>
    </article>
    <article><a href="#">
      <h3>We landed on the moon. Again.</h3>
      <div class="comments">10</div>
      <p class="meta">
        By <strong>Author</strong>
      </p>
      <div class="thumbnail" style="background-image: url(http://lorempixel.com/400/300);"></div>
      </a></article>
    <article>
      <a href="#">
        <h3>You won't believe what just happened.</h3>
        <div class="comments">10</div>
        <p class="meta">
          By <strong>Author</strong>
        </p>
        <div class="thumbnail" style="background-image: url(http://placepuppy.it/500/600);"></div>
      </a>
    </article>
    <article>
      <a href="#">
        <h3>I haven't seen my left hand in five days.</h3>
        <div class="comments">10</div>
        <p class="meta">
          By <strong>Author</strong>
        </p>
        <div class="thumbnail" style="background-image: url(http://placekitten.com/400/300);"></div>
      </a>
    </article>
  </div>  
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
try{Typekit.load();}catch(e){}
</script>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS