CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
njpatten
njpatten

Reputation: 165

Using Bootstrap column classes with divs of varying heights

I am setting up a seemingly easy layout using Bootstrap 3 with eight text divs, almost the same height but some slightly taller than others depending on screen width.

I'd like them to fit into three columns on desktop and shrink to two columns on smaller screens.

What I've Tried

How can I make the following markup display in three even columns on desktops and two even columns (with no gaps) on mobile devices?

<div class="row">
    <div class="col-xs-6 col-md-4">
        <h4><a href="#bond">text text</a></h4>
        <p class="subtitle">Managing Director</p>
    </div>                                
    <div class="col-xs-6 col-md-4">
        <h4><a href="#buffa">text text</a></h4>
        <p class="subtitle">Managing Director</p>
    </div>
    <div class="col-xs-6 col-md-4">
        <h4><a href="#ebert">text text</a></h4>
        <p class="subtitle">Managing Director</p>
    </div>
</div>
<div class="row">
    <div class="col-xs-6 col-md-4">
        <h4><a href="#gale">text text</a></h4>
        <p class="subtitle">Chief Accounting Officer</p>
    </div>
    <div class="col-xs-6 col-md-4">
        <h4><a href="#kleinman">text text</a></h4>
        <p class="subtitle">General Counsel & Managing Director</p>
    </div>
    <div class="col-xs-6 col-md-4">
        <h4><a href="#scarpati">text text</a></h4>
        <p class="subtitle">Chief Compliance Officer</p>
    </div>
</div>
<div class="row">
    <div class="col-xs-6 col-md-4">
        <h4><a href="#selinger">text text</a></h4>
        <p class="subtitle">Managing Director</p>
    </div>
    <div class="col-xs-6 col-md-4">
        <h4><a href="#tareke">text text text</a></h4>
        <p class="subtitle">Managing Director</p>
    </div>
</div>

Upvotes: 1

Views: 519

Answers (3)

AngularJR
AngularJR

Reputation: 2762

Nicole j. Patten Take a look at the Fiddle, to see if works for you... for what you are looking for here.
I left the old code at the top and my new code displays at the bottom.
On the top section it shows the two caps and the lower section it all lines up fine.
This also resizes fine too.
Because of the font-size the the way the text stacks on very small screen size... (< 320px) I use a media breakpoint to help with a few classes here.

Take a look and see if this helps.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<style>
body {
  padding-top: 50px;
}
.space {
  margin-top: 5%;
  margin-bottom: 5%;  
}
.space-1 {  
  margin-top: 5%;
  height:10px;  
  margin-bottom: 5%;
  background-color: blueviolet  
}     
.info {
   height:90px; 
   margin-top: 2%;
   margin-bottom:2%;
} 
   
@media(max-width:320px) {
.info {
   height:70px; 
   margin-top: 1%;
   margin-bottom:1%; 
} 
p {
  font-size: .8em;
} 
h4 {
  font-size: 1.0em;
}     
}      
</style>

</head>

<body>

    <nav class="navbar navbar-inverse navbar-fixed-top ">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand " href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container col-lg-12 space"></div>
    
    
<div class="container">

<div class="row">
    <div class="col-xs-6 col-md-4">
        <h4><a href="#bond">text text</a></h4>
        <p class="subtitle">Managing Director</p>
    </div>                                
    <div class="col-xs-6 col-md-4">
        <h4><a href="#buffa">text text</a></h4>
        <p class="subtitle">Managing Director</p>
    </div>
    <div class="col-xs-6 col-md-4">
        <h4><a href="#ebert">text text</a></h4>
        <p class="subtitle">Managing Director</p>
    </div>
</div>
<div class="row">
    <div class="col-xs-6 col-md-4">
        <h4><a href="#gale">text text</a></h4>
        <p class="subtitle">Chief Accounting Officer</p>
    </div>
    <div class="col-xs-6 col-md-4">
        <h4><a href="#kleinman">text text</a></h4>
        <p class="subtitle">General Counsel & Managing Director</p>
    </div>
    <div class="col-xs-6 col-md-4">
        <h4><a href="#scarpati">text text</a></h4>
        <p class="subtitle">Chief Compliance Officer</p>
    </div>
</div>
<div class="row">
    <div class="col-xs-6 col-md-4">
        <h4><a href="#selinger">text text</a></h4>
        <p class="subtitle">Managing Director</p>
    </div>
    <div class="col-xs-6 col-md-4">
        <h4><a href="#tareke">text text text</a></h4>
        <p class="subtitle">Managing Director</p>
    </div>
</div>           
</div> <!--end container-->
 
    
    
    
    
<div class="container col-lg-12 space-1"></div>

<div class="container">

    <div class="col-xs-6 col-md-4 info">
        <h4><a href="#bond">text text</a></h4>
        <p class="subtitle">Managing Director</p>
    </div>
    
    <div class="col-xs-6 col-md-4 info">
        <h4><a href="#buffa">text text</a></h4>
        <p class="subtitle">Managing Director</p>
    </div>
    
    <div class="col-xs-6 col-md-4 info">
        <h4><a href="#ebert">text text</a></h4>
        <p class="subtitle">Managing Director</p>
    </div>
    
    <div class="col-xs-6 col-md-4 info">
        <h4><a href="#gale">text text</a></h4>
        <p class="subtitle">Chief Accounting Officer</p>
    </div>
    
    <div class="col-xs-6 col-md-4 info">
        <h4><a href="#kleinman">text text</a></h4>
        <p class="subtitle">General Counsel & Managing Director</p>
    </div>
    
    <div class="col-xs-6 col-md-4 info">
        <h4><a href="#scarpati">text text</a></h4>
        <p class="subtitle">Chief Compliance Officer</p>
    </div>

    <div class="col-xs-6 col-md-4 info">
        <h4><a href="#selinger">text text</a></h4>
        <p class="subtitle">Managing Director</p>
    </div>
    
    <div class="col-xs-6 col-md-4 info">
        <h4><a href="#tareke">text text text</a></h4>
        <p class="subtitle">Managing Director</p>
    </div>
           
</div> <!--end container-->
    
<div class="container col-lg-12 space-1"></div>    
    
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    
</body>
</html>

Upvotes: 0

MattD
MattD

Reputation: 4420

The row class is used to create groups of columns, but isn't really needed. You can get rid of it to acheive the look you want.

BOOTPLY

HTML:

<div class="col-xs-6 col-md-4">
    <h4><a href="#bond">text text</a></h4>
    <p class="subtitle">Managing Director</p>
</div>                                
<div class="col-xs-6 col-md-4">
    <h4><a href="#buffa">text text</a></h4>
    <p class="subtitle">Managing Director</p>
</div>
<div class="col-xs-6 col-md-4">
    <h4><a href="#ebert">text text</a></h4>
    <p class="subtitle">Managing Director</p>
</div>
<div class="col-xs-6 col-md-4">
    <h4><a href="#gale">text text</a></h4>
    <p class="subtitle">Chief Accounting Officer</p>
</div>
<div class="col-xs-6 col-md-4">
    <h4><a href="#kleinman">text text</a></h4>
    <p class="subtitle">General Counsel &amp; Managing Director</p>
</div>
<div class="col-xs-6 col-md-4">
    <h4><a href="#scarpati">text text</a></h4>
    <p class="subtitle">Chief Compliance Officer</p>
</div>
<div class="col-xs-6 col-md-4">
    <h4><a href="#selinger">text text</a></h4>
    <p class="subtitle">Managing Director</p>
</div>
<div class="col-xs-6 col-md-4">
    <h4><a href="#tareke">text text text</a></h4>
    <p class="subtitle">Managing Director</p>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-6 col-md-4">
  <h4><a href="#bond">text text</a></h4>
  <p class="subtitle">Managing Director</p>
</div>
<div class="col-xs-6 col-md-4">
  <h4><a href="#buffa">text text</a></h4>
  <p class="subtitle">Managing Director</p>
</div>
<div class="col-xs-6 col-md-4">
  <h4><a href="#ebert">text text</a></h4>
  <p class="subtitle">Managing Director</p>
</div>
<div class="col-xs-6 col-md-4">
  <h4><a href="#gale">text text</a></h4>
  <p class="subtitle">Chief Accounting Officer</p>
</div>
<div class="col-xs-6 col-md-4">
  <h4><a href="#kleinman">text text</a></h4>
  <p class="subtitle">General Counsel &amp; Managing Director</p>
</div>
<div class="col-xs-6 col-md-4">
  <h4><a href="#scarpati">text text</a></h4>
  <p class="subtitle">Chief Compliance Officer</p>
</div>
<div class="col-xs-6 col-md-4">
  <h4><a href="#selinger">text text</a></h4>
  <p class="subtitle">Managing Director</p>
</div>
<div class="col-xs-6 col-md-4">
  <h4><a href="#tareke">text text text</a></h4>
  <p class="subtitle">Managing Director</p>
</div>

Upvotes: 1

Zack Tanner
Zack Tanner

Reputation: 2590

Is this what you mean? It's a bit hacky since I'm overriding col-xs-6. Feel free to make that a custom class instead.

@import url('http://getbootstrap.com/dist/css/bootstrap.min.css');
@media (max-width: 1023px) {
    .col-xs-6 {
        width: 50%;
    }    
}
    <div class="col-xs-6 col-md-4">
        <h4><a href="#bond">text text</a></h4>
        <p class="subtitle">Managing Director</p>
    </div>                                
    <div class="col-xs-6 col-md-4">
        <h4><a href="#buffa">text text</a></h4>
        <p class="subtitle">Managing Director</p>
    </div>
    <div class="col-xs-6 col-md-4">
        <h4><a href="#ebert">text text</a></h4>
        <p class="subtitle">Managing Director</p>
    </div>
    <div class="col-xs-6 col-md-4">
        <h4><a href="#gale">text text</a></h4>
        <p class="subtitle">Chief Accounting Officer</p>
    </div>
    <div class="col-xs-6 col-md-4">
        <h4><a href="#kleinman">text text</a></h4>
        <p class="subtitle">General Counsel & Managing Director</p>
    </div>
    <div class="col-xs-6 col-md-4">
        <h4><a href="#scarpati">text text</a></h4>
        <p class="subtitle">Chief Compliance Officer</p>
    </div>
    <div class="col-xs-6 col-md-4">
        <h4><a href="#selinger">text text</a></h4>
        <p class="subtitle">Managing Director</p>
    </div>
    <div class="col-xs-6 col-md-4">
        <h4><a href="#tareke">text text text</a></h4>
        <p class="subtitle">Managing Director</p>
    </div>

Upvotes: 0

Related Questions