Posted by April Sadowski and filed under Blog, Bootstrap, Bugs & Fixes

What happened? You copied the grid structure from Bootstrap and now you have a funky horizontal scrollbar at the bottom of your site.

Here are some guides to help you along.

  1. Make sure you aren’t encasing a full-width carousel inside of a container.
    Carousels already have the proper container inside the item div.
  2. Don’t encase a standard Bootstrap menu inside a container unless you are doing a custom menu.
    In the Bootstrap site example, the container is inside the nav element.
  3. Make sure you are using the proper grid structure.
    You always have container > row > class and if nesting, container > row > class > row > class because nested classes need to be inside rows. The row offsets the container padding.

Hopefully these little tidbits will save you a lot of headaches down the road!

About April Sadowski

Part designer and part developer, April has been working full-time for over a decade. She has a long line of ADDY Awards and published design and is the go-to person for HTML/CSS/LESS needs and front-end development. On her off-hours she can be found writing novels (she's published several), doing voice acting or audio production, or gaming. Find April at Stack Overflow

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>