CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Jimmyt1988
Jimmyt1988

Reputation: 21126

bootstrap, how do i keep my container full width of screen

I have the following code and the navbar stays full width regardless of screen size... good! but the one below goes to width: 708 when it gets smaller and I just want it to also be 100%.

    <div class="navbar navbar-static-top" id="navigation">
        <div class="navbar-inner">
        <div class="container-fluid">
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            <a class="brand" href="#"><img style="height:20px; padding: 0px; margin: 0px;" src="<?php echo Site::$imageFolder; ?>logo.png" alt="logo" /></a>
            <div class="nav-collapse collapse">
            <ul class="nav pull-right topRightIcons">
                <li class="active"><a href="#"><i class="icon-user icon-white"></i></a></li>
                <li><a href="#about"><i class="icon-eject icon-white"></i></a></li>
            </ul>
            </div><!--/.nav-collapse -->
        </div>
        </div>
    </div>
    <!-- THIS ONE HERE -->
    <div class="row-fluid" id="topBar">
        <div class="span12">         
            <p class="nav-text pull-right"><img src="http://placehold.it/15x15" alt="Your company logo"> Welcome ClientName</p>
        </div>
    </div>

#topBar is purely for colour, as is #navigation

enter image description here

Upvotes: 1

Views: 8887

Answers (1)

Rahul
Rahul

Reputation: 5774

You need to override the media query. Create a custom.css (any-name.css). Add this code inside it.

@media (max-width: 767px)
{
    body {
        padding-right: 0px;
        padding-left: 0px;
    }
}

Now it should stick container to browser width.

Important note - Never make any changes in existing stylesheet. Override it instead :-)

Upvotes: 4

Related Questions