Leverage flex columns in Bootstrap 4.0 for advanced layout options

Hey, I need some assistance to set up columns in my code. Here's the current code snippet:

<div class="container-fluid h-100">
    <div class="row h-100">
        <div class="flex-column h-100">side menu</div>
        <div class="???">
            <div>1 piece</div>
            <div>2 pieces piece</div>
            <div>1 piece</div>
        <div/>
    <div/>
<div/>

This is how it currently looks, and I've marked where I want to split the rest of the space. The blue column with the menu should have a fixed width, which it does. However, I want the columns in a ratio of 1:2:1 to be adjustable.

https://i.sstatic.net/o9ydY.png

csstwitter-bootstrapflexboxbootstrap-4twitter-bootstrap-4

Answer №1

Instead of using row, you can opt for d-flex to avoid content wrapping below the sidebar.

If you need to maintain the HTML structure, consider this code snippet:

<div class="d-flex w-100">
  <div class="col-3">1 piece</div>
  <div class="col-6">2 pieces piece</div>
  <div class="col-3">1 piece</div>
</div>

For a visual demonstration, check out the demo below with added borders for clarity:

html,body {
  height: 100%;
}
div {
  border: 1px solid;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid h-100">
  <div class="d-flex h-100">
    <div class="flex-column h-100">side menu</div>
    <div class="d-flex w-100">
      <div class="col-3">1 piece</div>
      <div class="col-6">2 pieces piece</div>
      <div class="col-3">1 piece</div>
    </div>
  </div>
</div>

Answer №2

Here is a solution that utilizes the col classes:

body {
  height:100vh;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid h-100">
  <div class="row h-100">
    <div class="flex-column h-100">side</div>
    <div class="col">1 piece</div>
    <div class="col-6">2 pieces piece</div>
    <div class="col">1 piece</div>
  </div>
</div>

Alternatively, you can try this solution with the w-* classes and utilizing bootstrap flexbox:

body {
  height:100vh;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid h-100">
  <div class="row h-100 d-flex flex-nowrap align-items-stretch">
    <div class="flex-column h-100">side</div>
    <div class="w-25">1 piece</div>
    <div class="w-50">2 pieces piece</div>
    <div class="w-25">1 piece</div>
  </div>
</div>

Answer №3

Implementing Bootstrap v4 Flexbox:

<div class="d-flex flex-row h-100">
    <div class="d-flex justify-content-start">sidebar</div>
    <div class="d-flex flex-row w-100">
        <div class="w-25">One item</div>
        <div class="w-50">Two items in total</div>
        <div class="w-25">One item</div>
    </div>
</div>

Answer №4

It appears that achieving this layout doesn't necessarily require the flex-column.

The proportion of columns is determined by the flex-grow-1 class based on the space available/needed.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div style="height: 175px;">

  <div class="d-flex flex-grow-1 border border-primary m-1 h-100">

    <div class="d-flex flex-grow-1 border border-secondary m-1">

      <div class="border border-success m-1">
        <!-- It seems to function properly even without using flex-column :D -->
        <div class="border border-warning m-1">1 piece</div>
        <div class="border border-info m-1">1 piece</div>
        <div class="border border-dark m-1">1 piece</div>
      
      </div>
      <!-- When using flex-wrap, items will stack if there isn't enough space -->
      <div class="d-flex flex-wrap flex-grow-1 border border-danger m-1">
      
        <div class="flex-grow-1 border border-warning m-1">1 piece</div>
        <div class="flex-grow-1 border border-info m-1">2 pieces piece</div>
        <div class="flex-grow-1 border border-dark m-1">1 piece</div>
        
      <div/>

    <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

Developing intricate views using stored procedures in asp.net mvc

Working on an ASP.NET MVC 4 template, I am seeking advice on how to design a complex view layout. I have set up a model that retrieves data from a stored procedure in a SQL Server database. The view is receiving this data through an IEnumerable<> ob ...

c#asp.netsql-serverasp.net-mvcbootstrap-4

showcasing the picture in the email is consistently

I have created an email system that sends a message to users when they are active in the database, but I am experiencing an issue with the image not displaying. It is important for the image to appear automatically, just like Facebook's logo always sh ...

phphtmlcss

The content in the flex box item with horizontal scroll is overflowing beyond its boundaries

I am working with a flex box container that contains two child elements: a left side and a right side. I want the right side item to have a horizontal scrollbar in order to fit its content. .container { display: flex; overflow: hidden; height: 300 ...

htmlcssflexbox

Exploring the functions of Safari input types: search, reset, and normalize

Is there a proper way to reset the appearance of a search input so that it resembles a text field in Safari? screenshot I'm experiencing an issue with Safari where there is unwanted padding on the left side of the search input that I can't seem ...

css

What steps can be taken to address issues with the counting system in a lootbox opening

I am currently developing a virtual loot box simulator and have encountered a challenging issue. My goal is to track the quantity of Normals, Legendaries, Epics, and Rares obtained by the user. However, I am facing a problem where instead of updating the c ...

javascripthtmlcss

Converting HTML to PDF: Transform your web content into

I have a couple of tasks that need to be completed: Firstly, I need to create a functionality where clicking a button will convert an HTML5 page into a .PDF file. Secondly, I am looking to generate another page with a table (Grid) containing data. The gr ...

javascriptcsshtmlpdf

Storing a screen value with javascript made simple

I need to incorporate memory functions into my calculator, specifically MS (Memory Store), MR (Memory Restore), and MC (Memory Clear). For Memory Store, the screen value of the calculation needs to be saved, so if it's 90 + 7 = 97, that result should ...

javascripthtmlcssevents

Material-ui v5's DataGrid now includes a new filter icon feature

The current default setting for the new DataGrid is to only display a filter icon when hovering over the column header with an applied filter. In contrast, the previous version had the icon visible at all times. For reference, you can view the Codesandbox ...

cssreactjsmaterial-uiemotioncss-in-js

Issue with Sass @use failing to load partial

I'm currently facing an issue while trying to import a sass partial called _variables.scss into my main stylesheet named global.scss. Every time I compile the sass code, I encounter the following error message: Error: Undefined variable. Here is the ...

csssass

Transition the color of the button smoothly from btn-primary to btn-success

Can you make the btn-primary color button gradually change to the color of btn-success when a specific ID is clicked? I attempted to animate it with the clicked ID using this code: $(".add_to_cart").parent('.change-style-after-click[data-id="'+i ...

htmljquerybootstrap-4fadein

Ensure that the body background image remains stretched and perfectly centered regardless of the screen resolution

I am having an issue with vertical centering on a website I created. Everything looks fine on my monitor, but at higher resolutions, the tables don't align in the center and the image shrinks. How can I ensure that everything stays aligned properly? ...

htmlcss

Is it possible to set a single Tailwind breakpoint that will automatically apply to all CSS styles below it?

Responsive design in Tailwind is achieved by using the following code snippet: <div className="sm: flex sm: flex-row sm: items-center"></div> It can be cumbersome to constantly include the sm: breakpoint for each CSS rule. I want ...

htmlcssreactjstailwind-css

Customizing Your WooCommerce Storefront: Tips for Enhancing Your Product Catalog and Minimizing White Space

Lately, I've been working on enabling a product filter in the left sidebar of my Woocommerce theme. However, I have noticed that the layout is not quite how I would like it to be. Take a look at this image that shows the changes I am aiming for. Cur ...

csswordpresswoocommercestorefronthook-wordpress

The wonders of jQuery popup windows

A code was discovered that displays a popup, but it currently relies on transparency (opacity: 0). I would like to modify it to use display: none instead, as the transparent window in the center of my website is causing issues. Here is the JavaScript code ...

javascriptphpjquerycss

Creating 3 dynamic columns - a step-by-step guide

Is there a way to make these columns 3 columns wide on a desktop screen and 1 column wide on a mobile screen? They are not behaving as expected, and I'm not sure why. What can I do to achieve this? <section class="pricing-section py-5" data-aos= ...

htmlbootstrap-4

What could be the reason why this LESS CSS is not taking effect?

Why won't this stylesheet load properly? The desired background color is supposed to be similar to cadetblue. You can view my page with the linked home.less.css at: ...

javascripthtmlcssless

Is this an effective and appropriate method for establishing media queries?

<link id ="style" rel="stylesheet" type="text/css" title="other" href="regularStyles.css" /> <link rel="stylesheet" media= "all and (mid-width: 767px) and (max-width:2049px) and (min-height:767px) and (max-height: 1538px)" href="notePads.css" /& ...

htmlcssmedia-queriesstylesheet

Tips for making nested sliding divs within a parent sliding div

Is it possible to slide a float type div inside another div like this example, but with a white box containing "apple" text sliding inside the black div it's in? I have attempted to recreate the effect using this example. Here is my current JavaScript ...

javascriptjquerycssdhtml

What is the best way to ensure that a div containing lengthy text wraps to the next line as if it were only text overflow?

Is there a way to make a div or span within another div act as text, causing overflow to shift to the next line? I'm unsure of which CSS properties would achieve this effect. I've attempted using overflow-wrap: break-word; word-break: break-al ...

javascripthtmlcsstypescript

Maintaining Flexbox layout without triggering item re-rendering for a new container

This is the unique layout I'm aiming to create: I am facing a challenging flexbox layout that needs to be implemented. One of the items in this layout is a Webgl player, which cannot be conditionally rendered due to the restarting issue it may cause. ...

javascriptcssreactjsflexbox