Menu
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:
The second is after I resized the Browser:
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.
261
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.
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.
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.
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.
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
130
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
