CODEWITHSUNDEEP
bootstrap-4
RA19
RA19

Reputation: 819

Bootstrap items fit in one row 6 columns - how to adjust code

I have the following bootstrap snippet. I am learning how the columns/grid works in bootstrap. How do I get these menu names to all to fit into one row. Currently Cocktails and bar menu go to the next row as it has exceeded 4 items when I want them all to fit next to each other?

What is the difference between the following:

Currently it puts 4 items in the same line and then puts the next item in the next line. I want to ensure they are all parallel to each other and side by side. Not multiple rows. This needs to be the same when the window size is adjusted i.e. if shown on a mobile.

There should be a total of 6 columns and 1 row.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <section id="mu-counter">
    <div class="mu-counter-overlay">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="mu-counter-area">

              <ul class="mu-counter-nav">

                <li class="col-md-3 col-sm-5 col-xs-12">
                  <div class="mu-single-counter">
                    <span>À La Carte Menu</span>
                
                  </div>
                </li>

                <li class="col-md-3 col-sm-5 col-xs-12">
                  <div class="mu-single-counter">
                    <span>Vegan Menu</span>
            
             
                  </div>
                </li>

                 <li class="col-md-3 col-sm-5 col-xs-12">
                  <div class="mu-single-counter">
                    <span>Kids Menu</span>
         
                  </div>
                </li>

                 <li class="col-md-3 col-sm-5 col-xs-12">
                  <div class="mu-single-counter">
                    <span>Lunch Menu</span>
              
                  </div>
                </li>

          
                 <li class="col-md-3 col-sm-5 col-xs-12">
                  <div class="mu-single-counter">
                    <span>Cocktails</span>
              
                  </div>
                </li>

          
                 <li class="col-md-3 col-sm-5 col-xs-12">
                  <div class="mu-single-counter">
                    <span>Bar Menu</span>
              
                  </div>
                </li>
              </ul>

            </div>
          </div>
        </div>
      </div>
 </div>
  </section>
</div>

</body>
</html>

View this snippet on a full screen to see the issue

Upvotes: 1

Views: 2945

Answers (1)

Khojiakbar
Khojiakbar

Reputation: 579

In order to put 6 items in one row on a normal screen you should use col-md-2 class.

In bootstrap max width is 12, then you should divide it by six to get 6 column in one row.

md means medium screen, xs means extra small screen and so on.

You can read more in documentation.

Upvotes: 1

Related Questions