Are These BootStrap Columns Centered?

Question

Hey guys,

I've been experimenting with a few design parts that I want to add on my site for my web design business and I need some feedback on if they are central to my container.

I am utilising Twitter's BootStrap for the grid columns but to me they aren't center on the screen.

You can see what I have so far here.

Here is the code that I am using to obtain this, it is quite messy and doesn't validate as I was just quickly putting it together.

HTML

<div class="info-columns">
    <div class="container">
        <div class="row">
            <a href="#">
                <div class="col-sm-1 col-sm-offset-1 color-info-column teal">
                    <h1>&#128101;</h1>
                </div>  
                <div class="col-sm-2 info-column">
                    <h3>ABOUT</h3>
                    <p>Who are we and what we do</p>
                </div>
            </a>

            <a href="#">
                <div class="col-sm-1 color-info-column red">
                    <h1>&#128213;</h1>
                </div>
                <div class="col-sm-2 info-column">
                    <h3>PORTFOLIO</h3>
                    <p>Web design, app design, etc.</p>
                </div>
            </a>

            <a href="#">
                <div class="col-sm-1 color-info-column green">
                    <h1>&#128222;</h1>
                </div>
                <div class="col-sm-2 info-column">
                    <h3>CONTACTS</h3>
                    <p>Get in contact with Juicy Tomato.</p>
                </div>
            </a>
        </div>
    </div>
</div>

CSS

.teal {
  background-color: #1abc9c;
  border-bottom: 2px solid #18a287;
  text-shadow: 2px 1px 1px #18a287;
}

.red {
  background-color: #ff4a3c;
  border-bottom: 2px solid #cc3c31;
  text-shadow: 2px 1px 1px #cc3c31;
}

.green {
  background-color: #2ecc71;
  border-bottom: 2px solid #26ac5f;
  text-shadow: 2px 1px 1px #27ac5f;
}

.color-info-column {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  height: 111px;
}

.info-column {
  background-color: #fff;
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom: 2px solid #ccc;
  margin-right: 15px;
}

.info-column h3 {
  margin-bottom: -10px;
}

.info-columns {
  border-bottom: 2px solid #ddd;
  background-color: #ebeeed;
  padding-top: 60px;
  padding-bottom: 70px;
}

.info-columns a {
  color: #323a45  !important;
  transition: all 0.2s;
}

.info-columns a:hover {
  color: #95a5a6 !important;
  text-decoration: none !important;
}

I might tag Guil Hernandez & Nick Pettit.

Thanking you in advance,

Stu : )

Answer 1 · 2014-11-05T01:32:38Z

November 5, 2014 1:32am

From your code I can see, that you only use 9 columns out of 12, therefore it won't be centered. The container class centers the whole content to a fixed (or fluid for the .container-fluid class) width, but inside you have to stick to the grid, if you are working with the columns and want to have it centered. the easiest solution would be using col-sm-3 for the .info-column or making your own grid for the navigation.

However your whole code is not valid and bad practice, because you can't put an anchor tag around div containers. The better way of realizing a navigation would be an unordered list. Have a look at the "How to Make a Website" course for more details on that: http://teamtreehouse.com/library/how-to-make-a-website

EDIT: forget what I just said about wrapping a div element inside an anchor link, apparently that's allowed in HTML5 now, but I have never seen it before. I would still suggest switching to a list menu for SEO reasons.

Welcome to the Treehouse Community

Looking to learn something new?

Stu Cowley

Stu Cowley

Are These BootStrap Columns Centered?

HTML

CSS

1 Answer

Jacob Herper

Jacob Herper