CODEWITHSUNDEEP
htmltwitter-bootstrap
RA19
RA19

Reputation: 809

Bootstrap columns adjust number of columns

I have the below code which currently lists items into 6 columns. I only have 5 items so want to space them evenly accordingly. Trying to get the below list items into 5 columns rather than 6 (bootstrap). How do i adjust the code accordingly? I understand col-md-12 and col-md-2 12/2 = 6... How do i adjust the code to make it 5 columns going into 12?

<div class="row">
                       <div class="col-md-12">

                          <div class="mu-counter-area">
                             <ul class="mu-counter-nav">
                                <li class="col-md-2 col-sm-3 col-xs-12">
                                   <div class="mu-single-counter" data-toggle="collapse" data-target="#collapseFood" aria-expanded="false"  aria-controls="collapseFood">
                                      <span>À LA CARTE</span>

                                   </div>
                                </li>
                                <li class="col-md-2 col-sm-3 col-xs-12">
                                   <div class="mu-single-counter" data-toggle="collapse" data-target="#collapseVegan" aria-expanded="false"  aria-controls="collapseVegan">
                                      <span>VEGAN</span>

                                   </div>
                                </li>
                                <li class="col-md-2 col-sm-3 col-xs-12">
                                   <div class="mu-single-counter" data-toggle="collapse" data-target="#collapseJain" aria-expanded="false"  aria-controls="collapseJain">
                                      <span>JAIN</span>
                                   </div>
                                </li>


                                <li class="col-md-2 col-sm-3 col-xs-12">
                                   <div class="mu-single-counter" data-toggle="collapse" data-target="#collapseBar" aria-expanded="false" aria-controls="collapseBar">
                                      <span>BAR</span>

                                   </div>
                                </li>
                                <li class="col-md-2 col-sm-3 col-xs-12">
                                   <div class="mu-single-counter" data-toggle="collapse" data-target="#collapseCocktail" aria-expanded="false" aria-controls="collapseCocktail">
                                      <span>COCKTAILS</span>

                                   </div>
                                </li>

                             </ul>
                          </div>
                       </div>
                    </div>

Here is a JSFIDDLE:

https://jsfiddle.net/hwbmaL6n/

You will see there are 5 items, but a big space at the end for the 6th one although a 6th item does not exist. How do i reduce this to only be 5 items so the items are centered on the page?

Upvotes: 0

Views: 55

Answers (1)

dns_nx
dns_nx

Reputation: 3943

As I can see in your fiddle, you are using version 3 of bootstrap, so you can use the offset feature.

https://getbootstrap.com/docs/3.3/css/#grid-offsetting

Also you have an error, because you specified sm-3 5 times. This is 15 cols in sum. You only have 12. If you specify more than 12, it breaks into a new line. See this code. I think, this is what you want to achieve.

<div class="row">
    <div class="col-md-12">

        <div class="mu-counter-area">
            <ul class="mu-counter-nav">
                <li class="col-sm-offset-1 col-md-offset-1 col-md-2 col-sm-2 col-xs-12">
                    <div class="mu-single-counter" data-toggle="collapse" data-target="#collapseFood" aria-expanded="false"  aria-controls="collapseFood">
                        <span>À LA CARTE</span>

                    </div>
                </li>
                <li class="col-sm-2 col-sm-2 col-xs-12">
                    <div class="mu-single-counter" data-toggle="collapse" data-target="#collapseVegan" aria-expanded="false"  aria-controls="collapseVegan">
                        <span>VEGAN</span>

                    </div>
                </li>
                <li class="col-md-2 col-sm-2 col-xs-12">
                    <div class="mu-single-counter" data-toggle="collapse" data-target="#collapseJain" aria-expanded="false"  aria-controls="collapseJain">
                        <span>JAIN</span>
                    </div>
                </li>


                <li class="col-md-2 col-sm-2 col-xs-12">
                    <div class="mu-single-counter" data-toggle="collapse" data-target="#collapseBar" aria-expanded="false" aria-controls="collapseBar">
                        <span>BAR</span>

                    </div>
                </li>
                <li class="col-md-2 col-sm-2 col-xs-12">
                    <div class="mu-single-counter" data-toggle="collapse" data-target="#collapseCocktail" aria-expanded="false" aria-controls="collapseCocktail">
                        <span>COCKTAILS</span>

                    </div>
                </li>

            </ul>
        </div>
    </div>
</div>

Upvotes: 1

Related Questions