What is the best way to fill out border boxes in Bootstrap 4 for horizontal text alignment?

I'm struggling with this code snippet:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row border border-success">
  <div class="cols-12 col-sm-6 col-lg-4" class="border border-info">
    <header class="h4 border border-primary">
      Some header text
    </header>
    <div class="border border-danger">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat vitae lacus eget pretium. Donec vel
      mauris lorem. Vivamus massa enim, lacinia et lorem vel, porta viverra orci. Maecenas sagittis feugiat lectus,
      ac imperdiet urna fringilla et. In commodo nunc sed nibh consectetur sagittis. Donec sit amet sapien nec est
      tempor egestas in vel augue. Proin sodales, tortor eu mollis cursus, eros ante consequat ex, et condimentum
      massa mauris et sem.
    </div>
  </div>
  <div class="cols-12 col-sm-6 col-lg-4" class="border border-info">
    <header class="h4 border border-primary">
      Some header text
    </header>
    <div class="border border-danger">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat vitae lacus eget pretium. Donec vel
      mauris lorem. Vivamus massa enim.
    </div>
  </div>
  <div class="cols-12 col-sm-6 col-lg-4" class="border border-info">
    <header class="h4 border border-primary">
      Some really long text which is probably gonna take more than one or two lines
    </header>
    <div class="border border-danger">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat vitae lacus eget pretium. Donec vel
      mauris lorem. Vivamus massa enim, lacinia et lorem vel, porta viverra orci. Maecenas sagittis feugiat lectus,
      ac imperdiet urna fringilla et.
    </div>
  </div>
</div>

My goal is to achieve something like this:

https://i.sstatic.net/Dwz11.png

I've experimented with the following solutions, but none have worked:

Trying separate rows for the header and content, which causes layout issues on mobile.

Inserting <br> tags to create space between elements, but it's ineffective.

Utilizing the "order" class from Bootstrap for row organization, however it doesn't work well when rearranging rows for mobile views.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

If you want to achieve another level of flex, consider using the d-flex and flex-column classes for each column (.col-X). Then apply the flex-grow-1 class to the div with the border-danger.

Refer to this documentation for more information: https://getbootstrap.com/docs/4.1/utilities/flex/#grow-and-shrink

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row border border-success">
  <div class="cols-12 col-sm-6 col-lg-4  d-flex flex-column">
    <header class="h4 border border-primary">
      Some header text
    </header>
    <div class="border border-danger  flex-grow-1">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat vitae lacus eget pretium. Donec vel
      mauris lorem. Vivamus massa enim, lacinia et lorem vel, porta viverra orci. Maecenas sagittis feugiat lectus,
      ac imperdiet urna fringilla et. In commodo nunc sed nibh consectetur sagittis. Donec sit amet sapien nec est
      tempor egestas in vel augue. Proin sodales, tortor eu mollis cursus, eros ante consequat ex, et condimentum
      massa mauris et sem.
    </div>
  </div>
  <div class="cols-12 col-sm-6 col-lg-4  d-flex flex-column ">
    <header class="h4 border border-primary">
      Some header text
    </header>
    <div class="border border-danger flex-grow-1">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat vitae lacus eget pretium. Donec vel
      mauris lorem. Vivamus massa enim.
    </div>
  </div>
  <div class="cols-12 col-sm-6 col-lg-4  d-flex flex-column">
    <header class="h4 border border-primary">
      Some really long text which is probably gonna take more than one or two lines
    </header>
    <div class="border border-danger  flex-grow-1">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat vitae lacus eget pretium. Donec vel
      mauris lorem. Vivamus massa enim, lacinia et lorem vel, porta viverra orci. Maecenas sagittis feugiat lectus,
      ac imperdiet urna fringilla et.
    </div>
  </div>
</div>

NOTE: To ensure that the header and content boxes match in each container, a grid layout would be necessary as flex alone cannot accomplish this task, it can only fill the available space.

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

Tips for updating grid variables in Bootstrap 4 and Angular

What's the best way to truly override bootstrap variables? I've tried the following code but it's not working // overrides.scss @import '~bootstrap/scss/functions'; @import '~bootstrap/scss/variables'; @import '~boo ...

angularvariablessassbootstrap-4

Tips for moving a title sideways and adjusting the bottom section by x pixels

I am seeking to accomplish a design similar to this using CSS in order to create a title of <h1>DISCOVER <span>WEB 3</span> DIMENSIONS</h1>. How do you recommend achieving this? Thank you, I have searched on Google and asked frie ...

htmlcss

What's causing my struggle to override the bootstrap nav-link class in next.js?

I am facing an issue where I need to customize the active state of bootstrap .nav-link in the code snippet below: <li className="nav-item"> <a className={`${styles.navLink} nav-link`} role="tab" data-to ...

csstwitter-bootstrapnext.js

Update array when checkbox is selected/deselected

Using angular-google-maps, I am creating a map with various types of markers. Below the map, there are checkboxes in a simple form: <div class="mapOptions"> <form action="" class="form-inline" style="text-align:center"> <label for=""& ...

javascripthtmlangularjs

Create an unordered Vue component object

In the data retrieved from the backend, there is an object containing various properties, one of which is the 'average' value. This object is ordered based on that value and when accessed through Postman, it appears as follows: ranking: ...

javascripthtmlvue.js

Creating a minigame using JQuery (Javascript)

I am currently developing a collection of mini-games for my big project. The approach I've taken in creating this mini-game is similar to one I used previously. However, unlike my previous version which only had one PuzzleContainer, this new iteration ...

javascriptjqueryhtmlcss

Is there a clash between ng-if and col col-50?

Currently, I am attempting to create a table using Angular code within HTML. The structure of the table is exactly how I want it to be, and here is the code snippet representing it: <div class="row"> <div class="col col-25">Date</div> ...

htmlcssangularjs

Looking to extract the hidden value from an HTML input field using Selenium

Unable to retrieve the value of a hidden element in HTML, even though it is displaying. Seeking assistance in accessing the value despite the type being hidden. <input type="HIDDEN" label_value="Sub Reference" title="Sub Reference" id="ACC_NO" dbt="BK_ ...

javahtmlseleniumselenium-webdriver

Utilizing the `theme` property in makeStyles with Material-UI

I am currently working on passing down an muiTheme to a component through the use of ThemeProvider, and I also want to apply it to the children components. Furthermore, I aim to utilize the theme's properties in both components by creating a classes o ...

javascriptcssreactjsmaterial-ui

Editing text on an Android device - Removing formatting pieces

I've encountered an issue where trying to remove spans from an EditText using EditText.getText().clearSpans() results in strange behavior. Line feeds start appearing as boxes and any newly set spans are misplaced. My question is: Is there a way to cl ...

androidandroid-edittextgettexthtmlredraw

Ways to avoid Bootstrap popovers from automatically breaking lines

I am struggling with adding a tooltip using Bootstrap's popover. Here is what I have tried: <ul> <li>Entry 1 ....................................................................</li> <li>Entry 2 ...................... ...

htmltwitter-bootstrappopover

Tips on styling HTML using a query value in string format

When using ASP.NET razor and SQL Server 2008 R2, I have a local variable declared in the following manner: var tsmMtd = db.QueryValue(" SELECT b.Name, SUM(subtotal) totalSUM FROM DR_TRANS a INNER JOIN Staff b ON a.Salesno = b.Staffno WHER ...

htmlcssasp.netsql-server-2008razor

Steps for customizing the color of the center circle on a chosen radio button

I am seeking guidance on how to change the color of the center circle of a selected radio button using CSS. I am uncertain about the proper way to implement this change. If my explanation is unclear, please feel free to leave a comment. <div Name="fo ...

bootstrap-4

Employing forward slashes as the template delimiter in JavaScript for HTML

let a = 1.10; let html = '<div>'\ '<strong>' + a + '</strong>\ //error here </div>'; console.log(html) Can you identify the issue in the code above? The intention is to insert a variab ...

javascriptjqueryhtml

Tips for keeping your avatar contained within a Bootstrap grid

I am attempting to adjust the positioning of my "image holder" (avatar) with a top and bottom margin of 3px, but when I implement this change, the image holder shifts outside of the grid. Below is the code snippet in question: <div class="container con ...

htmlcss

How to retrieve the image source from a block using jQuery

Currently, I am working on developing a slider for my webpage using jquery's "Cycle" plugin. However, I have encountered an issue with accessing the image sources used in the slider. To provide more context, here is a snippet of code from the 'he ...

javascriptjqueryhtmlcssjquery-cycle

Invisible boundary line within the column

My task involves creating a table using div elements. The layout of the table includes two columns structured as follows: <div> <div class = "columnborder"><span>Some text for column 1</span></div> <div><span>Some ...

htmlcss

The text does not automatically move to the next line

How can I make the content in this form section wrap to the next line in a list-item and overlap the width of the div content? The second line, particularly where it mentions Security Question two https://i.sstatic.net/5CVi2.png This is my HTML & CS ...

htmlcss

CSS is malfunctioning on IE and Chrome browsers, yet it functions correctly on CodePen when using Chrome

We are experiencing issues with our CSS and HTML not displaying correctly in IE or Chrome. The text is not properly center aligned. Oddly enough, it works fine when viewed through Chrome on CodePen. The text is center aligned there. <html> <hea ...

htmlcssinternet-explorergoogle-chrome

Tips for accessing the names of subdirectories and files on a website

If we have the URL, is it possible to access the names of the files within the parent directory? Similar to how we can do in DOS by using the command "DIR" to view the list of files inside a folder. For example, if we have a URL like , I am curious to kno ...

php.nethtmlcss