Guide on setting child elements in Bootstrap 4 to display as blocks within the row class

I've been trying to set the child div as display block using the d-block class in Bootstrap 4, but it's not working. The row class only takes display flex, and I attempted to use clearfix without any success. Could someone please assist me with this issue?

<div class="container">
        <div class="row">
          <div class="col-sm-4">
            <h3>Column 3</h3>        
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
            <p>Ut enim ad minim veniam, quis nostrud exercitation ul</p>
          </div>
          <div class="row d-block p-0">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
          </div>
        </div>
      </div>

cssbootstrap-4

Answer №1

The CSS for the .row class in Bootstrap 4 is as follows:

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

When an element has the row class, it becomes a flex-container and all its immediate children become flex-items or flex-children. This means that nested row classes will be treated as flex-children, with the default flex-direction property set to row, causing the children to sit next to each other on the same row. If there isn't enough space, the children will wrap to the next line due to flex-wrap: wrap;.

Adding a d-block class will not make the element take up full width, as it is already a flex-child. To force it to take up the full available width, you can use Bootstrap's sizing class w-100 instead of d-block.

Answer №2

In my opinion, it looks like you need the content to span the full width of the container. One way to achieve this is by setting the parent row to have a flex column layout using the flex-column class.

<div class="container">
  <div class="row flex-column">
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ul</p>
    </div>
    <div class="row d-block p-0">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</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

Prevent users from selecting content within input controls using CSS

I'm looking to prevent users from selecting the content of an input control via CSS. I've tried adding the following attributes to the control: #editContainer { user-select: none; -webkit-user-select: none; -khtml-user-select: none; ...

jqueryhtmlcss

Positioning the .aspx buttons in a coordinated manner

In my update panel, I have a label, a dropDownList, and two buttons: <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"> <ContentTemplate> <div id="dropDownList" style="position:relative;" runat=" ...

asp.netcss

Customizing the appearance of a submenu header on a WordPress website

I need assistance in creating a sub-menu style. Please refer to the image linked below for guidance: https://i.sstatic.net/Cu1on.jpg Here is my website link: ...

csswordpressmenu

What is the best approach to retain a user's selection for dark mode?

I have created a small website to showcase my work, but I'm struggling to figure out how to make the website remember a user's choice of dark mode. After searching on Stack Overflow, I came across suggestions like using cookies or localStorage. ...

javascripthtmlcss

What are some ways to style a DropDownList?

I'm looking to style the dropdownlist to display two field columns similar to the image shown. Is it possible to achieve this using HTML5 datalist or jquery? ...

jquerycsshtmlhtml-datalist

Achieving vertical and horizontal centering of content using tailwind.css in React with Next.js

Struggling to align an svg component at the center of a parent div element both vertically and horizontally using tailwind.css in a React project. Seeking feedback on my code below to identify any mistakes. The current issue, as shown in the included png ...

cssreactjssvgnext.jstailwind-css

I am experiencing issues with the HTML Shortcuts in my VS Code, as they are

Lately, I have been learning HTML through YouTube tutorials and utilizing visual studio code as my text editor. However, I've encountered an issue with certain shortcuts not working for me. For instance, when trying to input the exclamation mark follo ...

htmlcssvisual-studio-code

The issue with applying external CSS to React-filepond seems to be related to a potential problem with webpack configuration

I'm facing a dilemma here. I have integrated the react-filepond module into my react app, but unfortunately, the external CSS is not being applied. The module functions properly but lacks style. My suspicion is that it might be related to a loader iss ...

cssreactjswebpack

What is the best way to display a div in Chrome without allowing any user interactions?

I currently have a <div> placed on top of my webpage that follows the mouse cursor. Occasionally, users are able to move the mouse quickly enough to enter the tracking <div>. Additionally, this <div> sometimes prevents users from clicking ...

javascriptjqueryhtmlcss

switching between div and fixed positioning for lightbox functionality

I am working on an HTML file <html> <body> <div #main> <a click to open lightbox> <img> <more images> </a> </div> </body> </html> After the lightbox opens, the code looks like this: <html&g ...

jquerycss

What is preventing my HTML/CSS code from generating a button on the webpage?

There seems to be an issue with the image on my webpage - it's displaying a broken page icon instead of the actual image, even though it was showing fine before. The image name and location have not been changed. I'm also having trouble creating ...

htmlcssimage

Replacing a predefined label in Volusion (for language translations)

I am currently working on a project using the Volusion platform, which unfortunately does not provide full interface editing capabilities. As a result, I am attempting to edit certain hardcoded labels in the HTML to display them in Spanish. After trying v ...

htmlcssvolusion

Are the stylesheets on my computer also applicable to Chrome?

For instance, an anchor tag by default has specific styles such as being blue, turning purple when visited, and changing the cursor when hovered over. So, where exactly does Chrome pull these styles from? Could there be a Google Chrome style-sheet stored ...

cssgoogle-chromebrowserstylesheet

CSS techniques for positioning a header image

I'm having an issue with using a banner I created in CS6 Illustrator as a header on my website. Despite setting it as the background, positioned at the top and set to "no-repeat", it keeps appearing at the bottom of the header area with around 300px o ...

htmlcssadobe-illustrator

Troubleshooting Vue 3 Options API custom element with non-functional Bootstrap js files

Having trouble incorporating Bootstrap 5 into a Vue 3 Options Api custom element? Check out my setup below: import { defineCustomElement } from 'vue' import 'bootstrap/dist/js/bootstrap.bundle' import App from './App.ce.vue' ...

cssvue.jsvuejs3bootstrap-5custom-element

Interactive Click Actions on Rotated Divs

Does anyone know why, when clicking on the back side of a div that has been rotated with rotateY, the clicks pass through to the next div inside the body tag instead of registering on the intended div? And is there a way to fix this issue? You can view th ...

jqueryhtmlcssgoogle-chromeevents

Button alignment issue in react

Having a bit of trouble with my code image here I'm trying to make the button display justified https://i.sstatic.net/uJYyA.png I managed to justify the button as shown in this image, but it's not working in my React code https://i.sstatic.ne ...

htmlcssreactjs

What is the best way to align a search box within a Bootstrap navbar?

Seeking assistance to center the search box within my Bootstrap navbar without disrupting alignment. I am aiming for a similar look as seen on linkedin.com. Any suggestions on how to achieve this? Here is a JSFiddle link to my navbar: https://jsfiddle.ne ...

htmlcsstwitter-bootstrap

Utilize a single CSS class or theme to style multiple boxes within a stack - Material-UI

I'm currently diving into the world of React js and MUI components. I'm in the process of creating a stack with multiple boxes, each with its unique style that's consistent across all boxes in the stack. Is there a simpler way to define one ...

cssreactjsmaterial-ui

Tips for adjusting the font size according to the varying number of characters entered

I am currently facing a challenge with adjusting the font size based on the dynamic number of characters. For example, I have a set of characters with a font-size of 40px, and as more characters are added, the font size should decrease to fit within the av ...

javascriptjqueryhtmlcssfonts