CODEWITHSUNDEEP
htmltwitter-bootstrap
craycraycrayons
craycraycrayons

Reputation: 11

White gap between Bootstrap navbar and background

There's a white gap between Bootstrap navbar and Background as visible from the image below

https://i.sstatic.net/w7K5M.png

Anyone have an idea how to get rid of this?

Here's my code 

<body>

    <div class="navbar">

        <div class="navbar-inner">

                <a class="brand" href="#">CrayOns</a>

                    <ul class="nav">

                            <li><a href="#">Home</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>

    </ul>

    </div>  

</div>

<center>

            <p>Currently under maintenance <br/>

ALso, does anyone have any idea on how to change the color of the buttons on bootstrap?

Cheers!

Upvotes: 1

Views: 2581

Answers (2)

Diego Galocha
Diego Galocha

Reputation: 1

In the div where is the container you should add a style like the next line:

<div id="main" class="container-fluid"  style="margin-top:-15px">

Upvotes: -1

jamesplease
jamesplease

Reputation: 12879

Why am I seeing this extra spacing?

If you're using an un-configured version of Bootstrap, .navbar, by default, has this set:

margin-bottom: @baseLineHeight;

where

@baseLineHeight: 20px;

which is probably causing the behavior you're seeing.

To get rid of this, simply add

.navbar { margin-bottom: 0; }

to any stylesheet loaded after bootstrap.

Sources:

navbar.less, line 12

variables.less, line 53

How can I change the colors of the boxes?

The easiest way would be modifying the .less files. Luckily, the creators behind Bootstrap make this super easy through the configuration page. The relevant variables to you are the 'background' and 'text' variables under 'Form states & alerts'. Note that changing the colors here will affect all other elements that use the 'warning,' 'info,' etc. nomenclature for determining color. For instance, labels & badges.

If you'd like to change just the button colors, I'd probably leave Bootstrap unmodified and write extra css rules to your files. For instance, I might target .btn-warning to apply the appropriate color to just the button.

If you're doing this in less, it'd simply be a matter of creating a new variable and assigning the color to that variable (note: while it is true that using variables here isn't necessary, I'm suggesting a method of good practice)

Upvotes: 3

Related Questions