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">
    <divclass="col-sm-12 col-md-12 col-lg-12"><ulclass="list-inline"><li>/* 7 <li> elements */</li></ul></div></div><divclass="row"><divclass="col-sm-12 col-md-12 col-lg-12"><ulclass="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:

<divclass="row"><divclass="col-sm-2"><ahref="#"...><img...><span...> TEXT </span></a><divclass="modal fade"... >MODAL</div></div><divclass="col-sm-2"><ahref="#"...><img...><span...> TEXT </span></a><divclass="modal fade"... >MODAL</div></div><divclass="col-sm-2"><ahref="#"...><img...><span...> TEXT </span></a><divclass="modal fade"... >MODAL</div></div><divclass="col-sm-2"><ahref="#"...><img...><span...> TEXT </span></a><divclass="modal fade"... >MODAL</div></div><divclass="col-sm-2"><ahref="#"...><img...><span...> TEXT </span></a><divclass="modal fade"... >MODAL</div></div><divclass="col-sm-2"><ahref="#"...><img...><span...> TEXT </span></a><divclass="modal fade"... >MODAL</div></div></div><divclass="row"><divclass="col-sm-2"><ahref="#"...><img...><span...> TEXT </span></a><divclass="modal fade"... >MODAL</div></div><divclass="col-sm-2"><ahref="#"...><img...><span...> TEXT </span></a><divclass="modal fade"... >MODAL</div></div><divclass="col-sm-2"><ahref="#"...><img...><span...> TEXT </span></a><divclass="modal fade"... >MODAL</div></div><divclass="col-sm-2"><ahref="#"...><img...><span...> TEXT </span></a><divclass="modal fade"... >MODAL</div></div><divclass="col-sm-2"><ahref="#"...><img...><span...> TEXT </span></a><divclass="modal fade"... >MODAL</div></div><divclass="col-sm-2"><ahref="#"...><img...><span...> TEXT </span></a><divclass="modal fade"... >MODAL</div></div></div><divclass="row"><divclass="col-sm-4 col-sm-offset-2"> /* add offset to center the two elements*/
        <ahref="#"...><img...><span...> TEXT </span></a><divclass="modal fade"... >MODAL</div></div><divclass="col-sm-4 "><ahref="#"...><img...><span...> TEXT </span></a><divclass="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 %)