Floating Columns in Bootstrap 4

Seeking a solution in Bootstrap 4 for achieving the placement of 3 columns in one row, where the content in the first column dictates that the other two columns should be displayed alongside it. Bootstrap 4 utilizes Flex to manage rows and columns. Please refrain from suggesting solutions involving splitting Col1 into one container and Col2 and Col3 into another. I require flexibility to adjust positions based on column width as I work with various view modes. For example, if Col3 = col-12, it should appear below Col1 and Col2.

(Just an FYI, this feature worked smoothly in Bootstrap 3 due to floating elements and % column width).

https://i.sstatic.net/MBTPr.jpg

cssflexboxbootstrap-4

Answer №1

If you want to customize Bootstrap 4 and make it work in a more familiar way, you can use simple CSS tricks. One method is using floats to achieve the desired layout without separating columns into different containers. Here's an example: http://jsfiddle.net/nyx6e4bf/1/

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-3">
      <p>
        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
      </p>
    </div>
    <div class="col-9">
      <p>
        Lorem Ipsum
      </p>
    </div>
    <div class="col-9">
      <p>
        Lorem Ipsum
      </p>
    </div>
  </div>
</div>

.container .row {
  display: block;
}

.row>div:nth-of-type(1) {
  background-color: red;
  float: left;
}

.row>div:nth-of-type(2) {
  background-color: blue;
  float: right;
}

.row>div:nth-of-type(3) {
  background-color: green;
  float: right;
}

To ensure your custom CSS only affects specific elements, make your selectors more specific than mine. Utilizing flex-box or grid layouts could also be worth exploring for alternative solutions to your design needs.

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

Reduce image_tag into a single

Is there a way to combine all image_tag picture tags into one for compression? I'm currently using Nivo slider in the header and would like to avoid writing out each image tag in the layout page. Can you suggest any solutions? Thanks in advance. ...

htmlcssruby-on-railsrubynivo-slider

The Drop-down menu with carousel in Bootstrap is experiencing difficulties displaying its sub-menu items

I am currently facing an issue where the sub-menu items are hidden behind the content in a bootstrap carousel. Despite everything else working fine, this particular problem is causing a headache. JSFiddle: https://jsfiddle.net/Saneesh/pwmyvsw6/65/ Is th ...

jqueryhtmlcsstwitter-bootstrapcarousel

Tips for aligning child DIVS with UL elements in the center

I am currently working on the footer design, but I am facing an issue with aligning the 4 divs containing links in the center. While Dreamweaver shows them centralized, they appear decentralized when uploaded or tested on JSFIDDLE. My ideal layout would l ...

csshtmlfooter

What is the process for adding extra CSS to a webpage displayed in WebView2?

Currently, I am utilizing the Webview2 control within a winform application. My goal is to enhance the behavior of the loaded page by injecting additional CSS code when a specific URL is being displayed in the browser control. Specifically, I aim to implem ...

javascriptc#csswinformswebview2

Animating changes in Bootstrap column widths and positions within a row

Currently, I am in the process of developing a web application with React and Bootstrap on the frontend. Within the application, there are multiple Bootstrap columns that have the ability to expand. You can see this functionality demonstrated in the CodeSa ...

reactjstwitter-bootstrapbootstrap-4

Remove the container once all of its children have been dismissed

Is it possible to automatically remove the parent container when all of its children elements have been removed? Each child element has a dismissal option that, when clicked, removes the element. I am using backbone.js for this project and would like a so ...

javascriptjqueryhtmlcssbackbone.js

Vue.js component still not transitioning out despite using mode="out-in"

As I navigate my way through learning about vue.js, one issue that has been puzzling me is how to make routed pages fade in and out when a user switches to a new page. Despite thinking it would be a simple task with vue, I have been struggling quite a bit ...

cssvue.jsvuejs3vue-routervue-transitions

What is the best way to place a row with a width of 25% at the conclusion of the row?

I utilized https://i.sstatic.net/aQ6Ew.png by implementing this code. <div class="row mw-md-100 d-flex w-25 justify-content-end mb-2" > <div class="col-md-12"> <nb-select fullWidth class="mw-md-100 ...

htmlcssbootstrap-4

The integration of Flask, PyCharm, and CSS files into HTML is seamless and long

Currently, I am utilizing PyCharm with Flask. In my project, I have both an HTML file and a CSS file. Initially, everything was working perfectly fine after writing the code and launching it. However, whenever I make changes to the CSS file, the modificat ...

htmlcssflaskpycharm

Designing responsive websites involves ensuring that all text remains within the designated div tags

I'm currently developing a website and aiming to ensure it is responsive. However, I am facing an issue where the text does not dynamically adjust according to the content size. Any suggestions or assistance would be greatly appreciated. Thank you! ...

htmlcssresponsive-design

Adjusting the "lang" attribute to modify the font style

By using the HTML lang attribute and setting it to "en", I noticed that some of the div fonts and colors were changing to the default ones in Bootstrap. Although I am utilizing the Bliss2 Regular font, the default font style seems to be taking precedence. ...

htmlcssfontsbootstrap-4

Arranging a list using Flexbox with equal spacing between elements in each row containing three items

I'm struggling with aligning a flexbox list. I have a row of 3 elements, but when there are only 2 elements on the row, there's a gap in the middle. My goal is to have a row with 2 elements look like x x o. However, my current code displays the ...

htmlcsslistflexboxalignment

There seems to be a strange behavior in my CSS where it is combining two divs into a single slightly larger box

Can anyone help me figure out what's wrong with the code I wrote? Below is the snippet provided. html { background-image: url(back.png) } #main { text-align: center; } #visible { display: inline-block; background-color: #000c21; width: ...

htmlcss

Having trouble retrieving data from the database using php and ajax

I am currently working with bootstrap, php, and ajax. I'm facing some issues that I can't seem to resolve. Additionally, I've noticed that the mysqli_connect function is not highlighting in blue when I type it in Notepad++. Is this normal? ...

phpcssmysqlsqlajax

The animated image fails to load upon page refresh, but functions properly when the window is initially opened

Okay, I'm encountering an issue with a gif on my website. It works perfectly the first time I load the page, but if I reload or navigate away and then come back to that section, it shows the final image as if the animation has already happened. The gi ...

cssangularjshtmlgif

What is the process for creating a polygon button similar to this one?

I designed a button with a chevron shape similar to the one shown in this Image (Button) link. I have written the code as seen below, but I am facing difficulty creating the blue component on the left side and applying border-radius and box-shadow properti ...

htmlcssbutton

What is the best way to create a floating navigation bar that appears when I tap on an icon?

As a beginner in the realm of React, I recently explored a tutorial on creating a navigation bar. Following the guidance, I successfully implemented a sidebar-style navbar that appears when the menu icon is clicked for smaller screen sizes. To hide it, I u ...

javascripthtmlcssreactjs

The header, main content, and footer sections expand to occupy the entire page

I am in need of HTML structure that looks like the following: <header></header> <div id='main'></div> <footer></footer> I want all elements to be positioned relatively. The header and footer will have fixed h ...

jquerycsshtmlpositioning

How does GitHub create their unique "character portraits" for optimized web performance?

Have you ever noticed that the small images on Github are actually characters instead of traditional image files? Let's take the small person image that is used when assigning someone to an issue as an example. When you hover over the small person ima ...

cssimageperformancewebcharacter

Aligning images vertically within floated elements

I'm struggling to vertically align some images to the bottom within floated elements, and I just can't seem to make it work. Check out this JSFiddle example. You'll notice that the images are currently aligned to the top. http://jsfiddle.n ...

htmlcss