Getting Bootstrap Col To Work

I have a group of links that i want to evenly space out that should also be mobile responsive. I cant seem to get them to corporate. code associated with it: As you can see in t

Solution 1:

Since you have 14 elements (assumed this is a fixed qty), you can't use Bootstrap grid systen, unless you make three rows with 4+4+3 elements, or 6+6+2. Otherwise, you can put lists inside rows, like this, and use Bootstrap class .list-inline for Bootstrap 3.x inline list:

<div class="row">
    <div class="col-sm-12 col-md-12 col-lg-12">
        <ul class="list-inline">
            <li>/* 7 <li> elements */</li>
        </ul>
    </div>
</div>
<div class="row">
    <div class="col-sm-12 col-md-12 col-lg-12">
        <ul class="list-inline">
            <li>/* 7 <li> elements */</li>
        </ul>
    </div>
</div>

Remember that .row adds padding to the div, so do your fixes.

If you want to use Grid system, you can use following code:

<div class="row">
    <div class="col-sm-2">
        <a href="#" ...><img ...><span ...> TEXT </span></a>
        <div class="modal fade" ... >MODAL</div>
    </div>
    <div class="col-sm-2">
        <a href="#" ...><img ...><span ...> TEXT </span></a>
        <div class="modal fade" ... >MODAL</div>
    </div>
    <div class="col-sm-2">
        <a href="#" ...><img ...><span ...> TEXT </span></a>
        <div class="modal fade" ... >MODAL</div>
    </div>
    <div class="col-sm-2">
        <a href="#" ...><img ...><span ...> TEXT </span></a>
        <div class="modal fade" ... >MODAL</div>
    </div>
    <div class="col-sm-2">
        <a href="#" ...><img ...><span ...> TEXT </span></a>
        <div class="modal fade" ... >MODAL</div>
    </div>
    <div class="col-sm-2">
        <a href="#" ...><img ...><span ...> TEXT </span></a>
        <div class="modal fade" ... >MODAL</div>
    </div>
</div>
<div class="row">
    <div class="col-sm-2">
        <a href="#" ...><img ...><span ...> TEXT </span></a>
        <div class="modal fade" ... >MODAL</div>
    </div>
    <div class="col-sm-2">
        <a href="#" ...><img ...><span ...> TEXT </span></a>
        <div class="modal fade" ... >MODAL</div>
    </div>
    <div class="col-sm-2">
        <a href="#" ...><img ...><span ...> TEXT </span></a>
        <div class="modal fade" ... >MODAL</div>
    </div>
    <div class="col-sm-2">
        <a href="#" ...><img ...><span ...> TEXT </span></a>
        <div class="modal fade" ... >MODAL</div>
    </div>
    <div class="col-sm-2">
        <a href="#" ...><img ...><span ...> TEXT </span></a>
        <div class="modal fade" ... >MODAL</div>
    </div>
    <div class="col-sm-2">
        <a href="#" ...><img ...><span ...> TEXT </span></a>
        <div class="modal fade" ... >MODAL</div>
    </div>
</div>
<div class="row">
    <div class="col-sm-4 col-sm-offset-2"> /* add offset to center the two elements*/
        <a href="#" ...><img ...><span ...> TEXT </span></a>
        <div class="modal fade" ... >MODAL</div>
    </div>
    <div class="col-sm-4 ">
        <a href="#" ...><img ...><span ...> TEXT </span></a>
        <div class="modal fade" ... >MODAL</div>
    </div>
</div>

Solution 2:

Change your ul#menu li to have a display:inline-block and add a width (PX or %)