Fixed width footer using Bootstrap CSS

HTML & CSS
1

I am using boostrap css.

I want to set width to 860 to this div

This is my code

<div class=“navbar navbar-fixed-bottom”>fixed at the bottom</div>

What to do here ?

2

HI,

It all depends on what else is going on in the layout?

IIRC the fixed navbar is placed using left:0 and right:0 so that it stretches all the way across. If you want it only 860px width then you will need to set a width and use margin:auto like this.


.navbar-fixed-bottom{
	position:fixed;
	bottom:0;
	left:0;
	right:0;	
	width:860px;
	margin:auto;
}

The margin:auto is important as are left:0 and right:0 as that will center the element.

Of course this all depends on what else you have done and what else is defined in the media queries and whether you are using the fluid grid or not. You can’t really just fix one width if all the rest is fluid.

3

navbar-fixed-bottom is a bootstrap css …do you mean I need to modify this bootstrap css ? This is bit risky.

is it not possible to override bootstrap css and use but not modifying original bootstrap css to get the desired look ?

4

You could add Paul’s code to your custom stylesheet.

The idea is to override the styles that are causing the undesirable behavior, but without seeing the working page and knowing the other styles affecting class="navbar navbar-fixed-bottom" it’s not possible to give a plug-n-play solution.

5

ok…I have decided to put paul’s css in my custom.css file.

Now as there is two css with same name which one will be loaded finally ?

Do I need to maintain any order of importing these two css (i.e custom.css and bootstrap.css) so that paul’s code can work ?

should I import first custom css and then bootstrap css or what is the caveat here ?

6

That’s a heady question.

The “C” in CSS stands for Cascading… which means that styles are applied in the order in which they are are written, with due regard given to specificity. So, YES, the order matters very much.

The custom stylesheet should appear at the bottom of the list of stylesheets on the HTML page to assure that any styles on it are applied last and will override styles of equal or less specificity that were applied earlier.

7

Hi,

As Ron said you don’t change the bootstrap files at all and you use your custom/css file to make all the changes so that when a newer version of bootstrap comes out you just have to address your custom files for any modifications (that was the theory anyway but went to pot when they released bootstrap 3 which wasn’t compatible with bootstrap 2 anyway :().

Never change the bootstrap files unless you know 100% what and why you are doing it. Just create a custom CSS stylesheet and let it follow after the bootstrap code and then assuming you have used the same weighted styles (read up on specificity in the Sitepoint reference) your custom styles will be applied.