CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Shimul
Shimul

Reputation: 469

How to use the full of width of Bootstrap container class in content?

In a website design, I want a custom navbar using Bootstrap. Instead of keeping the navbar at the top, I keep a margin of 52px from the top and use the same code of bootstrap navbar, like the following:

<div class="container main-wrapper">
      <div class="navbar-wrapper">
        <nav class="navbar navbar-inverse navbar-static-top">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#dropdwon" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Brand</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="dropdwon">

              <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
              </ul>
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>
      </div>
    </div>

The code behind main-wrapper class is:

.main-wrapper {
    border: 1px solid #ddd;
    -webkit-box-shadow: 3px 4px 13px 4px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 3px 4px 13px 4px rgba(50, 50, 50, 0.75);
    box-shadow: 3px 4px 13px 4px rgba(50, 50, 50, 0.75);
    
    background-color: #fff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

But the problem is: My navbar doesn't use the full width of the bootstrap container class. It leaves some width from the left and right sides. Let's check the image of my problem: enter image description here

Can anyone tell me how can fix this issue?

Upvotes: 0

Views: 708

Answers (2)

Priyesh Kumar
Priyesh Kumar

Reputation: 2857

Try this

container-fluid class on main div( with wrapper class ) make it to use full width of document.

padding: 0px in .main-wrapper make it to use full width of its parent container

https://jsfiddle.net/jb6nqs50/1/

Upvotes: 1

SESN
SESN

Reputation: 1283

It is due to container class in main-wrapper. Change container into container-fluid in main-wrapper. The spaces around navbar is due default padding: 15px will be there whenever u add container.

Add .main-wrapper { padding: 0px; }

Here is your working codepen: http://codepen.io/SESN/pen/Mejyrx

Upvotes: 1

Related Questions