Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap 4 - using Flexbox with responsive columns

I am trying to make a row with buttons positioned at the beginning of the row and at the end. Here are two images. First when the Browser is maximized: enter image description here

The second is after I resized the Browser:

enter image description here

For that I am implementing the following code:

<div class="d-flex justify-content-end">
   <div class="mr-auto p-2">Flex item 1</div>
   <div class="p-2">Flex item 2</div>
</div>

Fiddle

Just to learn how to use Flexbox with B4. The code does position items correctly, but when I resize it the columns dont stack up.

Any idea how to make it fully responsive?

Thanks for the help.

like image 261
Mark Avatar asked Apr 21 '17 16:04

Mark


People also ask

Does Bootstrap 4 Use flexbox?

Bootstrap 4 is built with flexbox, but not every element's display has been changed to display: flex as this would add many unnecessary overrides and unexpectedly change key browser behaviors. Most of our components are built with flexbox enabled.

Is Bootstrap flex responsive?

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.

Does Bootstrap 4 support sass and flexbox?

From the get-go, Bootstrap is SASS only. This may sound like bad news, but the CSS community has rallied around SASS over LESS for the last few years. By creating a single SASS-based codebase, this means developers can focus on only one branch of the framework.

Can you use flexbox and Bootstrap together?

Of course, you can use both in a project. A lot of people is doing that. In fact for making equal height columns you can use flexbox in bootstrap. Check the code pen link below for better understanding.


1 Answers

The flex-row and flex-column classes can also be used responsively. You could use flex-sm-row to keep the row horizontal on sm and up, then flex-column to stack vertically on xs screen widths...

<div class="d-flex flex-sm-row flex-column">
  <div class="mr-auto p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
</div>

http://www.codeply.com/go/G3Z6OLCBtF

like image 130
Zim Avatar answered Oct 04 '22 18:10

Zim