How to make flex row responsive Bootstrap 4

user_8328193 0
Viewed 12833

Currently the page looks like this:

enter image description here

Now on resize to mobile screen flex boxes overflow the container:

enter image description here
Html: 

       <div id="bars" class="d-flex flex-row text-white  text-center">
            <div class="port-item p-4 bg-primary" data-toggle="collapse" data-target="#home">
                <i class="fa fa-home d-block"></i> Home
            </div>
            <div class="port-item p-4 bg-success" data-toggle="collapse" data-target="#resume">
                 <i class="fa fa-graduation-cap d-block"></i> Resume
            </div>
            <div class="port-item p-4 bg-warning" data-toggle="collapse" data-target="#work">
                 <i class="fa fa-folder-open d-block"></i> Work
            </div>
            <div class="port-item p-4 bg-danger" data-toggle="collapse" data-target="#contact">
            <i class="fa fa-envelope d-block"></i> Contact
            </div>
            </div>

CSS, I tried with media but nothig has changed

.port-item {
width: 30%;
}

@media(min-width: 768px) {
  #bars {
    flex-direction: column;
  }
}

How can I make them fit to container or to make them to display on column

flexbox bootstrap-4 twitter-bootstrap css html
3 Answers

Not sure you need to use CSS to sort this as the Bootstrap classes should cover this.

Replace your flex class "d-flex flex-row" with "d-flex flex-column d-sm-flex flex-sm-row"

and your 4 items will auto stack on mobile and go side by side above that

user_7780390

i made that For you :) :)

<div class="container-fluid d-flex flex-xl-row justify-content-xl-between flex-column">

<div class="bloc_1 p-2" style="background-color: red"> picture </div>

<div class="bloc_2 p-2" style="background-color: antiquewhite">
 <div class="d-flex flex-column">
     <div class="p-4"> Headline</div>
     <div class="d-flex flex-row justify-content-between">
         <div> Flex 1</div>
         <div> Flex 2</div>
         <div> Flex 3</div>
         <div> Flex 4</div>
     </div>
 </div>
</div>

the initial state :

the initial state

after resize :

enter image description here

==> you can read the Doc of the Flex for more info ..

https://getbootstrap.com/docs/4.0/utilities/flex/

user_24843240
Related