How to make five columns in one row in bootstrap?

Question

I gave width:20% to each columns and it make correct for the current screen size, how can i make it responsive for all screen sizes. I had created a fiddle here. Please help me to make the row responsive with five columns.

html

<div class="container"><div class="row">
    <div class="grid-five">
        <div class="image-thumb">
            <figure>
                <img src="https://www.w3schools.com/html/pic_mountain.jpg">
            </figure>

        </div>
    </div>
    <div class="grid-five">
        <div class="image-thumb">
            <figure>
                <img src="https://www.w3schools.com/html/pic_mountain.jpg">
            </figure>
            <i class="icon-close sprite"></i>
        </div>
    </div>
    <div class="grid-five">
        <div class="image-thumb overlay">
            <figure>
                <img src="https://www.w3schools.com/html/pic_mountain.jpg" >
            </figure>

        </div>
    </div>
    <div class="grid-five">
        <div class="image-thumb overlay">
            <figure>
                <img src="https://www.w3schools.com/html/pic_mountain.jpg" >
            </figure>

        </div>
    </div>
    <div class="grid-five">
        <div class="image-thumb overlay">
            <figure>
                <img src="https://www.w3schools.com/html/pic_mountain.jpg" >
            </figure>

        </div>
    </div>
</div>
</div>

css

.add_more_images .grid-five{
  width:20%;
}

You don't need the extra CSS: https://stackoverflow.com/a/42226652/171456 — Carol Skelly, Jun 17 '17 at 16:43

score 2 · Accepted Answer · answered Jun 16 '17 at 06:36

To make the images responsive you need to give them a width, in this case width: 100%

.grid-five {
  width: 20%;
}
.grid-five img {
  width: 100%;
}

Updated fiddle

.grid-five {
  width: 20%;
}

.grid-five img {
  width: 100%;
}


/* for styling this demo */

.grid-five {
  border: 2px dotted red;
  box-sizing: border-box;
}

.grid-five + .grid-five {
  border-left: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="grid-five">
      <div class="image-thumb">
        <figure>
          <img src="https://www.w3schools.com/html/pic_mountain.jpg">
        </figure>

      </div>
    </div>
    <div class="grid-five">
      <div class="image-thumb">
        <figure>
          <img src="https://www.w3schools.com/html/pic_mountain.jpg">
        </figure>
        <i class="icon-close sprite"></i>
      </div>
    </div>
    <div class="grid-five">
      <div class="image-thumb overlay">
        <figure>
          <img src="https://www.w3schools.com/html/pic_mountain.jpg">
        </figure>

      </div>
    </div>
    <div class="grid-five">
      <div class="image-thumb overlay">
        <figure>
          <img src="https://www.w3schools.com/html/pic_mountain.jpg">
        </figure>

      </div>
    </div>
    <div class="grid-five">
      <div class="image-thumb overlay">
        <figure>
          <img src="https://www.w3schools.com/html/pic_mountain.jpg">
        </figure>

      </div>
    </div>
  </div>
</div>

Thank you LGSon, its working!! Helped me a lot. – liza Jun 16 '17 at 06:41 — liza, Jun 16 '17 at 06:41

score 0 · Answer 2 · answered Jun 16 '17 at 06:15

Lets have a look to this fiddle: https://jsfiddle.net/ash06229/fng2zpbn/

.add_more_images .grid-five{
  min-width:320px;
  width: 20%;
}

.add_more_images .grid-five img {
  width: 100%;
}

.add_more_images {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

How to make five columns in one row in bootstrap?

2 Answers2