Leveraging .col-* within a .d-flex container in Bootstrap 4

What is the recommended practice for using .col-* as children in a .d-flex container? Should .d-flex be used with .row instead?

I have noticed that the Bootstrap 4 Docs do not show any examples of using a .col-* in a .d-flex container. The layouts provided are like this:

<div class="d-flex flex-row">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

However, the .p-2 classes in these examples do not make the columns responsive as they only define padding and do not specify width.

For example, I want something like this:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="d-flex flex-wrap">
  <div class="col-sm-3 col-12">
    Responsive cols
  </div>
  <div class="col-sm-3 col-12">
    Responsive cols
  </div>
  <div class="col-sm-3 col-12">
    Responsive cols
  </div>
  <div class="col-sm-3 col-12">
    Responsive cols
  </div>
</div>

Is it considered good or bad practice according to Bootstrap guidelines to use .d-flex and .col-* together?

twitter-bootstrapcssflexboxbootstrap-4

Answer №1

As detailed in the documentation...

"Rows act as containers for columns. Each column contains horizontal padding (referred to as a gutter) to manage the spacing between them. To offset this padding, negative margins are applied to the rows, ensuring that all column content aligns visually along the left side."

Therefore, col-* elements should be direct children of the .row class. Both .row and col-* classes are intended to work together as part of a grid system. This setup allows columns to wrap onto the next line when necessary, thanks to the use of flex-wrap.

Hence, there are two main reasons why col-* elements should be placed within a row instead of a d-flex container:

  • Ensuring proper alignment with container content on the left and right sides
  • Facilitating column wrapping based on grid widths

To see a comparison of placing col-* elements inside a row versus a d-flex container, visit:

Answer №2

I have yet to come across an example that utilizes a .col-* inside a .d-flex container.

This serves as a clear sign that you should stick with using .row. The d-flex class applies the following CSS:

.d-flex {
  display: -webkit-box!important;
  display: -ms-flexbox!important;
  display: flex!important;
}

That is all there is to it. On the other hand, .row works in conjunction with .container (or .container-fluid), and also includes additional margin settings to ensure proper positioning of your nested .col-*-* elements.

The d-flex class falls under Bootstrap 4's "Utility" classes, which are meant to offer added flexibility in layout and structure without replacing more robust components like Grid.

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

Focus on the viewport - create a vertically centered div with a fixed height and width using either JavaScript or CSS techniques

I am trying to vertically center a div with multiple images inside. I have already set the width and height of the div to 600 and 500 respectively. I am open to using JavaScript if necessary, but I would prefer a simple solution. Can anyone help me navigat ...

jquerycssvertical-alignment

Enhance Bootstrap typeahead to accommodate multiple values

I have a basic typeahead setup for searching city names. However, upon selecting a city, I also need to retrieve its latitude and longitude in order to send that data to the backend. $('.typeahead').typeahead({ minLength : 3, source : ...

javascriptjqueryhtmljsontwitter-bootstrap

Include an additional tag solely by using a specific set of keys predetermined in advance

After getting inspiration from Stackoverflow, I decided to enhance my text-box with a tagging feature. The first step was downloading and adding the http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js file to my ASP.NET web folder, allowing me to u ...

javascriptjquerycssjquery-eventskeystroke

I am encountering challenges and confusion with CSS

I am encountering an issue with my code that is causing some difficulties. The goal is to create a basic div with left, right, and center panes. The left pane loads perfectly, but the right pane, which has the same css styling, displays its children with a ...

htmlcss

Placing <object> within the existing HTML form

If a user enters the values 12345 into an input box on my webpage and clicks a button, an object will appear below or instead of the form. The code I have for this functionality is: <form name="form" action="" method="post"> <input type="text" ...

javascriptphpjqueryhtmlcss

Backend input validation being shown on the console, yet not appearing on the frontend in React, nodejs with Bootstrap

ReachOut.js Component import React, { Component } from "react"; import { Button, Row, Col, Form } from "react-bootstrap"; import axios from "axios"; import { MDBContainer, MDBRow, MDBCol, MDBInput } from "mdbreact"; import { withRouter } from "react-route ...

node.jsreactjsvalidationerror-handlingbootstrap-4

What is the best way to adjust the animation settings for SweetAlert2's Toast feature?

I recently integrated SweetAlert2's toast notifications into my web application and customized the animation using the customClass parameter to have the notification slide in from the right side. However, there are a couple of things I'm struggli ...

csssweetalert2

Configuring the space beneath a multi-line text with a bottom border distance or shadow

I am looking to add a bottom border with less spacing than default for specific text, creating a look similar to this image: https://i.sstatic.net/sCQii.png Unfortunately, it seems the border property cannot achieve this effect. I am experimenting with t ...

htmlcss

Centering Tabs in React-Bootstrap

By default, Bootstrap-react's tabs align to the left. <Tabs defaultActiveKey={2} id="uncontrolled-tab-example"> <Tab eventKey={1} title="Tab 1"> Tab 1 content </Tab> <Tab eventKey={2} title="Tab ...

cssreact-bootstrap

CSS syntax highlighting in Visual Studio 2015 does not function properly when used within vbhtml razor pages

When editing my vbhtml pages, I've noticed that everything syntax-highlights properly except for the CSS enclosed in the <style>...</style> block. Inline CSS like <td style="color:yellow"... still highlights correctly, but not the CSS i ...

cssvisual-studiorazorvisual-studio-2015styles

Troubleshooting the non-responsive behavior of Bootstrap's hidden-sm-down

Why are the two images within the <div> with hidden-sm-down still visible on my laptop when I resize the page? I need them to be hidden on small devices for a different menu layout. <div class="row"> <div class="col-m ...

htmlcsstwitter-bootstrap

When using React, the page loads and triggers all onClick events simultaneously, but when clicking on a button, no action is taken

I have a strong foundation in HTML and CSS/SASS but I'm just getting started with React. Recently, I encountered an issue that has me stumped. I am trying to highlight a button on the navigation bar based on the current page the user is on. I attemp ...

javascripthtmlcssreactjsonclick

What is the process to extract the displayed font using JavaScript?

One interesting feature of Google Chrome is that it displays the rendered font in DevTools. For instance, when you have the CSS code: font-family: Montserrat, Helvetica, sans-serif; and the Montserrat font is not available or disabled, Chrome will indic ...

javascripthtmlcssgoogle-chrome

Glitch with AngularJS Bootstrap date picker

Currently, I am working on integrating a datepicker into my PhoneGap application using Angular UI Bootstrap. <h4>Popup</h4> <div class="row"> <div class="col-md-6"> <p class="input-group"> <input type="text" cl ...

angularjstwitter-bootstrapcordovaangular-ui-bootstrap

Trouble with Chrome's CSS making table cell display as block

After searching, I stumbled upon this question that appeared to have the solution I needed. Surprisingly, even when using chrome 32.0.1700.102, the fiddle provided in the first answer worked perfectly for me. However, when I copied the HTML code into a ne ...

htmlcssgoogle-chrome

Increase scrolling speed? - Background abruptly moves after scroll

I'm facing a minor issue. I want to create a parallax background effect similar to what can be seen on nikebetterworld.com. In my initial attempt, I managed to achieve some functionality, but I believe it can be improved. As I scroll, the background p ...

javascriptjquerycss

How to create a stylish border line to separate rows using CSS

Having some trouble with HTML code... <table class="table table-condensed order-statistics"> <tr class="order-statistics-row"> <div class="row"> <div class="col-lg-4"> Order ID: </div> <div ...

htmlcss

Is there a way to ensure that the text inside the red div is fully contained within the div, so that when it is expanded, all the text will be displayed properly?

I've been experimenting with creating an interactive function that expands a red box and reveals additional text when the cursor hovers over it, using a vertical linear transition. Unfortunately, I'm facing difficulty in implementing this feature ...

htmlcsscss-transitions

Firefox causing issues with the positioning of 2 div elements

I am experiencing an issue with my website. I have a content container where I display photos on the left and product descriptions on the right side. The layout appears correctly in Chrome but not in Mozilla Firefox. I'm unsure of what may be causing ...

htmlcssgoogle-chromefirefoxposition

Problematic: BS4 Cards cannot be accommodated within the parent div.Improved: The

Within a dynamic-height parent div, I have two cards stacked on top of each other. However, the issue arises when these two cards do not completely fit inside the parent div. The problem likely stems from the table within the lower card, which is not respo ...

htmlcssangularbootstrap-4