Optimal method for wrapping columns in Bootstrap

I found a helpful resource that explains how to utilize column wrapping in Bootstrap.

Let me show you a snippet of my code:

    <div class="row">
        <div class="col-12">
            1
        </div>
        <div class="col-7">
            2
        </div>
        <div class="col-12">
            3
        </div>
        <div class="col-6">
            4
        </div>
        <div class="col-6">
            5
        </div>
    </div>

This setup is functional, but I'm wondering if there might be a better approach. Should I create a row for each column, like this?

    <div class="row">
        <div class="col-12">
            1
        </div>
    </div>
    <div class="row">
        <div class="col-7">
            2
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            3
        </div>
    </div>
    <div class="row">
        <div class="col-6">
            4
        </div>
        <div class="col-6">
            5
        </div>
    </div>

Any feedback or suggestions would be appreciated. Thank you!

htmlcssbootstrap-4grid

Answer №1

Yes, rows are no longer necessary. According to the latest Bootstrap 5.0 guidelines:

The .col-* classes are now capable of providing elements with specific widths even without being nested within a .row element. When column classes are applied as indirect children of a row, the paddings are excluded.

Therefore, feel free to stick with your initial approach.

Answer №2

By default, Bootstrap rows are designed to wrap. This means that if the combined width of two columns exceeds 12, the second column will be moved onto a new line:

<div class="container">
    <div class="row">
        <div class="col-9">
            .col-9
        </div>
        <div class="col-4">
            .col-4
        <!-- Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped 
             onto a new line as one contiguous unit. -->
        </div>
        <div class="col-6">
            .col-6
        <!-- Subsequent columns continue along the new line. -->
        </div>
    </div>
</div>

If you are satisfied with the default behavior, there is no need to create new rows each time.

New rows should only be added when you specifically want them to be separate rows:

<div class="container">
    <div class="row">
        <div class="col-5">1</div>
    </div>
    <div class="row">
        <div class="col-6">2</div>
        <div class="col-3">3</div>
    </div>
</div>

If I omit adding a new row for column #2 and #3, they would be on the same row by default alongside column #1.


Personally, I prefer the second approach as it clearly indicates my intention for columns to be in separate rows. This eliminates any confusion or reliance on knowing Bootstrap's default behavior.

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

Is there a way to target the mat-icon element using the icon's name in CSS

I have a group of mat-icons that are automatically generated, meaning I cannot assign them ids or classes. The only way to distinguish between them is by their names: <mat-icon role="img">details</mat-icon> <mat-icon role="img ...

htmlcssangularangular-materialmaterial-ui

Looking to position content within a card to the bottom right in Bootstrap 4

Having trouble aligning my text and button within a card to the bottom right. Can't seem to get them to line up correctly. https://i.sstatic.net/OTDwJ.jpg This is what I have in my code: <div class="col-sm-3 text-right my-auto"> <div cl ...

htmlbootstrap-4alignmentvertical-alignment

Can a CSS class be designed to have a value that changes dynamically?

Let's say we have some div elements that look like this: <div class="mystyle-10">Padding 10px</div> <div class="mystyle-20">Padding 20px</div> <div class="mystyle-30">Padding 30px</div> Would it be possible to c ...

css

Discovering the HTML5 Cache status through the utilization of Selenium's JavaScriptExecutor

How can I use Selenium's JavaScriptExecutor to retrieve HTML5 Cache status? I attempted the following code, but was unable to obtain the accurate status. import org.openqa.selenium.JavascriptExecutor; import org.openqa.selenium.WebDriver; import or ...

javajavascripthtmlselenium

Adjusting the width of input textboxes for alignment

I currently have a set of input textboxes that I have attempted to align using CSS with the {width: xxx px;} property. However, this method is unreliable as it does not consistently ensure proper alignment. <style> #left_col p { margin-top: 15px ...

htmlcss

Bootstrap 4: The `.flex-column` class is functioning correctly, however the `.justify-content-center` class is not working as intended

Currently, I am revisiting some older code and working on arranging the content properly on my webpage. However, I have encountered an issue: while my flex properties are functioning correctly, the '.justify-content-...' is not working as expecte ...

cssbootstrap-4

Height of parent block grows when child block expands (positioned absolutely)

I am facing a situation where I need to make an invisible block expand on hover of its parent block. The parent block has a fixed width, while the expanding child block needs to be full screen width, therefore it is positioned absolutely. However, when the ...

jqueryhtmlcsscss-animations

What steps can be taken to ensure that the scale() function is given the highest priority

Trying to develop a program that generates a canvas graph based on some calculated data. To adjust for larger numbers, I attempted to scale the graph using ctx.scale();. However, every time I do this, the canvas goes blank! I even tried scaling the canvas ...

javascriptandroidhtmlcanvasscaling

Hovering over the main navigation will reveal the sub navigation bar underneath

I am trying to implement a sub navigation bar using bootstrap that resembles the design in the image provided below. Specifically, I would like the 'Advertising' tab on the main navigation bar to reveal two sub pages titled 'How It Works&apo ...

htmlcsstwitter-bootstrapnavigationnav

Creating a Custom Emoji Module

Currently working on creating an emoji component using JavaScript without the React framework. Does anyone know of a comprehensive list containing the unicodes for all emojis? I can successfully display an emoji on the screen by using its Unicode (e.g. & ...

javascripthtmlhtml-listsemoji

What is the method for adding <option> tags to a <select> statement using a for loop?

Currently, I am facing a challenge in dynamically populating the <option> tags within a <select> menu. My approach involves using a for loop in JavaScript to cycle through the number of options and append them to the select tag. The part of th ...

javascripthtmlajaxdom

Unable to resize the image due to CSS limitations

My pursuit for an answer has hit a dead end... I'm currently attempting to insert images as preview images for a link; the images and link become visible with a javascript command triggered by pressing an icon. However, despite my efforts, the image r ...

htmlcss

The font size in the Android Chrome browser appears different when switched between portrait and landscape modes

I have uploaded a screenshot here, but I am puzzled as to why the font size appears differently on the Android browser in portrait and landscape modes. $(document).ready(function(e) { var x=$(".main").css("font-size"); alert(x) }); .main{ font-size: ...

jquerycsshtml

What causes a row to spill out of a liquid-filled container along the horizontal axis?

I need to add a footer to my website, but when I do, it causes the content to overflow on the x-axis. Removing the 15px margins in the .row class is not an option for me because that would require me to redo all of the CSS code. <script src="https:// ...

htmlcssbootstrap-4overflow

UL tags incompatible with columns

I am attempting to create 2 columns using an ordered list (ul). Despite successfully adding the ul and li's, I am encountering issues with the column formatting. You can view the JSFiddle here. Below is the code snippet: ul { background-color:yello ...

htmlcsshtml-lists

What are the best strategies to perfectly insert an image within a div, ensuring that no background color is visible?

Is there a way to fix the issue of a white background appearing at the bottom of this div? .flexbox-item_one { display: inline-block; width: 200px; margin: 10px; background-color: white; box-shadow: 5px 5px 5px; overflow: hidden; } .flexb ...

htmlcss

Is there a way to transform a hover dropdown menu into a sidebar dropdown menu that can be clicked on mobile devices?

Currently working on enhancing the navigation menu of my website, and I have encountered a challenge with a dropdown sub-menu when viewed on mobile devices. In reference to w3Schools, I successfully implemented a hover-based sub-menu for desktop users. Ho ...

javascripthtmlcssdropdownsubmenu

Ways to update CSS following button submission?

I'm facing an issue with two input fields in my ejs file that accept hexcodes. After entering the hexcodes and clicking the submit button, I update variables in my stylesheet to these hexcodes to change the background gradient. Is there a way to refre ...

javascripthtmlcssejs

Implementing Desktop Alerts for Your Web Platforms without requiring the user to be actively engaged in the application or even logged out of the site

Looking to integrate browser notifications in a ASP.NET MVC Web Application, even when the user is not within the application. Is it possible to achieve this functionality? I have already explored , but need further assistance. If I utilize SignalR for Cl ...

javascriptc#jqueryasp.net-mvchtml

How can I integrate a timer into an Angular carousel feature?

I have put together a carousel based on a tutorial I found on a website. Check out the HTML code for my carousel below: <div class="row carousel" (mouseover)="mouseCheck()"> <!-- For the prev control button ...

htmlcssangulartypescriptcarousel