CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Weardian
Weardian

Reputation: 221

bootstrap columns full width and spilling outside container

It's my first time building a bootstrap website. I thought I knew how the columns worked, but when I try to use them they take up 100% width of the container (as opposed to taking up 1/4 of the container as they are supposed to). I've tried googling for people with the same problem but can't find anything. So, here's what I have...

HTML:

<body>
    <div class = "hero container"></div>
    <div class = "container-fluid how-it-works">
        <div class = "row">
            <div class = "col-md-3"></div>
            <div class = "col-md-3"></div>
            <div class = "col-md-3"></div>
            <div class = "col-md-3"></div>
        </div>
    </div>
    <div class = "featured container"></div>
    <div class = "testimonials container"></div>
    <div class = "about container"></div>
</body>

CSS:

.how-it-works {
    height:  550px;
    background-color:  #f7f7f7;
}

.how-it-works .row .col-md-3 {
    height:  550px;
    background-color:  blue;
    width: 100%;
}

If anyone can figure out what I'm doing wrong, I would really appreciate some help. Thanks!

Upvotes: 0

Views: 2017

Answers (2)

Joe Koker
Joe Koker

Reputation: 961

width for .col-md-3 is already set by bootstrap so you are overwriting it with your css. you can check how it works here: http://getbootstrap.com/css/#grid

Upvotes: 1

Keammoort
Keammoort

Reputation: 3075

Remove following CSS (setting width on bootstrap columns):

.how-it-works .row .col-md-3 {
    width: 100%;
}

For instance col-md-3 is defined as:

.col-md-3 {
    width: 25%;
}

and your code changes that. Remove it and it will again take 1/4 of space.

Upvotes: 1

Related Questions