I've a main layout page that is used on all other pages. The following bootstrap navbar header has an image that always displays on the left. I would like it to display in the center. I've tried to use <div class="text-center">...</div> but to no vail. I'm using ASP.NET Core with VS2015 that by default has Bootstrap 3.0 installed and confitured. But this question may be generic to all Bootstrap users:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<table><tr><td><img src="~/images/abc.gif"></td></tr></table>
</div>
</div>
</div>
Just get rid of all the unnecessary containers and add text-center to navbar
<div class="navbar navbar-inverse navbar-fixed-top text-center">
<img src="~/images/abc.gif">
</div>
jsFiddle: https://jsfiddle.net/azizn/ctrppwLe/
P.S You should avoid using tables unless you're presenting tabular data.
Related
I'm using R and shiny to create a webpage which obviously uses bootstrap CSS. I have no experience at all with bootstrap but from some years ago with css.
I have now a structure like:
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container">
<span class="brand pull-left"></span>
....
</div>
</div>
</div>
And I want the complete navbar with a different color. How can I access this div container "navbar navbar-static-top"?! I have no clue how to reference a CSS code with a space in between...
The space you are referring to is used to assign multiple classes to an element. You would select it by using either of the classes, or both.
.navbar {
}
.navbar-static-top {
}
.navbar,
navbar-static-top {
}
are all acceptable ways of selecting the navbar depending on the required specificity. Please remember your CSS will have to appear after the bootstrap CSS in order to override the bootstrap styles.
It's a better practice to use Sass or Less and extend the bootstrap classes to your own classes, but this might be a bit above your knowledge at the moment.
Just add a custom class, say navbar-custom and apply the changes to the custom classes rather than modifying the defualt classes. Something like this:
HTML:
<div class="navbar navbar-custom navbar-static-top">
<div class="navbar-inner">
<div class="container">
<span class="brand pull-left"></span>
....
</div>
</div>
</div>
CSS:
.navbar-custom {
background-color: red;
--other custom properties--
--other custom properties--
}
My question is similar to the question here:
Bootstrap Unwanted space on the bottom of modal-footer after using the unofficial Bootstrap Modal modification
But, i am not using Modal and the issue only really bothers me in Landscape mode.
This is a photo (apologies) of what I mean.
I am totally stumped. Apart from the link I gave above I cannot find any thing else relating to this?
Just to confirm - want get rid of the white space.
And this is my current markup:
<div style="background-color: black;">
<nav id="TopMenuBar" class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="background-color: black;">
my top content
</nav>
<div class="row mainBody" id="Contents" style="margin: 0; background-color: black;">
my body content
</div>
<div id="BottomMenuBar" class="container-fluid">
my footer content
</div>
</div>
I am trying to have a bar on the top of my site, its not a navigation bar. Various items will go on this bar. So I was thinking How can use Bootstrap for this purpose. There is a nav bar in Bootstrap but I used it already for the navigation of my bar. Can I also use it for different purposes?
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
</div>
</nav>
Use navbar-static-top instead of navbar-fixed-top for your Bootstrap's Navigation bar.
Add <div id="normal-bar">My normal bar</div> before your Bootstrap's Navigation bar and you can customize it any way you want.
Bootstrap's Starter template - DEMO
HTML
<div id="normal-bar">My normal bar</div>
<div class="navbar navbar-inverse navbar-static-top">
......
</div>
CSS
body {
padding-top: 0px; /* It was 50px before */
}
#normal-bar {
/* Your CSS - It's only for DEMO */
background-color:#f00;
text-align:center;
padding:10px 0px;
font-size:20px;
}
You don't need to use nav. For additional bars and sections use this code:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<p>Some text here or whatever you want</p>
</div>
</div>
</div>
Your nav has position:fixed and min-height:50px properties, so don't forget to add to your next section margin-top:50px so it's visible.
Yes, you can use two navigation bars to achieve this behavior by using two separate navbars with navbar-fixed-top and navbar-static-top. See this example on bootply.
I am new to Bootstrap and can't find any answer to my question.
I am using the AdminLTE bootstrap theme for testing. I want to create a nice website theme with it and I want a fixed width. The fixed width is working but not for the header bar.
I want the header bar and menu to always be fixed.
Because I add the "fixed" class to te body my site is fixed width.
Only the header isn't fixed width. It is only fixed to the screen.
Can someone help me out?
You need to wrap the interior of the header with a <div class="container"></div>
<header class="header">
<div class="container">
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top" role="navigation">
<a href="index.html" class="logo">
<!-- Add the class icon to your logo image or logo icon to add the margining -->
Testing
</a>
</nav>
</div>
You need to remove the margin-left and position fixed from the navbar css as well.
I have following code in the html file:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
Hello Bootstrap
<p class="navbar-text pull-right">This is first notice.</p><br/>
<p class="navbar-text pull-right">This is second notice. </p>
</div>
</div>
</div>
I am getting the output like this:
Notice that "This is second notice" is not aligned properly with respect to the line above it. I am trying to get the two notices aligned properly with each other.
I also tried removing <br/> from code above but with that I get the following output:
Could someone please point me what I am doing wrong?
JSFiddle: http://jsfiddle.net/N6vGZ/23/
The reason both paragraphs are not aligning properly in the navbar is because the default line-height of 40px set forth by the bootstraps doesn't allow them both to stack correctly. You can fix that by setting a lower line-height, something like 20px should do the trick.
Note: i included both paragraphs inside a container that i can easily float and target with my own class, as not to bother the other elements around it.
HTML
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
Hello Bootstrap
<div class="notices pull-right">
<p class="navbar-text">This is first notice.</p>
<p class="navbar-text">This is second notice.</p>
</div>
</div>
</div>
</div>
Try this:
CSS
.notices p {
line-height:20px !important;
}
Demo: http://jsfiddle.net/N6vGZ/29/
You didn't include the css but I assume that you have "float: right" on your "pull-right" class.
I think the easiest way to solve it is to wrap the two p's in their own div and float that dive right:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
Hello Bootstrap
<div class="pull-right">
<p class="navbar-text">This is first notice.</p>
<p class="navbar-text">This is second notice. </p>
</div>
</div>
</div>
Don't forget to set a width on the "pull-right" class in your css if you haven't already.
You can use ul with nav class and li with pull-right
http://jsfiddle.net/N6vGZ/28/