CODEWITHSUNDEEP
htmltwitter-bootstrap
Orsi
Orsi

Reputation: 575

Bootstrap grid items reordering in responsive mode

I have a problem with a bootstrap grid.

It should look like this: in two rows, in one row five elements enter image description here

In desktop now it looks like this: enter image description here

And the other thing that in responsive mode it should reorder the icons. Now it works like this: but it should be two by two. Thanks!

I added a code snippet with the 'html' I'm using.

enter image description here

.capabilities-container {
	width: 100%;
	min-height: 100px;
	margin-bottom: 30px;
	text-align: center;
}

.capabilities-container img {
	max-width: 70%;
}
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

<div class="container">
<div class="capabilities-container">
  <div class="row">
  
    <div class="col-xs-12">
      <h3 class="text-center">Capabilities</h3>
    </div>

    <div class="col-md-2 col-sm-3 col-xs-6 col-md-offset-1">
       <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236"> 
      <div class="helped-title">Strategic Planning</div>
    </div>
    
    <div class="col-md-2 col-sm-3 col-xs-6">
       <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236"> 
      <div class="helped-title">Branding</div>
    </div>
    
    <div class="col-md-2 col-sm-3 col-xs-6">
       <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236"> 
      <div class="helped-title">Traditional, Direct & Digital Marketing</div>
    </div>
    
    <div class="col-md-2 col-sm-3 col-xs-6">
       <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236"> 
      <div class="helped-title">Media</div>
    </div>
    
    <div class="col-md-2 col-sm-3 col-xs-6">
       <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236"> 
      <div class="helped-title">Social Media</div>
    </div>

    <div class="col-md-2 col-sm-3 col-xs-6 col-md-offset-1">
       <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236"> 
      <div class="helped-title">Public Relations</div>
    </div>
    
    <div class="col-md-2 col-sm-3 col-xs-6">
       <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236"> 
      <div class="helped-title">Event & Experiental Marketing</div>
    </div>
    
        <div class="col-md-2 col-sm-3 col-xs-6">
           <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236"> 
          <div class="helped-title">Research & Measurement</div>
        </div>
    
        <div class="col-md-2 col-sm-3 col-xs-6">
           <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304"  height="236"> 
          <div class="helped-title">Data & Analytics</div>
        </div>
    
         <div class="col-md-2 col-sm-3 col-xs-6">
           <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304"                  height="236"> 
          <div class="helped-title-engagement">Engagement Program </br> Development</div>
       </div>
       
  </div>
  </div>
</body>

</html>

Upvotes: 0

Views: 189

Answers (2)

Fabian S.
Fabian S.

Reputation: 2529

The problem is related with float which is used by bootstrap. Floating isnt cleared by bootstrap when breaking in a new line if you dont wrap every new line in a row. If putting every new line in a row as David's answer suggests isnt possible you can try the following (even tho using davids answer is the go-for if possible):

Put CSS clear:both; on the first item of every line. To achieve that you can use count selectors like .entry_5col:nth-child(5n) + .entry_2col.

Upvotes: 0

David
David

Reputation: 668

Use 2 rows with 5 divs with col-md-2 to have 10 and text-align center

 <div class="container">
  <div class="row text-center">
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
  </div>
  <div class="row text-center">
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
  </div>
</div>

check a demo

https://jsfiddle.net/m33mygqq/

Upvotes: 1

Related Questions