Leveraging Bootstrap column classes with diverse div heights

Currently, I am working on a layout design using Bootstrap 3 that involves eight text divs. These divs have almost the same height, but some are slightly taller depending on the screen width.

My goal is to arrange them into three columns on desktop and then shrink them into two columns on smaller screens.

What I Have Attempted

  • I tried setting each div to col-xs-6 and col-md-4. However, this caused gaps in some 'cells' on desktop view.

  • I also tried wrapping each set of three divs in a .row which fixed the desktop issue but created a new problem on mobile devices.

  • Adding a clearfix div that is visible-md did not solve the problem either.

Can someone help me figure out how to make the following code display in three equal columns on desktops and two equal columns (without 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>
htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

The row class is typically used to organize columns, but in many cases, it can be eliminated without affecting the layout you desire.

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>

Answer №2

Do you mean something like this? It may not be the cleanest solution as I am overriding col-xs-6. You could consider creating 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>

Answer №3

Kaitlyn M. Matthews Please check out the Fiddle link to see if it meets your needs and requirements.
I have provided the old code at the top, while the new code is displayed at the bottom for comparison.
The top section shows two caps, while the lower section aligns perfectly.
Moreover, the resizing functions seamlessly as well.
Given the font-size adjustment and text stacking on smaller screens (< 320px), I have implemented a media breakpoint within certain classes to enhance readability.

Feel free to explore and see if this solution resolves your issue.

<!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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dismiss Bootstrap by clicking anywhere

I have a specific input that is displayed when clicked and disappears with the next click: <a href="#;" class="asset_info" data-asset_id="{{ asset.pk }}" data-toggle="focus" tabindex="0" data-placement="left" data-trigger="focus" >Hello</a> ...

javascriptjquerytwitter-bootstrap

Toggle between a list view and grid view for viewing photos in a gallery with a

Hey there, I'm a newbie on this site and still getting the hang of jQuery and JavaScript. Though I do have a good grasp on HTML and CSS. Currently, I'm working on a photo gallery webpage as part of my school project using the Shadowbox plugin. Wh ...

javascriptjqueryhtmllistviewphoto-gallery

Checkbox click event not triggering properly

I am facing challenges in triggering an onclick event for the "Elevation" checkboxes located at the URL provided above. <input type="checkbox" value="A" id="elevation_A" onclick="changeElevation(this.value);" /> For some reason, the "changeElevati ...

javascriptjqueryhtml

Significant empty space to the left of content due to Zurb Foundation

I'm currently utilizing Zurb Foundation within a rails project. My goal is to structure a basic page that consists of a table, text field, and a couple of buttons. However, I am facing a significant gap on the left side of my content, causing the rig ...

htmlcssruby-on-railszurb-foundation

Establishing a straightforward system that allows me to craft designs while viewing real-time updates and refreshes on my web browser

I have started my project with a simple npm setup: npm init node install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3e5c51514a4d4a4c5f4e7e0a100e100e135c5b4a5f100d">[email protected]</a> This is how my packag ...

node.jstwitter-bootstrapnpm

Error: Issue with parsing integer in JavaScript

I'm in the process of developing a dice game that involves rolling two dice and determining the sum. The goal is to display the running total next to the dice. However, I'm encountering an issue where NaN (Not a Number) is being displayed. Here i ...

javascripthtmlnanparseint

Guide to placing the Drawer component beneath the AppBar in Material-UI

Exploring the capabilities of the Material UI drawer component, I'm looking to position the drawer below the appbar. My goal is to have the hamburger icon toggle the drawer open and closed when clicked: opening the drawer downwards without moving the ...

javascriptcssreactjsmaterial-ui

Enhance your Magento store with a personalized layout update

Is there a way to call a stylesheet from my skin folder instead of pointing to my base path? Right now I have <reference name="head"> <action method="addCss"> <stylesheet>yourtheme/css/red.css</stylesheet> < ...

phphtmlcssmagento

Illuminated container with shading

I'm struggling to style a box with a unique glow effect and shadow at the bottom. I've hit a roadblock in creating this particular effect. The glow effect I am aiming for is shown here: https://i.stack.imgur.com/i2va8.png My attempts to create ...

cssborderglow

Error found in Google's privacy page HTML code

Reviewing the html code of Google's Privacy Page, I observed the following header: <!DOCTYPE html> <html lang="en"> <meta charset="utf-8> <title>Google Privacy Center</title> <link rel="stylesheet" href="//www.g ...

htmlvalidation

"Difficulties with Tribute Page Project on FreeCodeCamp: HTML and

I am currently working on a tribute page for a challenge from FCC and I am facing some issues with adding padding to my .life and .work divs in the HTML and CSS code above. Despite spending a few hours searching for solutions online, I have not been able ...

htmlcssmarginpadding

Generate random unique values from an array to populate a text input field in HTML. Display a message once all unique values have been shown

I have included an option code and text box below: <select id="sel" class="form-control input-lg" data-live-search="true"> <option value="">-- Choose Your Country--</option> </select><br/><br/><br/> &l ...

htmljqueryarraysjsonrandom

Creating a dropdown in HTML that overlaps another div requires using relative and absolute positioning

Having created a navigation bar with dropdown menu items that reveal on hover, I encountered an issue. Below the navigation bar lies a slideshow of images. Whenever I hover over the dropdowns, the slideshow div obstructs the view, making it impossible to s ...

htmlcss

Inspect HTML elements using Jinja2 placeholders

I am a beginner in the world of web development, currently learning how to create Flask webapps. I am using Atom along with some addons like PreviewHTML to help me visualize live previews of my HTML code. However, I am facing an issue where I cannot see a ...

pythonhtmlflaskjinja2atom-editor

Should the form-group class be utilized in Bootstrap 4 even without a form tag?

Is it considered good practice to use the form-group class without including a form tag? Dhiraj Dhakal ...

twitter-bootstrapbootstrap-4

How can I keep images from getting cut off when using slick slider with a fixed background?

My current design includes a stylized slick-slider that extends beyond the top border: However, I have set a fixed background for .slick-list, ensuring only the content (text, picture, and button) scrolls: How can I avoid the picture being cropped in t ...

htmlcsslayoutz-indexslick.js

Tips for sending variable from JavaScript to PHP Page through XMLHTTP

Make sure to review the description before flagging it as a duplicate. In my understanding, the method of transmitting data from JavaScript to PHP is through Ajax Call. This is the situation I am facing: With PHP, I bring forth an HTML page that cont ...

javascriptphpjqueryhtmlajax

Scoped Styles rarely stand a chance against more dominant styles

I'm facing a scope issue while learning Vue. Question: I am trying to make sure that the styles in profile.vue do not override the ones in sidebar.vue. I want the sidebar to have a red background and the profile section to be blue. Shouldn't usi ...

cssvue.jssassscope

I am unable to utilize the backspace function within a text box generated by JavaScript

I have created a dynamic form using JavaScript that includes buttons and one text input field. However, the issue is that to delete the text entered in the input field, one must highlight the text and then type over it instead of being able to simply use t ...

javascripthtmlformsinput

Data is not being stored in Parse

I am currently facing a challenge while working with Parse for Javascript: When users sign up, along with their username and password, I also need to save their first and last names in Parse. However, at the moment, only the username and password are bein ...

javascriptjsonhtmlparse-platform