Aligning columns vertically in the Bootstrap grid

So you've got a layout with two columns using Twitter Bootstrap, and you want to make sure specific rows are vertically aligned:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css"/>

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <h2>Column 1</h2>
      <p>Optional content of variable height.</p>
      <p><strong>Align this vertically...</strong></p>
    </div>
    <div class="col-sm-6">
      <h2>Column 2</h2>
      <p><strong>...with this</strong></p>
    </div>
  </div>
</div>

Table layouts handle vertical alignment well but lose the responsive aspect of Bootstrap columns:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css"

<div class="container">
  <table class="row">
    <thead>
      <tr>
        <th scope="col"><h2>Column 1</h2></th>
        <th scope="col"><h2>Column 2</h2></th>
      </tr></thead>
    <tbody>
      <tr>
        <td><p>Optional content of variable height.</p></td>
      </tr>
      <tr>
        <td><strong>Align this vertically...</strong></td>
        <td><strong>...with this</strong></td>
      </tr>
    </tbody>
  </table>
</div>

You could split rows as an alternative, but things might not stack correctly on smaller screens:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css"

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <h2>Column 1</h2>
    </div>
    <div class="col-sm-6">
      <h2>Column 2</h2>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-6">
      <p>Optional content of variable height.</p>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-6">
      <strong>Align this vertically...</strong>
    </div>
    <div class="col-sm-6">
      <strong>...with this</strong>
    </div>
  </div>
</div>

Can you achieve the same result while keeping Bootstrap's column behavior intact? Should you stick to table layouts or is there another way without needing JavaScript for positioning?

EDIT: I'm aiming for top-aligned rows similar to how they appear in a table layout.

csstwitter-bootstrapvertical-alignment

Answer №1

Based on my knowledge, I would recommend trying out these potential solutions.

Option 1: Utilize Javascript (or Jquery) to determine the heights of both the left and right divs, and then instruct them to have equal height.

This solution can be implemented on the second content div to ensure that the space above your bold text maintains uniform height.

An alternative approach could involve adjusting the margin-top property in the smaller div (containing the bold text in need of alignment) based on a comparison of the two div heights.

In any case, once you have obtained the heights of both divs, you will have sufficient information to explore various possible solutions. There may be multiple ways to address this issue, so feel free to find the one that best fits your specific context and requirements.

<div class="container">
  <div class="row">
    <div class="col-sm-6 leftcolumn">
      <h2>Column 1</h2>
      <div class="astallas"><p>Optional content of variable height.</p></div>
      <p><strong>Align this vertically...</strong></p>
    </div>
    <div class="col-sm-6 rightcolumn">
      <h2>Column 2</h2>
      <div class="astallas"></div> // ensuring this empty div matches the height of the variable content in the left column
      <p><strong>...with this</strong></p>
    </div>
  </div>
</div>

Option 2 (may have compatibility issues with some browsers): Consider utilizing Flexbox, a native CSS3 feature that provides an easy way to control the positioning of your desired divs. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Both of these solutions should work seamlessly with Bootstrap and accommodate responsive design requirements.

Answer №2

If you want to ensure that rows have equal heights, you can follow this approach:

<style>
 .centered {
   text-align: center;
   font-size: 0;
  }

 .centered .myheight{
   float: none;
   display: inline-block;
   text-align: left;
   font-size: 13px;
   vertical-align: top;
   margin-bottom: 5px; /*add this if you want to give some gap between the rows. */
  }
</style>


<div class="container-fluid">
 <div class="row centered">
    <div class="col-sm-4 myheight">
      Some  example content
    </div> 
    <div class="col-sm-4 myheight">
      Some  sample content ...<br>
      Additional content
    </div> 
    <div class="col-sm-4 myheight">
      Some  dummy content
    </div>  
    <div class="col-sm-4 myheight">
      Some  filler content
    </div>                                                              
 </div>
</div>

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

Looking to turn off animation for a WordPress theme element?

Is there a code that I can insert into the style.css file to deactivate the theme animations on my WordPress page? As users scroll down, each element either drops in or slides in. I recently purchased the WP Alchemy theme from , but the animation speed is ...

htmlcsswordpress

Vertical Spacing in Bootstrap 3: Eliminating Gaps Between Divs

I am looking to eliminate the gap between certain div elements and the div positioned below it. This space is created when one div is taller than another in a column. For instance, take a look at this example: http://www.bootply.com/Hc2aO5o4bG Essential ...

phpjqueryhtmlcsstwitter-bootstrap-3

Display a picture from a directory onto a webpage by incorporating ASP.NET in C#

I am in the process of creating an image gallery for my website. In this scenario, I am displaying thumbnails of all images and when clicked, the image appears in a modal window. There are two main folders: Thumbs (contains thumbnails) Full Image (contai ...

c#jqueryasp.netcss

How to arrange messages in a chat box using Bootstrap 4 without the need for JavaScript

Is there a way to adjust my chat box so that messages appear at the bottom, like in any chat app? I am currently using Django and Bootstrap 4, here is the code I have: <div class="list-group flex-column-reverse " id="Chatt ...

javascriptjquerycssdjangobootstrap-4

The div swiftly clicks and moves beyond the screen with animated motion

Here is a code snippet that I am working with: $(document).ready(function(){ $(".subscriptions").click(function (){ if($(".pollSlider").css("margin-right") == "-200px"){ $('.pollSlider').animate({"margin-right": '+ ...

javascriptjqueryhtmlcssjquery-ui

The Jquery animate function is not compatible with the transform property

I am facing an issue with the Jquery animate function. Despite trying various solutions, I have been unable to get it to work. Below is the HTML code that I have used: <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

javascripthtmljquerycssjquery-animate

Can someone please explain the purpose of row-sm and row-cols-sm-n (where n<12)? I've come across the col-sm-n (where n<12) but I'm unsure about how row-sm is used

From my understanding, when using col-sm-n in Bootstrap, the columns in a row will stack on top of each other when the device screen width is less than the specified size for sm. But what about row-sm? Does it function similarly to col-sm? And what exactly ...

htmlcssbootstrap-4flexbox

Customizing the primary CSS style of an element without the need to individually reset every property

Is there a way to reset just one property of a selector that has multiple properties stored in main.css, without listing all the properties and setting them to default values? I always struggle with CSS interference and constantly need to reset properties ...

htmlcss

"Nested list elements - The art of stylishly organizing content

Is there a way to apply a gray background color to alternate items in a list, even if they are nested, without affecting the styling of consecutive elements in the nested list? If anyone has any suggestions on how to achieve this using CSS or jQuery, plea ...

jqueryhtmlcss

Is there a way to show the input value in a different form while still retaining the original value?

When receiving a pagination number from user input, I store it in a variable like so: $html .= "<input type='submit' name='next' value='$next_page_number' />"; Now, I'm looking to replace the displayed text for th ...

phphtmlcss

The GMaps API v3 is currently being loaded, but is not displaying on the webpage

Although the maps are supposed to be loading, I'm having trouble actually seeing them appear. Troubleshooting function initialize() { var myLatlng = new google.maps.LatLng(-25.363882,131.044922); var mapOptions = { zoom: 4, center: myLat ...

htmlcssgoogle-mapsgoogle-maps-api-3

Utilizing CSS to incorporate a background image into HTML code

Is it feasible to utilize pure HTML for the background-image property? Consider the following scenario: The original: background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height=&apo ...

htmlcssbackground-imagefont-awesome

Difficulty loading CSS in PugJS

I can't seem to get my dashboard.pug file to load both dashboard.css and dashboard.js, even though they are all in the same folder. I have already set up express.static correctly for the public folder. const publicpath=path.join(__dirname,'../p ...

cssnode.jspug

Can you create different width sizes using two types in HTML?

As I delve into learning HTML, I find myself curious about the possibility of combining multiple size types for width. For instance, is it possible to set a width that is both 10px and 3vw? While I understand that this isn't directly supported, I wond ...

htmlcsswebwidth

Coordinating the vertical scrolling of two div elements simultaneously. (scrolling both divs together)

I have a specific setup where I have a text box that is scrollable, and outside of this box are headings that correspond to different sections in the text. I am looking for a way to synchronize the scrolling of the text inside the box with the headings out ...

javascripthtmlcssscrollbootstrap-4

What could be causing the unexpected behavior of flexbox in Bootstrap?

I am facing a challenge while working on an existing PHP project that requires editing using HTML, bootstrap, and CSS. The flexbox is not behaving as expected, specifically when trying to display two cards in a row. Even though it works in a separate file, ...

cssflexboxbootstrap-5

Having difficulty with printing a particular div

I need help with printing a specific div containing checkboxes using jQuery. The checkboxes are initially checked based on data from a database, but when I try to print the div, the checkboxes remain unchecked in the print view. Below is the code snippet ...

javascripthtmlcsscheckboxprinting

I need to condense my layout from three columns to just two columns in HTML

The html code for "Date Accessed" is meant to be in one column as a header, while the actual dates should be in another column, but somehow they are all appearing in a single column. I am having trouble figuring out why. <!DOCTYPE html> {% load stati ...

htmlcss

I'm encountering difficulties in utilizing Ajax to upload images

I have been attempting to utilize ajax and bootstrap (modal) to add a new product. However, when I click the save changes button, I encounter an issue where all fields return an error message stating 'Undefined index'. Below is the code snippet ...

javascriptphpjqueryajaxtwitter-bootstrap

What is the best way to adjust the responsiveness of my AppDrag page for mobile optimization?

My landing page is all set up, but I'm looking to tweak the font sizes and spacing for mobile users. Can these changes be made using design tools instead of digging into the code? ...

csscontent-management-system