0

Div Above navigation don't cover whole width of page. And how to determine height?

<nav class="navbar navbar-default  navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class='col-md-12-fluid' style="
        padding-bottom: 2px;
        background-color:#FF5722;
        padding-top: 2px;
        ">
  <div class='col-md-8-fluid'> 
    <!--recently search was here--> 
    <a class="navbar-brand" href="index.html"><img src="images/1.jpg" height="60px" ></a> </div>
  <br>
  <div class='col-md-4-fluid'>
    <h3>Nepal Safety</h3>
  </div>
</div>
<div class='clearfix'> </div>
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>
</div>

Thank you in advance.Your help will be appreciated.

Ali Zia
  • 3,825
  • 5
  • 29
  • 77
Crusader
  • 21
  • 2
  • 2
    can you create a fiddle or give us a test page? – Severino Lorilla Jr. May 03 '16 at 06:56
  • Can you provide a working snippet? This isn't valid HTML. Its best if you do a snippet because we can actualy see what is happening instead of just code. – Randy May 03 '16 at 06:56
  • 1
    Possible duplicate of [Bootstrap 3 .container-fluid with grid adding unwanted padding](http://stackoverflow.com/questions/25427407/bootstrap-3-container-fluid-with-grid-adding-unwanted-padding) – Randy May 03 '16 at 07:03

3 Answers3

1

These are normally related to the margin for container 

.container-fluid {
 margin-left: auto;
 margin-right: auto;
 padding-left: 15px;
 padding-right: 15px;
}

You shoud redefine this class: locally or a proper css file 

.container-fluid {
 padding-left: 0px;
 padding-right:0px;
}
ScaisEdge
  • 131,976
  • 10
  • 91
  • 107
  • Changing the TWBS CSS file only works untill you update, unfortunately. I'd advice to use your own CSS to alter the padding. – Randy May 03 '16 at 07:02
1

You use a container-fluid wich has padding at both sides.

Use the following CSS to fix this problem:

body .container-fluid {
    padding-left:0;
    padding-right:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default  navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class='col-md-12-fluid' style="
    padding-bottom: 2px;
    background-color:#FF5722;
    padding-top: 2px;
    ">
    <div class='col-md-8-fluid'>
                <!--recently search was here-->
                <a class="navbar-brand" href="index.html"></a>
        </div><br>
        <div class='col-md-4-fluid'>
        <h3>Nepal Safety</h3>

        </div></div>

        <div class='clearfix'> </div>
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>

    </div>
    </nav>

What also works in this case, is to replace the container-fluid with row-fluid. That gives the full width properties without padding and without modification.

<div class="row-fluid">
Randy
  • 9,419
  • 5
  • 39
  • 56
1
<nav class="navbar navbar-default  navbar-fixed-top">
  <div class="container-fluid">
 </div>

....

Remove the container-fluid class and replace with container-fullwidth

or you can use padding both side equal to 0 

.container-fluid {
    padding-left:0;
    padding-right:0;
}