Creating a responsive design using Bootstrap4

Today, I made the switch to bootstrap4 and enabled flexbox in _variables.scss. However, I'm still confused about the flexbox capabilities of bootstrap4. Some questions I have include:

  1. How can I utilize flex-direction:column?
  2. Is it possible to create a column with fluid width using flex-grow?

I am trying to create a full-height sidebar layout with the following markup:

<div class="flex-col">

 <div class="flex-row" id="topnav">
  <div class="flex"> <!-- this will grow -->
    Brand
  </div>

  <div> left navbar</div>
 </div>

 <div class=" flex flex-row"> <!--flex expand to fill full height -->
  <div class="sidebar">Sidebar</div>
  <div class="flex">Content</div> <!--take rest of row space-->
 </div>
</div>

Can someone please guide me on how to achieve this layout using bootstrap flexbox?

csstwitter-bootstrapflexboxtwitter-bootstrap-4bootstrap-4

Answer №1

Make sure to check out the documentation here:

To utilize flexbox in Bootstrap, all you need to do is enable it, and then use row and col-* classes that leverage flexbox. Unlike BS3, which uses flex-wrap and flex-direction:row, the new auto-layout columns make use of flex-grow to occupy the remaining space in a row.

<div class="row">
       <div class="col-xs-4">
            4
       </div>
       <div class="col-xs-3">
            3
       </div>
       <div class="col-xs">
           grow
       </div>
</div>

Take a look at this demo:

Update

With Bootstrap 4 alpha 6, flexbox is now the default style so there's no need to enable it. Additionally, there are new flexbox utilities available for different properties like flex-column, justify-content-, align-items-, and more. The auto-layout columns can still be used to dynamically adjust width or height.

<div class="container-fluid">
    <div class="row">
        <div class="col-3 sidebar">Sidebar</div>
        <div class="col">Content</div>
    </div>
</div>

Check out this example of a fluid layout in Bootstrap 4 A6: Bootstrap 4 A6 example fluid layout

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

Creating a minigame using JQuery (Javascript)

I am currently developing a collection of mini-games for my big project. The approach I've taken in creating this mini-game is similar to one I used previously. However, unlike my previous version which only had one PuzzleContainer, this new iteration ...

javascriptjqueryhtmlcss

Switch up the background image of the <li> element when the <a> tag is clicked

html: <ul> <li id="Co" class="libgc" ><b>CO</b></li> <li id="NSCO" class="libgc active"><span> <a href="#NSale.php" target="homeFrame" class="aclass">NSale</a></span></li> </ul ...

jqueryhtmlcssanchorbackground-image

What is the process for applying this specific style to a certain element?

Here is an example of an element in an Angular2 app: <div class="ticket-card" [ngStyle]="{'background': 'url(' + ticketPath + ')' , 'background-size': 'cover'}"> I would like to enhance the style b ...

cssangulartypescript

Incorporate an onclick event to the elements within the array

I'm currently working on iterating over an array and adding an onclick event to each element. My goal is to be able to click on each div and have them log their values in the console. However, I am facing a challenge in applying the onclick event to e ...

javascripthtmlcss

Upon loading, the Carousel is visible instead of being hidden, which is contrary to its intended behavior

Any help would be greatly appreciated as I am struggling with creating a web page featuring tabs for "London, New York, Shanghai". The initial page displayed is the "welcome" page with the other tabs hidden on load. I successfully implemented a carousel f ...

javascripthtmlcsstailwind-cssdisplay

Tips for creating responsive images when using two images stacked on top of each other:

One of my challenges with using Bootstrap is trying to place an image on top of another image. Here's the HTML code I currently have: <section id="test"> <div class="row"> <div class="imgbg"><img src="img/bg_pres.png ...

cssbootstrap-4

td having no line breaks causing text to extend beyond the cell

I have a challenge with using the nowrap property on td elements to ensure proper formatting of my tables. In the first table, everything wraps nicely, but in the second table, the content in the first "td" exceeds its designated space due to length. How c ...

htmlcsshtml-tableword-wrap

Leverage the power of jQuery and Popper.js within your Gridsome project

I am looking to integrate a Bootstrap Material Design Library into my Gridsome project. I have tried using the library from , and while default Bootstrap 4 works perfectly, jQuery and Popper.js seem to encounter issues (jQuery/Popper.js not defined). Here ...

jquerynpmbootstrap-4gridsome

Styling Angular2 Material Dialog: the perfect fit

The Angular2 material team recently unveiled the MDDialog module at https://github.com/angular/material2/blob/master/src/lib/dialog/README.md I am interested in customizing the appearance of Angular2 material's dialog. Specifically, I want to adjust ...

cssangularangular-materialangular-material2

Ways to make a div adjust to the width of its content

Hello, this is my first time posting a question here. I have found many helpful Java answers in this community before, so I thought I'd give it a try. I did some research beforehand, but please let me know if I have duplicated a question or done anyth ...

css

Automatically scroll to the end of the data retrieved through ajax

I am currently developing a live chat website for my users and I am using ajax to fetch the chat messages. However, I am facing an issue where whenever I enter a new message, it does get added to the database and displayed, but the scroll doesn't auto ...

javascriptjquerycssajax

How can I set the width of a container dynamically using the Next JS Image component?

I have a situation where I am trying to set the height of an image within a container div to be equal to 100% of the container's height, while allowing the width of the container to adjust based on the image's aspect ratio. When using a standard ...

cssimagenext.jsimage-resizingnext-images

Creating movement in three distinct divisions

I am seeking a way to have three divs flying in upon click. The first DIV is positioned at the top, followed by one on the left and one on the right (both being below the top one). I wish for them to fly in from their respective directions - the top div fr ...

javascriptjqueryhtmlcss

When the page loads in the React platform, a section of the footer unexpectedly overlaps with another component

After working on this section some time ago, I returned to find a strange behavior that I couldn't fix by changing the CSS or wrapping components in divs. If you want to see the issue, check out this screenshot: issueReact To view the code where the ...

cssreactjs

What is the method for triggering two actions within a single linked tag?

I have a link tag structured like this: <a href="<?php echo base_url().'dashboard' ?>" class="check_session">Home</a> Upon clicking the "Home" link, it should navigate to the dashboard. At the dashboard page, I want to check i ...

javascriptjqueryhtmlcsscodeigniter

Animation using jQuery is functional on most browsers, however, it seems to

After creating an animation to simulate an opening door using jQuery, I discovered that it works perfectly on Firefox 24, Chrome 28, and IE 8. However, Safari presents a problem - the door opens but then the "closed" door reappears at the end of the animat ...

javascriptjqueryhtmlcsssafari

The issue of Jquery .click event handler failing to work for class selector specifically in CHROME

Is there a way to achieve the same opacity effect on click as on mouseover? I've tried various selectors without success. Any help on this issue would be greatly appreciated. Thank you in advance! .container { position: absolute; background:url(&a ...

jqueryhtmlcsseventhandler

Multiple instances of CSS linear gradients being shown

I recently added a linear-gradient effect to the CSS of my HTML website. However, I encountered an issue where the gradient was repeating multiple times on the page. Just to provide some context, my website is hosted on nginx, and for server-side renderin ...

htmlcss

Position the Bootstrap button at the bottom left with absolute placement

Currently, I am utilizing Django as my web framework and Bootstrap to enhance the rendering of the frontend. My goal is to implement an "add" button on my page that will always be in the bottom left corner regardless of scrolling, overlaying any other cont ...

htmlcsstwitter-bootstrapbootstrap-4css-position

distinguish different designs for individual components in Angular 5

My project is divided into two main parts: one for public web pages and the other for an admin control panel. Each part has its own set of CSS and javascript files for custom templates. If I include all CSS and js files in index.html, they all load at the ...

cssangularmodulebootstrap-4