CODEWITHSUNDEEP
htmlcssbootstrap-4
Daina Hodges
Daina Hodges

Reputation: 853

Align 6 images next to each other responsive bootstrap

I'm trying to align 6 images in one row with bootstrap but I get only 4 images with a big space between them. I'm not a professional with CSS.

Here is my HTML Code

<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.container-best
{
  width:70%;
  text-align:center;
      margin: auto;
}
.best-rate
{
  background-color: #ffd564;
  text-align: center;
  font: 20px 'aleobold', sans-serif;
  color: #4c4145;
  text-transform: uppercase;
  padding-bottom: 25px;
  padding-top: 26px;
  position: relative;
}
</style>
</head>
<body>
<div class="container">
<div class="container-best">
<div class="best-rate">
☆☆☆☆☆☆☆Today Best Choice☆☆☆☆☆☆☆
</div>
</div>  
<br />
<div class="row">
  <div class="col-md-2 col-md-offset-1">
    <img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/mercenaries.jpg">
  </div>
  <div class="col-md-2 col-md-offset-1" >
    <img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/Narco-Valley.jpg">
  </div>
  <div class="col-md-2 col-md-offset-1" >
    <img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/Vikingdom.jpg" >
  </div>
  <div class="col-md-2 col-md-offset-1" >
    <img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/Red-Dirt-Rising.jpg" >
  </div>
  <div class="col-md-2 col-md-offset-1" >
    <img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/At-All-Cost.jpg" >
  </div>
  <div class="col-md-2 col-md-offset-1" >
    <img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/mercenaries.jpg" >
  </div>      
  </div>        
    <div>
</body>
</html>

I tried to fix many times but I failed, I don't know what is the problem, Please help.

Thanks in advance

Upvotes: 3

Views: 2093

Answers (2)

Sachin Muthumala
Sachin Muthumala

Reputation: 765

first, add CSS class, 

.img-responsive{
   width: 100%;
}

remove the "col-md-offset-1" in div tag. And add images into the . 

<div class="container"> 
  <div class="row">
    <div class="col-md-2">
      <img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/mercenaries.jpg">
    </div>
    <div class="col-md-2" >
      <img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/Narco-Valley.jpg">
    </div>
    <div class="col-md-2" >
      <img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/Vikingdom.jpg" >
    </div>
    <div class="col-md-2" >
      <img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/Red-Dirt-Rising.jpg" >
    </div>
    <div class="col-md-2" >
      <img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/At-All-Cost.jpg" >
    </div>
    <div class="col-md-2" >
      <img class="img-responsive" src="https://www.linkedfilm.com/upload/photos/2019/01/mercenaries.jpg" >
    </div>      
  </div>        
</div>

Upvotes: 3

Jakub Muda
Jakub Muda

Reputation: 6694

You need to remove col-md-offset-1 from columns and it will fix the problem. Bootstrap has a 12 column layout. You have to many columns in a row: 6*2 (from columns) + 6*1 (from offset) = 18.

Upvotes: 2

Related Questions