Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap creating extra padding on column in row

Let me preface this by saying I am relatively new to bootstrap and possibly not udnerstanding the row/column layouts properly.

The layout I am working on can be seen here: http://jsfiddle.net/5NFXY/ (code pasted below)

The 'sidebar' on the right is where the problem is occurring. I have a .col-md-9 and a .col-md-3 enclosed withing a .row, but for some reason the right side of the sidebar is not lining up properly with its container. After playing around with this for quite some time I have found that if I remove margin-right: -15px; from the .row the problem goes away, but surely this isn't' the proper solution and I have mucked something up along the way. My question is, have I done something wrong in my HTML or is the proper solution really to manually override that margin-right: -15px;?


HTML

<body>
    <div class="container">
        <div class="logo-header">
            <h1>Header</h1>
            <h4>Subheader</h4>
        </div>
        <div class="inner-container clearfix">
            <!-- Static navbar -->
            <div class="navbar navbar-default" role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Operations <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li class="dropdown-header">Get Started</li>
                                <li><a href="#">Start New</a></li>
                                <li><a href="#">View All</a></li>
                                <li class="divider"></li>
                                <li class="dropdown-header"> Settings</li>
                                <li><a href="#">Manage Types</a></li>
                                <li><a href="#">Manage Types</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Utilities <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Forums</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Distance</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Administration <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="">News</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Alts <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                            </ul>
                        </li>
                    </ul>
                </div><!--/.nav-collapse -->
            </div>
            <div class="row">
                <div class="col-md-9">
                    <div class="wrath-content-box news-post">
                        <h1>Title Bar</h1>
                        <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
                        <p>
                            <a class="btn btn-lg btn-primary" href="" role="button">View navbar docs &raquo;</a>
                        </p>
                    </div>
                    <div class="wrath-content-box news-post">
                        <h1>Title Bar</h1>
                        <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
                        <p>
                            <a class="btn btn-lg btn-primary" href="" role="button">View navbar docs &raquo;</a>
                        </p>
                    </div>
                    <div class="wrath-content-box news-post">
                        <h1>Title Bar</h1>
                        <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
                        <p>
                            <a class="btn btn-lg btn-primary" href="" role="button">View navbar docs &raquo;</a>
                        </p>
                    </div>
                    <div class="wrath-content-box news-post">
                        <h1>Title Bar</h1>
                        <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
                        <p>
                            <a class="btn btn-lg btn-primary" href="" role="button">View navbar docs &raquo;</a>
                        </p>
                    </div>
                </div>
                <div class="col-md-3 wrath-content-box">
                    <h1>Title Bar</h1>
                    <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
                    <p>
                        <a class="btn btn-lg btn-primary" href="" role="button">View navbar docs &raquo;</a>
                    </p>
                </div>
            </div>
            <footer class="wrath-content-box">
                Footer tagline &copy;
            </footer>
        </div> <!-- /inner-container -->
    </div> <!-- /container -->
</body>

CSS

body {
    padding-top: 20px;
    padding-bottom: 20px;
    background: url('../img/wh-background-1.jpg') center center no-repeat fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.navbar {
    margin-bottom: 20px;
}
.logo-header {
    color: #FFF;
}
.logo-header h1 {
    margin-bottom: 0;
}
.logo-header h4 {
    margin-top: 0;
    margin-bottom: 20px;
}
footer {
    margin-top: 20px;
}
.inner-container {
    background: rgba(119, 119, 119, .5);
    border-radius: 6px;
    padding: 20px;
}
.wrath-content-box {
    border-color: #e7e7e7;
    background-color: #f8f8f8;
    border-radius: 6px;
    padding: 15px;
}
.news-post {
    margin-bottom: 20px;
}

Using: Bootstrap 3.0.3 + Jquery 1.10.1

like image 405
Josh Mountain Avatar asked Jan 17 '14 04:01

Josh Mountain


People also ask

How do I add a margin to a Bootstrap column?

You can use calculated width/margins., no change to your HTML necessary. E.g. the width of col-md-3 is 100/4=25%. Therefore you can reduce this, say to 20%, and allocate the remaing 5% to your margins.

How do you add padding to a column?

You can adjust margins on the column contents using the margin utils such as ml-0 (margin-left:0), mr-0 (margin-right:0), mx-1 (. 25rem left & right margins), etc... Or, you can adjust padding on the columns (col-*) using the padding utils such as pl-0 (padding-left:0), pr-0 (padding-right:0), px-2 (.

How do you remove padding from Col Bootstrap?

row doesn't have the extra margins and padding that a col-md-12 would bring and also discounts the space that a column would introduce with negative left & right margins. if you really wanted to remove the padding/margins, add a class to filter out the margins/paddings for each child column.

How do I give an extra margin in Bootstrap?

l - sets margin-left or padding-left. r - sets margin-right or padding-right. x - sets both padding-left and padding-right or margin-left and margin-right. y - sets both padding-top and padding-bottom or margin-top and margin-bottom.


1 Answers

You've combined your custom class wrath-content-box with the bootstrap col-md-3 class and the padding on your class is overriding the Bootsrap grid padding.

You just need to put your class in a separate <div> inside the bootstrap one like you did in the first column.

<div class="col-md-3">
  <div class="wrath-content-box">
    ...
  </div>
</div>

Demo

like image 76
davidpauljunior Avatar answered Sep 22 '22 21:09

davidpauljunior