Creating a multi-column layout in Bootstrap 4 without using the Masonry method

Currently, I am designing a column layout using Bootstrap 4.

Here is the code snippet:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-6">Section 1</div>
    <div class="col-6"> Section 2 Content. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea animi, vero et ratione asperiores cumque aspernatur. Laudantium dolorum odit culpa maxime officiis aperiam necessitatibus enim eveniet, reprehenderit deserunt molestias in. </div>
    <div class="col-6"> Section 3</div>
    <div class="col-6"> Section 4</div>
  </div>
</div>

I am looking for a way to move Section 3 below the content of Section 1 without using a masonry layout. Is there a method to achieve this?

Your assistance would be greatly appreciated, especially in making Section 2 appear below Section 1 in responsive mode while maintaining the current layout in normal mode. I hope to avoid duplicating code and manage the layout effectively.

htmlcssbootstrap-4

Answer №1

To achieve the desired custom output, some adjustments need to be made to the code.

.row{
  display:block;
}
.col-6{
  float:left;
}
.float-right{
  float:right;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-6">Section 1</div>
    <div class="col-6 float-right"> Section 2 Content. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea animi, vero et ratione asperiores cumque aspernatur. Laudantium dolorum odit culpa maxime officiis aperiam necessitatibus enim eveniet, reprehenderit deserunt molestias in. </div>
    <div class="col-6"> Section 3</div>
    <div class="col-6"> Section 4</div>
  </div>
</div>

Answer №2

Bootstrap has a order-* class that allows you to control the visual order of your content. To implement this, refer to the documentation. Here is an example code snippet:

The use of .order- classes in Bootstrap helps in adjusting the order of content visually. These classes are responsive and can be set based on breakpoints (e.g., .order-1.order-md-2), with support for ordering from 1 to 12 across all grid tiers.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-6 order-1">Section 1</div>
    <div class="col-6 order-3"> Section 2 Content. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea animi, vero et ratione asperiores cumque aspernatur. Laudantium dolorum odit culpa maxime officiis aperiam necessitatibus enim eveniet, reprehenderit deserunt molestias in. </div>
    <div class="col-6 order-2"> Section 3</div>
    <div class="col-6 order-4"> Section 4</div>
  </div>
</div>

Answer №3

Incorporate the content into two separate sections, each div occupying half of the space.

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


<div class="container-fluid">
       <div class="row">
         <div class="col-6">
           <p>section 1</p>
           <p>Section 3 Content.</p>
         </div>
         <div class="col-6">
           <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea animi, vero et ratione asperiores cumque aspernatur. Laudantium dolorum odit culpa maxime officiis aperiam necessitatibus enim eveniet, reprehenderit deserunt molestias in.</p>
           <p>Section 4 Content.</p>
         </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

Trouble with CSS Positioning: Resizing my browser causes my image to shift in position

Upon resizing the browser window, my website layout adjusts accordingly and looks as intended at a smaller size: However, as I begin to expand the browser width, the centrally positioned image starts shifting towards the left. I aim for the image to remai ...

htmlcss

Issue with jQuery select box (roblaplaca) and its custom scroll bar functionality not functioning as expected

Recently, I implemented the custom select box script from . This script allows for two select boxes, where the second one updates dynamically using AJAX when there is a change in the first select box. Below is a sample of the HTML code: <option>One& ...

javascriptjqueryhtmlcssajax

Transform the color of links in a Sankey diagram on Google upon clicking a node

Currently, I am in the process of creating a Sankey diagram using Google charts. As of now, I have implemented the following CSS: svg path:hover { fill: red; } However, I have noticed that this code only changes the color of the links when hovering over ...

javascripthtmlcssgraphgoogle-visualization

How can I retrieve the span html element without using a class with ajax?

Trying to work with Ajax syntax for the first time, I have this HTML code. <div class="select2-container select2" id="s2id_ServiceID-2-1" style="width: 100%;"> <a href="javascript:void(0)" onclick="return false;" class="select2-choice" tabind ...

javascripthtmlajax

You cannot use jQuery to initiate a button click event through another button click event

I'm currently facing an issue where I want to replace one button with another, but it's not going as smoothly as I hoped. When I click the first button, everything works fine. However, when I click the second button, which is supposed to trigger ...

javascripthtmljquery

Why is the value of the select element in AngularJS an object?

Here is a JSON object: { "9000A": { "LOCname":"A Place", "LOCid":"9000A" }, "2700C": { "LOCname":"C Place", "LOCid":"2700C" }, "7600B": { "LOCname":"B Place", "LOCid":"7600B" } } To ...

javascripthtmljsonangularjs

The navigation bar appears distorted after tweaking the bootstrap settings

When using the default bootstrap in ASP.NET MVC, everything looks great on the page. view image description here https://i.sstatic.net/ODz6s.png However, when I switch to a different bootstrap theme, the navigation bar ends up looking like this: view ima ...

asp.net-mvcbootstrap-4

"Troubleshooting: Fixing the issue with jQuery datepicker not

After implementing the jQuery Datepicker on a field, I noticed that even though assigning a value to the field shows in Chrome's developer tools... https://i.sstatic.net/We7Ua.png Unfortunately, the assigned value does not show on the front end. I ...

javascriptjqueryhtmljquery-uidatepicker

Achieving Navbar overlap on Carousel with Bootstrap

Is there a way to make the bootstrap navbar overlap with the carousel without causing any issues with #test? HTML <nav class="navbar navbar-expand-lg navbar-dark bg-dark floating-navbar"> <div class="container"> & ...

htmlcssbootstrap-5

Encountering an error message stating that the "@font-face declaration does not adhere to the fontspring bulletproof syntax" while attempting to integrate a custom font

I've been struggling to incorporate a unique font into my website, but I keep encountering the same error every time. Despite my efforts, I haven't found much guidance on how to rectify this issue. Below is the code I'm using: @font-face ...

htmlcss

Instructions on setting div opacity when Overflow is set to visibleExplanation on setting opacity for div with Overflow

In my HTML code, I have a div element and an image tag stacked one on top of the other. The div is smaller than the image. I have set the overflow property to visible for the div. My query is, when I add an image to the image tag, the content that overflow ...

javascriptjqueryhtmlcss

Centered on the screen are the input field and corresponding label

I am in the process of creating a signup form, and I have encountered an issue. How can I make the input wider without using a fixed width like width: 420px? Additionally, I would like to center both the input field and the label. I envision something simi ...

javascripthtmlcssreactjsforms

JavaScript: Adjust DIV Width Based on Window Height

Is there a way to make the width of a div equal to the height of the window in jquery? I attempted this method: <script type="text/javascript"> $(".rt-container").style.width = $(window).height(); </script> Unfortunately, it did not work. I ...

javascriptjquerycss

Navigating between two intervals in JavaScript requires following a few simple steps

I have created a digital clock with a button that switches the format between AM/PM system and 24-hour system. However, I am facing an issue where both formats are running simultaneously, causing the clocks to change every second. Despite trying various s ...

javascripthtml

Tips to detect a specific animation completion on an element?

How can I ensure that a specific animation ends when multiple animations are triggered on an element? My scenario involves an overlay song list that appears when a list icon is clicked. The challenge lies in closing the menu smoothly. I have implemented a ...

javascriptjqueryhtmlcss

mandatory data fields for an HTML form

I'm having some trouble creating an HTML form with mandatory input fields. The code I have so far is shown below: <div class="col-sm-6"> <label for="city" class="form-control">City ...

javascriptphphtmlcsstwitter-bootstrap

Struggling to create a dynamic design for a nested column using bootstrap

After creating a layout in Figma, I have set up a grid structure as follows: <div class="container-fluid"> <div class="row" id="sobre-nos-wrapper"> <div class="col"> <div class="row"> <div class="col ...

csstwitter-bootstrapbootstrap-4

Is there a way to alter the styling of a React element without resorting to querySelector?

Just diving into React and I'm faced with a challenge - how to update the CSS of a class based on a condition. let customizeColumn = document.querySelector(".main-table-body"); !expandFilter ? customizeColumn.setAttribute("style", ...

cssreactjsmaterial-ui

View the Outcome of the Latest Form Submission on a Fresh Page

I have created a form that stores input values in a database table. Now, I want to display these results on another page once the form is submitted. However, I am struggling with how to retrieve and display all the values from the database record on the ne ...

phphtmlmysqlforms

I would like to have the div completely fill the page on my website

How can I make a div fill the entire height of my website using Bootstrap? I want to ensure that the div extends all the way down Please provide guidance on how to accomplish this. ...

htmltwitter-bootstrap