Creating a stylish layout with Bootstrap 4: equal height divs filled with color and a sleek gutter in between

I am struggling to create a bootstrap 4 layout as per my design screenshot. I have researched other Stack Overflow posts without finding a solution.

  1. The .container-fluid layout has a grey fill color, achieved using my custom class .bg-grey.
  2. As per the design, the body is centered, so I wrapped the columns with the .container class.
  3. .col-8 has the .bg-white class and .col-4 has the .bg-dark class to make them the same height with space in between.
  4. An issue is the extra margin on the right, making the design off-center.

Desired Design

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

In my attempts to solve the issue, I encountered problems with the following code:

Attempt 1:

I tried different approaches but wasn't successful in fixing the extra margin issue.

  1. Adding margin to col-8 pushes .col-4 down due to increased total width.
  2. Assigning .bg-white and .bg-dark to a new child changes the fill color size.
  3. Adding .h-100 class to the new div didn't resolve the issue.

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

<div class="col-sm-8  ">
  <div class="content px-4 py-2 bg-white h-100">
    <h3 class="heading03">Life at </h3>
    <h2 class="heading02">.</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
      quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
      Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
    </p;


  </div>
</div>

<div class="col-sm-4 ">
  <div class=" content px-4 py-2 bg-black white-text h-100">
    <h5 class="heading05">Latest at </h5>
    <h4 class="heading04 text-muted">Top 10 </h4>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa...
    </p>
    <h5 class="heading05">Latest at </h5>
    <h4 class="heading04 text-muted">Top 10 </h4>
    <p class="m-0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa...
    </p>

  </div>
</div>

Attempt 2: I tried another layout example from Bootstrap's website but faced margin inconsistencies.

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

<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container-fluid bg-grey pb-5 ">
  <div class="row">
    <div class="container">
      <!-- second part -->


      <div class="row pt-5">

        <div class="d-md-flex flex-md-equal w-100 ">

          <div class="col-8 bg-white mr-md-3 pt-3 px-3 pt-md-5 px-md-5 overflow-hidden">
            <div class="my-3 py-3">
              <h3 class="heading03">Life </h3>
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque
                eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer
                tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
              </p;
            </div;
          </div;


          <div class="col-4 bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-white overflow-hidden">
            <div class="col-12">
              <div class="my-3 p-3">
                <h2 class="display-5"> headline</h2>
                <p class="lead">subheading.</p>
              </div>

            </div>


          </div>
        </div>

      </div>


    </div>
  </div>
</div>

htmltwitter-bootstrapcssbootstrap-4

Answer №1

Your content is presented in this markup, showcasing both with and without background color for visual spacing.

The text has been aligned for better visualization of gutters using the default Bootstrap padding applied to columns.

Bootstrap seems to effectively center elements by default.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

<div class="container-fluid bg-danger">
  <div class="p-4">
    <div class="row">
      <div class="col-8 bg-info">
        <h3 class="heading03">Life</h3>
        <p class="text-justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
      </div>
      
      <div class="col-4 bg-dark text-white">
        <h2 class="display-5"> headline</h2>
        <p class="lead">subheading.</p>
        <p class="text-justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. 
        </p>
      </div>
    </div>
  </div>
</div>

<div class="container-fluid">
  <div class="p-4">
    <div class="row">
      <div class="col-8">
        <h3 class="heading03">Life</h3>
        <p class="text-justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium.
        </p>
      </div>

      <div class="col-4">
        <h2 class="display-5"> headline</h2>
        <p class="lead">subheading.</p>
        <p class="text-justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
      </div>
    </div>
  </div>
</div>

If you desire different background colors with a visual distinction, refrain from adjusting column padding and margins. Instead, encapsulate the content within divs and manipulate padding and margins there.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

<div class="container-fluid bg-danger">
  <div class="p-4">
    <div class="row">
      <div class="col-8 bg-info">
        <div class="mr-1 bg-warning">
          <h3 class="heading03">Life</h3>
          <p class="text-justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
        </div>
      </div>

      <div class="col-4 bg-dark text-white">
        <div class="ml-1 bg-warning">
        <h2 class="display-5"> headline</h2>
        <p class="lead">subheading.</p>
        <p class="text-justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
        </p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="container-fluid">
  <div class="p-4">
    <div class="row">
      <div class="col-8">
        <div class="mr-1">
          <h3 class="heading03">Life</h3>
          <p class="text-justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
        </div>
      </div>

      <div class="col-4 bg-dark text-white">
        <div class="ml-1">
        <h2 class="display-5"> headline</h2>
        <p class="lead">subheading.</p>
        <p class="text-justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
        </p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer №2

It appears that the solution you are seeking resembles this. (see the attached snippet).

The implementation of the bootstrap classh-100 sets the height of the div to 100%, ensuring that the two child cols within your row share the same height. More information can be found here.

By equalizing the height, all elements align correctly, including the margin and the gutter. Please review the snippet below.

To illustrate the changes, I have added background colors.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

<div class="container-fluid bg-danger pb-5 ">
<div class="row">
    <div class="container">


        <div class="row pt-5">              
            
            <div class="col-sm-8">
                <div class="content px-4 py-2 bg-white h-100">
                    <h3 class="heading03">Life at </h3>
                    <h2 class="heading02">We plan to be among them.</h2>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                        massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                        Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
                        quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
                        rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
                        Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
                        tellus.
                    </p>


                </div>
            </div>

            <div class="col-sm-4">
                <div class=" content px-4 py-2 bg-dark text-white h-100">
                    <h5 class="heading05">Latest at </h5>
                    <h4 class="heading04 text-muted">Top 10  </h4>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                        massa...
                    </p>
                    <h5 class="heading05">Latest at </h5>
                    <h4 class="heading04 text-muted">Top 10  </h4>
                    <p class="m-0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                        massa...
                    </p>

                </div>
            </div>
        </div>
    </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

How come e.target.value always shows the most recent value?

Starting out in HTML and I have a question regarding input. Here is the HTML code I am working with: <input type="text" value="abc" onChange={(e) => { console.log(e.target.value); }}/> I am puzzled because even though the default v ...

htmldom-events

When utilizing the ::first-letter pseudo-element on <sub> and <sup> tags

Why is the <sub> and <sup> not supporting the ::first-letter CSS pseudo-element? Any solutions? p:first-letter, sub:first-letter, sup:first-letter { color: red; font-weight: bold; } <p>This text contains <sub>subscript</su ...

javascripthtmlcss

Pictures piling up vertically instead of lining up horizontally

Is there a way to display these images in one row horizontally instead of on separate lines? The text under the images is causing them to wrap because of the width. How can I ensure that the title text has the same width as the image? <img src="image.p ...

html

Laravel fails to generate log file for error incident

In my Laravel website, I have implemented a basic form for users to ask questions. However, when I tried submitting the form using Ajax, I encountered an error in the console: GET http://localhost/sencare_v2/ask-question-form-submit?first_name=shbshb&a ...

phphtmlajaxlaravellaravel-routing

Creating a table with both a fixed header and a fixed column using only CSS

I'm looking to create an HTML table with a fixed header and fixed first column, but I want to avoid using JavaScript or jQuery to set scrollTop/scrollLeft for smooth functionality on mobile browsers. I found a solution that fixes the first column he ...

htmlcsshtml-tablemarkupfixed-header-tables

Expand Bootstrap accordion on hover

I have tried several examples that I discovered on Google and Stack Overflow, but none of them seem to work. So, I decided to attempt a different solution for opening the Bootstrap accordion on hover, however, it is not working as expected. Do you have any ...

javascriptjqueryhtmlcsstwitter-bootstrap

My website footer is falling short and not reaching the bottom of the page

I've encountered an issue where my footer is not extending all the way down the website, despite trying various solutions. Here's what I attempted: I used the following CSS properties: min-height: 100%; max-height: 100%; I included these prope ...

htmlcsstwitter-bootstrapfooter

Achieve a sleek, modern look by using CSS to add a border with crisp square

Hello everyone, I'm currently attempting to add a border to only one side of an a element. However, when I add the border to just one side, it creates a sharp diagonal edge: https://i.stack.imgur.com/pAqMM.png My goal is to eliminate the sharp edge ...

htmlcss

Updating style in Javascript can sometimes be a bit tricky

What's preventing this from working? localStorage.fontSize contains the correct value, but the initial document.body.style.fontSize = localStorage.fontSize + "pt"; doesn't update the style. <script type="text/javascript> if(!localStorage. ...

javascripthtmlcss

Issue with header background images not showing up in Safari browser

On my website, the top header background and the background of the "Kreation Team" Div are not appearing on Safari for iPads and iPhones, but they are visible on iMacs and MacBooks. The background images do not show up on smaller devices. If you compare C ...

htmlcsstwitter-bootstrapmobile-safari

Reposition the origin when scaling SVG

Can anyone assist me in repositioning the smoke group origin to the center so that it scales along with the rocket? I've attempted utilizing the following: transform-origin: center; translate-box: box-fill; but it doesn't seem to resolve the i ...

htmlcsssvgcss-animationssvg-animate

What is the protocol for displaying linear gradients that overlap?

My objective is to create a unique cutting corner effect using linear gradients. Achieving this on one corner is straightforward: body { background: #eac996; } .box { width: 100px; height: 100px; margin: 100px auto; padding: 20px; backgroun ...

csslinear-gradients

Ways to adjust the height of one panel based on the height of surrounding panels

I have a layout with three panels: two on the left side and one on the right. <div class="row"> <div class="col s6"> <div class="panel"> content1 </div> <div class="panel"> ...

javascriptcsspanelmaterialize

`javascript pop up notification will only display one time`

I am currently developing a chrome extension with two different modes. When the user clicks on the icon, a pop-up message should appear to indicate which mode is active. However, I am facing an issue where the message does not always display when the pop- ...

javascripthtmlgoogle-chrome-extensionpopup

Exploring radio button functionality in Rails 5.1.6 integrated with Bootstrap 4

Looking for assistance in setting up a basic radio button with rails 5.1.6. Any help would be much appreciated. The form seems to be functioning without errors, however the stored value is not what was expected (current stored value: {:id=>"project_typ ...

ruby-on-railsbootstrap-4ruby-on-rails-5

Video background function that mimics CSS's background size cover for a specific element, instead of the entire webpage

In the process of developing a new website, I am looking to incorporate a large splash background as a "hero" image. Similar to the website found at , I am hoping to use a video as the background image showing a woman unloading a car. One key requirement ...

htmlcssresponsive-design

CSS - Issue with dropdown sub-menu alignment despite using absolute positioning in relation to parent button

Title fairly explains it all. I'm having trouble getting my dropdown submenus to align perfectly with the bottom of the parent list item element. The list item has a relative position, while the submenu has an absolute position. I've attempted ...

htmlcssdrop-down-menusubmenu

What is the best way to make the div inside the table cells expand to fill the available space?

I'm having trouble making the inner divs within table cell divs expand and fit their parent div without overlapping the next cell below it. Check out the sandbox for reference I've outlined the areas in grey where I want the cells to be filled. ...

css

Sometimes, CSS unicode characters may not render correctly and appear as jumbled symbols like "â–¾"

https://i.sstatic.net/eGvzJ.jpg Every now and then, about 1 in every 100 page refreshes, the unicode characters on my page turn into jumbled nonsense (you might need to zoom in to see it clearly). Specifically, the unicode characters are displayed as â ...

cssasp.net-coreunicodedatatablesbootstrap-5

How to make Bootstrap 4 navbar tabs collapse using card accordion functionality

Check out this interactive example: https://jsfiddle.net/dominijk/bLpach25/1/ The accordion layout I have set up consists of collapsible cards where opening one card causes the others to collapse. The tabs within each card are functioning properly. My go ...

javascripthtmlcssbootstrap-4