CODEWITHSUNDEEP
htmlcsstwitter-bootstrapmarginpadding
user470760
user470760

Reputation:

Bootstrap Layout creates weird padding and alignment

I'm working on my first Bootstrap layout and so far enjoying it, although I have ran into some issue where it seems to be creating unexpected padding and alignment issues.

I want to have it laid out horizontally as Nav Bar, Search Bar, Content, Footer. They should all be full width of the page, but all content is kept in the middle and aligned. For some reason, my Nav Bar/Footer have weird spaces on either side and the content alignment tends to be jagged.

Can anyone help me figure out what is causing these problems?

enter image description here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">

    <!-- Navigation Bar -->
    <!--<nav class="navbar navbar-inverse navbar-fixed-top">-->
    <nav class="navbar navbar-inverse">
        <div class="container">

            <div class="navbar-header">
                <a class="navbar-brand" href="#">Website</a>
            </div>

            <!-- Right Contents -->
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-user"></span> Register</a></li>
            </ul>

        </div>
    </nav>

    <!-- Search Bar -->
    <div class="row search-bar">
        <div class="container">

            <!-- Search Text Box -->
            <div class="col-lg-5">
                <input class="form-control" id="search" type="text" value="Search stuff...">
            </div>

            <!-- Search Category -->
            <div class="col-lg-3">
                <div class="dropdown">
                    <button type="button" class="btn btn-default dropdown-toggle col-xs-12" data-toggle="dropdown">Select Category <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="#">Test 1</a></li>
                        <li><a href="#">Test 2</a></li>
                        <li><a href="#">Test 3</a></li>
                    </ul>
                </div>
            </div>

            <!-- Search Location -->
            <div class="col-lg-3">
                <div class="dropdown">
                    <button type="button" class="btn btn-default dropdown-toggle col-xs-12" data-toggle="dropdown">Select Location <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="#">Test 1</a></li>
                        <li><a href="#">Test 2</a></li>
                        <li><a href="#">Test 3</a></li>
                    </ul>
                </div>
            </div>

            <!-- Search Button -->
            <div class="col-lg-1">
                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
            </div>

        </div>
    </div>

    <div class="container">

        <div class="row">

            <div class="content col-lg-12">

                <div class="container-fluid">

                    <div class="row">
                        <div class="col-sm-3">
                            <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                        </div>
                        <div class="col-sm-3">
                            <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                        </div>
                        <div class="col-sm-3">
                            <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                        </div>
                        <div class="col-sm-3">
                            <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-3">
                            <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                        </div>
                        <div class="col-sm-3">
                            <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                        </div>
                        <div class="col-sm-3">
                            <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                        </div>
                        <div class="col-sm-3">
                            <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <!-- Site footer -->
    <footer class="footer">
        <div class="container">
            <p>&copy; Company 2016</p>
        </div>
    </footer>

</div>

</body>
</html>

Upvotes: 3

Views: 2009

Answers (5)

Dragan Petrovic FSD
Dragan Petrovic FSD

Reputation: 87

There is already a Bootstrap tweak class for that common problem since always... gutters or no-gutters

.no-gutters {
margin-right: 0;
margin-left: 0;

}

Upvotes: 0

G Patel
G Patel

Reputation: 26

CSS 

.no-margin{
    margin: 0px;
    }
    .no-padding
    {
      padding: 0px;
    }

HTML

 <div class="panel-group" no-margin no-padding>
            <div class="panel-primary" style="box-shadow:0px 20px 20px 0px">
                <div class="panel-body">

ANYWHERE IN ANY DIV CLASS

<nav class="navbar navbar-background navbar-info no-margin no-padding" >
    <div class="navbar-header ">
    <ul class="nav navbar-nav">

Upvotes: 0

Subash
Subash

Reputation: 7256

You have not structured your HTML properly. Always rule of thumb is all your columns must be inside a row and row inside a container. You can imagine it as

container > row > columns

Also I added a btn-block on the last button so it spreads out a bit. Another thing to not is you have used multiple containers in your HTML. Generally the rule of thumb is use one container in your page. However in your case as you have a menu that spreads throught the page and the body is centered, you will need 2 containers. The general boilerplate would be something as follows:

container
  row // each row is 12 columns. so add the combination
    col 4
    col 8 
  row 
    col 3
    col 3 // you can further divide each columns into a row
      row // again divided into 12 columns
        col 6
        col 6
    col 3
    col 3

Container: wraps everything and centers its contents

Container Fluid: wraps everything but lets it flow

Row: Container to define columns. Bootstrap uses 12 column grid

Column: Each columns

Bootstrap website has a good example of how grids work.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">

<!-- Navigation Bar -->
<!--<nav class="navbar navbar-inverse navbar-fixed-top">-->
<nav class="navbar navbar-inverse">
    <div class="container">

        <div class="navbar-header">
            <a class="navbar-brand" href="#">Website</a>
        </div>

        <!-- Right Contents -->
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-user"></span> Register</a></li>
        </ul>

    </div>
</nav>
</div>

<!-- Search Bar -->
<div class="container">

<div class="row search-bar" style="margin-bottom: 10px;">
        <!-- Search Text Box -->
        <div class="col-lg-5">
            <input class="form-control" id="search" type="text" value="Search stuff...">
        </div>

        <!-- Search Category -->
        <div class="col-lg-3">
            <div class="dropdown">
                <button type="button" class="btn btn-default dropdown-toggle col-xs-12" data-toggle="dropdown">Select Category <span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li><a href="#">Test 1</a></li>
                    <li><a href="#">Test 2</a></li>
                    <li><a href="#">Test 3</a></li>
                </ul>
            </div>
        </div>

        <!-- Search Location -->
        <div class="col-lg-3">
            <div class="dropdown">
                <button type="button" class="btn btn-default dropdown-toggle col-xs-12" data-toggle="dropdown">Select Location <span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li><a href="#">Test 1</a></li>
                    <li><a href="#">Test 2</a></li>
                    <li><a href="#">Test 3</a></li>
                </ul>
            </div>
        </div>

        <!-- Search Button -->
        <div class="col-lg-1">
            <button class="btn btn-default btn-block" type="button"><span class="glyphicon glyphicon-search"></span></button>
        </div>

    </div>


    <div class="row">

        <div class="content col-lg-12">


                <div class="row">
                    <div class="col-sm-3">
                        <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                    </div>
                    <div class="col-sm-3">
                        <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                    </div>
                    <div class="col-sm-3">
                        <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                    </div>
                    <div class="col-sm-3">
                        <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-3">
                        <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                    </div>
                    <div class="col-sm-3">
                        <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                    </div>
                    <div class="col-sm-3">
                        <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                    </div>
                    <div class="col-sm-3">
                        <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                    </div>
                </div>

        </div>
    </div>
</div>

<!-- Site footer -->
<footer class="footer">
    <div class="container">
        <p>&copy; Company 2016</p>
    </div>
</footer>


</body>
</html>

Upvotes: 2

Jyoti Pathania
Jyoti Pathania

Reputation: 5004

Your padding and alignment issue fixed its happening because of improper bootstrap structure. see the code here CODEPEN

<div class="container-fluid">

    <!-- Navigation Bar -->
    <!--<nav class="navbar navbar-inverse navbar-fixed-top">-->
    <nav class="navbar navbar-inverse">
        <div class="container">

            <div class="navbar-header">
                <a class="navbar-brand" href="#">Website</a>
            </div>

            <!-- Right Contents -->
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-user"></span> Register</a></li>
            </ul>

        </div>
    </nav>

    <!-- Search Bar -->
    <div class="container ">
        <div class="row search-bar" style="margin-bottom:10px;">

            <!-- Search Text Box -->
            <div class="col-lg-5">
                <input class="form-control" id="search" type="text" value="Search stuff...">
            </div>

            <!-- Search Category -->
            <div class="col-lg-3">
                <div class="dropdown">
                    <button type="button" class="btn btn-default dropdown-toggle col-xs-12" data-toggle="dropdown">Select Category <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="#">Test 1</a></li>
                        <li><a href="#">Test 2</a></li>
                        <li><a href="#">Test 3</a></li>
                    </ul>
                </div>
            </div>

            <!-- Search Location -->
            <div class="col-lg-3">
                <div class="dropdown">
                    <button type="button" class="btn btn-default dropdown-toggle col-xs-12" data-toggle="dropdown">Select Location <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="#">Test 1</a></li>
                        <li><a href="#">Test 2</a></li>
                        <li><a href="#">Test 3</a></li>
                    </ul>
                </div>
            </div>

            <!-- Search Button -->
            <div class="col-lg-1">
                <button class="btn btn-default btn-block" type="button"><span class="glyphicon glyphicon-search"></span></button>
            </div>

        </div>
    </div>

    <div class="container">

        <div class="row">

            <div class="content col-lg-12">

                <div>

                    <div class="row">
                        <div class="col-sm-3">
                            <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                        </div>
                        <div class="col-sm-3">
                            <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                        </div>
                        <div class="col-sm-3">
                            <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                        </div>
                        <div class="col-sm-3">
                            <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-3">
                            <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                        </div>
                        <div class="col-sm-3">
                            <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                        </div>
                        <div class="col-sm-3">
                            <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                        </div>
                        <div class="col-sm-3">
                            <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <!-- Site footer -->
    <footer class="footer">
        <div class="container">
            <p>&copy; Company 2016</p>
        </div>
    </footer>

</div>

Upvotes: 0

Pc hobbit
Pc hobbit

Reputation: 96

Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows

Bootstrap

Upvotes: 0

Related Questions