CODEWITHSUNDEEP
responsive-designbootstrap-4
Mark
Mark

Reputation: 4950

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.

Upvotes: 12

Views: 32282

Answers (2)

Srujan Gowda
Srujan Gowda

Reputation: 1

Add flex-wrap after d-flex. It will make your screen responsive.

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

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362360

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

Upvotes: 38

Related Questions