CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Damion Silver
Damion Silver

Reputation: 611

How to make items stay in line even on smaller devices with bootstrap

I am having troubles. I am making a website with bootstrap. When I make an a row with bootstrap and add my columns, the different columns go to a new line under each other when the devices shrink in size..

my code is as follow 

 <div class="row">
        <div class="col-xs-4 col-sm-4 col-md-4"><center>Feed</center></div>
        <div class="col-xs-4 col-sm-4 col-md-4"><center>Tutor</center></div>
        <div class="col-xs-4 col-sm-4 col-md-4"><center>Profile</center></div>
</div>

im not sure what i am doing wrong. Everytime i shrink my browser, it stills shrink into a new line. Help please!

Upvotes: 2

Views: 1850

Answers (2)

prasid444
prasid444

Reputation: 355

Apply below css either through class name to parent row, or direct styling

.cls_name{
flex-wrap: nowrap;
}

here nowrap will forcefully show all child in a single row

Upvotes: 2

user6250770
user6250770

Reputation: 690

Looks like this will help you.

.single-row{
display: flex;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>



<div class="container-fluid">
  <div class="row single-row" >
    <div class="col-sm-2" style="background-color:lavender;">Feed</div>
    <div class="col-sm-2" style="background-color:lavenderblush;">tutor</div>
    <div class="col-sm-2" style="background-color:lavender;">profile</div>
  </div>
</div>

Upvotes: 0

Related Questions