The stature of Bootstrap's columns

Exploring Bootstrap has been an exciting journey for me, as I believe it will simplify the process of creating visually appealing web pages.

I'm currently facing a challenge in understanding these two examples:

Bootstrap 3: http://codepen.io/rhutchinson/pen/WpxvWO

Bootstrap 4: http://codepen.io/rhutchinson/pen/aJZvKb

It seems that the main difference between these examples is the ability to extend column height to match the height of the .row, which appears to be a new feature in Bootstrap 4.

Is there a way to replicate this behavior from one version to another? If so, what would be the recommended approach to achieve this?

Understanding these dimensional behaviors is crucial for me to enhance my knowledge of front-end development, especially since I find it less intuitive compared to back-end scripting logic.

csstwitter-bootstraptwitter-bootstrap-3

Answer №1

Indeed, the 

equal column height feature is natively supported
in bootstrap 4, thanks to its utilization of flexbox.

If you wish to replicate this functionality in bootstrap 3 using flex, you can refer to the following example--

img {
  border-radius: 50%;
}

.bord {
  border-style: solid;
}

.row-eq-height {
  display: flex;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row row-eq-height">
      <div class="col-sm-3 text-center bord">
        <img src="http://placehold.it/140x140" class="center-block" />
      </div>
      <div class="col-sm-6 text-center bord">
        <p>Some text</p>
      </div>
      <div class="col-sm-3 text-center bord">
        <img src="http://placehold.it/140x140" class="center-block" />
      </div>
    </div>
</div>

Please Note:

It's worth mentioning that according to @ZimSystems, while display: flex; enables full height support, it can negatively impact the responsiveness of Bootstrap 3 rows and columns.

Explore more about flexbox here

Find out more about the .row-eq-height concept depicted above here

We trust that this information aids in clarifying any doubts you may have!

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

Designing a loading animation with rotating lines converging towards the center to form a circular motion

Check out my code snippet below: .circle { border: 1px solid transparent; border-radius: 50%; width: 100px; overflow: hidden; } .div7 { width: 100px; height: 10px; background: red; color: white; font-weight: bold; positi ...

htmlcsscss-animations

what is the best way to align text with an image using CSS

Is there a way to display a form within an image without making it messy with additional tags and text? Below is the code that I currently have: .box { width: 650px; padding-right: 15px; /* creates gap on the right edge of the image (not con ...

htmlcssweb

Border shifts on hover effect

After much trial and error, I finally managed to center two links in a nav bar perfectly on the page. I also added a grey bottom border that spans the entire width of the page, with the hover effect turning it blue under the links. Check out this example: ...

csshoverborder

Tips for positioning buttons in a sticky footer

I've been trying to align buttons on the left, center, and right side but haven't had any success. How can I ensure that buttons are aligned properly on each side, even when adding more buttons? When adding more buttons to the left, I want them ...

css

The expected behavior of first-child is not impacting the initial element as anticipated

What is the reason behind the rule not impacting the first div containing the "update 1" text? .update div { width:100%; height:25%; border-top:1px dashed {color:background title}; padding: 5px; color:{color:links nav}; cursor:po ...

csscss-selectors

The background image is not appearing on the div as expected

I've been attempting to create a div and set a background image for it using jQuery, but I seem to be facing issues. When I try setting the background color to white, it works fine. Here's the code snippet: function appendToDom(poster) { ...

javascriptjqueryhtmlcssnode.js

Placing text alongside an image at the top of the page

Here's the HTML code generated by JSF: <div align="center"> <img src="images/background_image.jpg" height="200px" width="30%" style="vertical-align: top"/> <span style=""> Welcome abc, <input type= ...

htmlcsstext-alignment

Clicking on a flex card will trigger the opening of a new page where the parsed data will be displayed in a stylish manner using JavaScript

Currently, I am attempting to showcase the data retrieved from the following URL: . My objective is to format the parsed data with a specific style. However, I have encountered difficulties accomplishing this using `window.open()`. Any assistance in resolv ...

javascriptjqueryhtmlcss

Creating a PHP-enabled HTML button that spans multiple lines

Currently, I am working on creating a list of buttons with h5 text. The issue I'm facing is that all the buttons have the same width, but when the text exceeds this width, the button expands. I would like the text to span multiple lines without affect ...

phphtmlcss

The FontAwesome icon is not showing up on this particular view, but it displays correctly on a

I'm facing a strange issue: one of my FontAwesome icons is not appearing on the view, even though all the other icons are working fine. I've been trying to figure out why. <a class="add-img fa fa-plus-circle" title="@SharedResources.Index.Add ...

htmlcsstwitter-bootstrapfont-awesome

Aligning Card in Center using Bootstrap

Having trouble centering the card properly, as a beginner I'm not sure what to do. </head> <body> <div class="container"> <div class="row justify-content-center"> <div class="col-md-4 co ...

htmlcssbootstrap-5

I am having trouble with Mpdf's block absolute positioning feature not functioning correctly

I am trying to position my block using absolute, but it seems to be staying in the same place regardless of the left/top attributes I set. Here is the PHP code snippet: $mpdf = new \Mpdf\Mpdf(); $mpdf->WriteHTML($stylesheet,\Mpdf\HT ...

phphtmlcssmpdfabsolute

What is the best way to eliminate a vertical line from an HTML table?

I am looking to remove specific vertical lines from an HTML table. There are only 3 vertical lines in total, and I want to remove the first and third lines. Below is my code: <html> <head> <style type="text/css"> .table1{ background: ...

htmlcss

Ways to inspect a number within a span and adjust its color depending on the value?

Can someone help me figure out why this code is not reading the value correctly? Check it out here This is the HTML: <a class="InterestLink">Click me</a> <div id="InterestExpander"> <div id="InterestExpanderX"> ...

javascriptjqueryhtmlcss

React createElement function does not include string children when there are multiple children present within the inner HTML

Currently, I am utilizing React.createElement(...) to dynamically produce a basic react website using data from a JSON file. The JSON file consists of an array of JSON objects that represent elements and their respective children. An individual element&ap ...

cssreactjs

Avoiding overlapping of div elements in a stacked div layout

I have a challenge with creating a vertical layout of stacked divs. Everything was going smoothly until I encountered the #resume div, which stubbornly stays hidden beneath the table-containing div above it. Despite trying various adjustments to float and ...

htmlcss

Looking to authenticate a CSS span class within an XML document using Oxygen Program?

This is in connection with my initial query. The XML does not recognize the CSS span class. <l rend="indent"> <span class="face_dropcap_ ">C</span><hi rend="initial_roman">E</hi>stoit alors que le prefent des <span class= ...

cssxmloxygenxml

Enhancing Online Presence with Video Gallery Website Development

I'm in the process of creating a website and need help finalizing my video page. I envision a layout similar to this example: https://i.stack.imgur.com/hctui.gif The main feature should be a large video placeholder at the top, followed by several thu ...

javascriptjqueryhtmlcss

What is the best way to create a website where images align perfectly with stacked cards?

Having trouble aligning the image on the right side of my website with two cards on the left side. Here is an example of what I'm aiming for: (https://i.sstatic.net/fBvTQ.jpg)](https://i.sstatic.net/fBvTQ.jpg) This is the current code: <!doctyp ...

htmlcssbootstrap-5

Minimization tools for compressing CSS and JavaScript documents

After deploying my application, I noticed that the loading time has significantly increased. Is there a way to compress CSS and JS files? I include only the necessary code in each page and occasionally use minified versions of JS. Thank you. ...

javascriptcsscompressionminifyjscompress