CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user3651267
user3651267

Reputation: 83

Bootstrap col-md-12 not wrapping the whole width of screen

I am creating a navigation bar and placed a banner below it but they are not 100% wide. I want both of them to wrap the 100% width.

HTML(header.php)

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/app.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div class="col-md-12" style="margin-bottom: 0px;">
                <nav class="navbar navigation_bar navbar-default navbar-static-top" role="navigation">
                    <div class="container-fluid">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                 <span class="sr-only">Toggle navigation</span>
                                 <span class="icon-bar"></span>
                                 <span class="icon-bar"></span>
                                 <span class="icon-bar"></span>
                            </button>

                        </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <div class="col-md-3"></div>
                <div class="col-md-6"> 
                     <center>
                     <ul class="nav navbar-nav">
                            <li class="active"><a href="#">HOME</a></li>
                            <li><a href="#">MENUITEM1</a></li>
                            <li><a href="#">MENUITEM2</a></li>
                            <li><a href="#">MENUITEM3</a></li>
                            <li><a href="#">MENUITEM4</a></li>
                            <li><a href="#">MENUITEM5</a></li>
                            <li><a href="#">MENUITEM6</a></li>
                            <li><a href="#">MENUITEM7</a></li>
                      </ul>
                      </center>
                  </div>
                  <div class="col-md-3"></div>
                 </div><!-- /.navbar-collapse !-->
              </div><!-- /.container-fluid !-->
             </nav>
    </div>

Index.php

<?php include "header.php" ?>

    <div class="col-md-12">
            <img class="img-responsive" src="img/banner_1.png" width="100%">
    </div>

Note: I may have added few additional classes but they are used to change the colors only, layout is not at all touched.

Also, i tried to add row class above col-md-12 but it result in scrolling page left to right and vice versa.

I am wondering how can i make the nav bar and banner 100% wide. After inspecting col-md-12 its width is 100% but i am not sure why it is not working.

Thanks in advance.

JSFiddle

Upvotes: 2

Views: 10217

Answers (2)

jdwallace12
jdwallace12

Reputation: 127

as of Bootstrap 3.1 you can use the class container-fluid to have things stretch across the entire screen

<div class="container-fluid">
   <div class="row">
     //your code for nav here
   </div>
 </div>

Upvotes: 0

Kai Feller
Kai Feller

Reputation: 663

col-md-12 has a default padding values....padding-left: 15px and padding-right: 15px.

If you want to remove these defaults for bootstrap, add an additional class to the same div with padding: 0.

Here's a JSFiddle: http://jsfiddle.net/v42e2/

Upvotes: 2

Related Questions