Eliminate uniform column heights in Bootstrap 4 rows

Exploring the latest version of Bootstrap, I am experimenting with the updated grid system to create two columns. Here's the code snippet in this JSFiddle:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-lg-4 col-md-4 col-sm-4 hidden-xs-down">
    Displaying some content on the left that will be smaller than the right
  </div>
  <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
     A <br/>
     B <br/>
     C <br/>
     D <br/>
     E <br/>
     F <br/>
  </div>
</div>

Currently, both columns have matching heights which is not the desired layout for the content I intend to display.

After researching, I discovered that this feature was absent in Bootstrap 3 and has been newly introduced in Bootstrap 4 as the default setting.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Utilizing Bootstrap 4's flexbox utilities, you have the ability to apply .align-items-start to the .row:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row align-items-start">
  <div class="col-lg-4 col-md-4 col-sm-4 hidden-xs-down">
      Content on the left that will be smaller than right
  </div>
  <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
     A <br/>
     B <br/>
     C <br/>
     D <br/>
     E <br/>
     F <br/>
  </div>
</div>

Bootstrap employs flexbox for grid layout:

The grid system of Bootstrap uses containers, rows, and columns to structure and align content. It relies on flexbox and is fully responsive. Here's an example and a deeper inspection of how the grid functions.
source: https://getbootstrap.com/docs/4.0/layout/grid/

You can modify the grid behavior by leveraging the flexbox utilities.

Answer №2

Bootstrap relies on flexbox, which is why it cannot be disabled.

To better structure your content, opt for semantic elements instead of using meaningless divs. Utilize Paragraphs and Links to prevent them from stretching as much as columns do.

<div class="row">
    <div class="col-lg-4 col-md-4 col-sm-4 hidden-xs-down">
        <p>Content on the left will appear smaller than on the right.</p>
    </div>

    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
         <ul>
         <li>A </li>
         <li>b </li>
         <li>c </li>
         <li>d </li>
         </ul>
    </div>
</div>

If you share more details about your desired output, we can provide alternative solutions based on efficient grid system usage.

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

I'm struggling to understand how to use the Beautifulsoup find() function with this particular HTML code

I have been attempting to extract specific information from a webpage using Python and Beautiful Soup, but I am struggling to correctly identify the path to the data I need. Here is an example of the HTML code: <div class="operator active" data-operato ...

pythonhtmlweb-scrapingbeautifulsoupfind

Sending data to CSS file within Django

Can variables be passed in CSS files, similar to HTML files? For example: In views.py: def home(request): bgcolor = "#999" ... ... In the CSS file: body { background-color : {{bgcolor}}; } If it is indeed possible, could you please pro ...

cssdjangodjango-templates

When attempting to upload a file from IOS10.3.1, the server received the correct file size but retrieved incorrect data, all of which appeared as

I'm facing issues with correctly uploading files. Our iOS and Android app allow users to select a local image file and upload it to our Nginx server. Issue Summary: Approximately 5% of the total upload requests result in broken image files on the se ...

c#htmliosasp.netnginx

Glitch Uncovered in Excel Spreadsheet I Exported

I have a situation where I am working with an HTML table that includes both text and radio buttons. The issue arises when I attempt to export the table data along with the selected radio button values to Excel using the 'Export to Excel' button. ...

javascriptjqueryhtmlcssexcel

Building a hyperlink from a textbox input: A step-by-step guide

I am attempting to modify the href of my link based on the content of the textbox with id="serie". However, Firefox is indicating that el is null. Can you help me identify where the issue lies? (The top section is the Page, the middle part shows the debug ...

javascripthtmlonchangegetelementbyidonkeyup

Developing HTML5 animation by utilizing sprite sheets

Struggling to create an engaging canvas animation with the image provided in the link below. Please take a look at https://i.stack.imgur.com/Pv2sI.jpg I'm attempting to run this sprite sheet image for a normal animation, but unfortunately, I seem to ...

javascripthtmlcsscanvas

Counting words with JavaScript without using an input tag is a useful skill

Is there a way to count the words in a text using only p and span tags, without using input tags? How can this be achieved? <span class="word" id="word">Words Number</span> <p class="any" id="any"> ...

javascripthtml

Transferring HTML table information to Django models for efficient data management

I am currently developing a student attendance management system using the Django framework. The objective is to fetch all the names of the students from the student database and display them in an HTML table. Additionally, I will be updating the informati ...

htmljquerydjangoajaxdjango-models

setting a div element to occupy a percentage of the window's height using viewport height units (vh) within the Wordpress platform

this is the desired appearance but upon pasting the identical code: <!-- placeholder div --> <div style="height:100px;"> </div> <!-- outer container div (with specified height) --> <div style="height:80vh;"& ...

htmlcsswordpressresponsive-design

The mechanics behind CSS3 sliding gradient animation

Behold the ingenious code that effortlessly creates a sliding gradient animation without the need for even a single line of JavaScript: html { height: 100% } body { height: 100%; margin: 0 } @keyframes loading { from { background-position: ...

htmlcsscss-animationskeyframe

Objective-C and the World of WebSockets

Possible Duplicates: Comparison of WebSockets, TCP/IP, and JavaScript/AJAX for iPhone chat Integrating WebSockets into a Cocoa application Hello all, our team is embarking on creating a bespoke iPhone chat app and deliberating the use of WebSocket ...

c#javascriptiphoneobjective-chtml

I'm experiencing some compatibility issues with my script - it seems to be functioning correctly on desktops but not on mobile

Below is a script I've implemented on an html page to toggle the visibility of divs based on user interaction. <script> $(document).ready(function(){ $("#solLink").click(function(){ $(".segSlide").hide(), $(".eduSlide").hide ...

javascriptjqueryhtmlcss

Permanent Solution for HTML Textbox Value Modification

https://i.sstatic.net/nB58K.pngI'm currently working on a GPS project where I am attempting to capture the altitude (above sea level) value in textbox1 and convert it into a ground level value displayed in textbox2. In this scenario, the GPS Altitude ...

javascripthtml

Ways to emphasize search outcomes in Flask/HTML?

I am currently working on creating a search box using HTML and the Flask framework in Python. Below is the layout I am working with: Layout My goal is to input text into the search box and have it highlighted within the text area on the same HTML page. F ...

javascriptpythonhtmljqueryflask

Creating a semi-circular shaped rectangle using CSS

Is it possible to achieve the unique rectangle borders shown in the image using border-radius or any other CSS property? Here's what I'm trying to create: https://i.sstatic.net/YKPEW.png Currently, this is what I've been able to achieve us ...

htmlcss

Aligning variable width numbers within a div container

Currently experimenting with CSS to create a calendar design that mimics the look of a traditional paper calendar. One issue I've encountered is the alignment of numbers within boxes, especially when dealing with double digits. When displaying a sing ...

htmlcss

What is the most effective method for accurately tallying the number of matches in a Datalist using the Input value as a reference

I have set up a datalist element with an associated input element for autocompletion in modern browsers: HTML code <input type="search" id="search" list="autocomplete" /> <datalist id="autocomplete"> <option value="c++" /> < ...

javascripthtmlautocomplete

Creating circular and square elements with flexbox using HTML and CSS

Struggling to implement flexbox correctly using only HTML and CSS. Any tips on how to achieve this? Also, looking for guidance on making it responsive with media queries. Link to the image Appreciate any help in advance! ...

html

At the ready stance for a particular grade of students attending a class

I have created a page with a navigation menu that can be scrolled using the wheel mouse. My goal is to ensure that the li item with the 'selected' class is always positioned in the first position on the left. Is there a way to achieve this using ...

javascriptjqueryhtmlcss

Post the HTML5 player on your Facebook feed

Currently, I have a player that exists in both Flash and HTML5 versions. When calling a page through an iframe, the browser and device are detected automatically to load the player accordingly, and this setup is functioning correctly. Prior to implementin ...

facebookhtmlfacebook-graph-apifacebook-opengraph