How can i center a page like the below link with navbar down and layout at center in bootstrap 3 (asp.net mvc project)
[http://everthemes.com/demo/sellegance1/index.php?route=account/register]
<div class="container center-block">
<div class="navbar navbar-default navbar-fixed-top bgnav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="index.html"> </a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<div id="footer">
<hr />
<footer>
<p>© #DateTime.Now.Year - dum.Inc</p>
</footer>
</div>
</div>
above not working
ASP.net & MVC shouldn't really change how you use Bootstrap.
In CSS (Bootstrap is mostly a css template), you can:
* Center text within a block - bootstrap uses the "text-center" class for this
* Center the block itself - bootstrap uses the "center-block" class for this
It sounds like you want to center blocks, so the second would apply.
Also make sure you use "container" not "container-fluid" if you want a gutter on the left and the right of the page.
Do not use .containernested in code. must use only one container and use .row for multiple nested column.
Related
So I'm running into an issue with my navbar and media queries. I can get it to switch from regular logo to a smaller logo with no problems. The visible-sm class is giving me issues as for the life of me, I cannot get the text links to the right to reduce the margin forcing the smaller logo up and making the navigation a horror. Did I miss something in the documentation? It seems like something really simple to reduce the rela estate the links are using when hitting the 767px media query. I apologize in advance if this has already been answered I couldn't find a question specific to this issue.
Here be a picture
Here be the Bootply
Here be my HTML
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- 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>
<a class="navbar-brand visible-xs" href="#"><img src="images/logobug.jpg" alt="" /></a>
<a class="navbar-brand visible-sm" href="#"><img src="images/logosm.jpg" alt=""></a>
<a class="navbar-brand visible-md" href="#"><img src="images/logomd.jpg" alt=""/></a>
<a class="navbar-brand visible-lg" href="#"><img src="images/logolg.jpg" alt=" Logo" /></a>
</a>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right pull-right">
<li>HOME</li>
<li> EVENTS</li>
<li>CONTACT US</li>
<li>DIRECTIONS</li>
<li>SPONSERS</li>
<li>VENUES</li>
<li>ABOUT</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Here be my CSS:
.navbar-right {
float: right;
margin-right: -25 px;
}
I think that's what you want , I removed pull right because navbar right do the same
a forked bootply
I made my website menu like this:
<div class="container-fluid">
<div class="row">
<nav id="menu">
<div class="col-sm-12 col-md-2 active-link">
<div class="vertical-align" >
<img class="img-responsive" src="img/logo.png" alt="logo">
</div>
</div>
<div class="col-sm-3 col-md-2 nonactive-link">
<div class="vertical-align" >
MENU<br>ONE
</div>
</div>
<div class="col-sm-3 col-md-2 nonactive-link">
<div class="vertical-align" >
MENU<br>TWO
</div>
</div>
<div class="col-sm-2 col-md-2 nonactive-link">
<div class="vertical-align" >
MENU THREE
</div>
</div>
<div class="col-sm-2 col-md-2 nonactive-link">
<div class="vertical-align" >
MENU FOUR
</div>
</div>
<div class="col-sm-2 col-md-2 nonactive-link">
<div class="vertical-align" >
MENU FIVE
</div>
</div>
</nav>
</div>
</div>
Im not using original nav from bootstrap that is a list (ul li ..)
is there a way i can achive the toggle menu using just divs with col-xs-12 ?
How can i put my code to achieve that just using divs whit col's?
Thanks a lot :)
In order to actually make it a nav menu you need some bootstrap utility classes on the most parent nav element <nav class="navbar navbar-default"> and then you need to add the menu "three lines" icon HTML
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Then you need to add some more utility classes and ID to the wrapper of the actual nav links <div class="collapse navbar-collapse" id="navbar-collapse"> with making sure the id matches the data-target in the nav button itself.
The bootstrap doc on this is HERE
Also I made a JSFIDDLE with your original HTML and modified it, let me know if that makes sense.
I am not sure why my drop down menus are not showing as buttons for this prototype with bootstrap 3?
Also, how can I make this the correct layout if I want some content for above a navigation menu? I am trying to do this without editing the bootstrap CSS and use it natively.
http://www.bootply.com/8IqCa4lI6T
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
<img src="" class="img-responsive" alt="" height="50px" width="50px">picture
</div>
<div class="col-xs-4">
action
</div>
<div class="col-xs-4">
<span id="title">4rows text</span><br>
<span id="title">4rows text</span><br>
<span id="title">4rows text</span><br>
</div></div>
<!-- nav bottom -->
<div class="row">
<ul class="nav nav-pills navbar-nav navbar-left">
<li>menuleft1</li><li>menuleft2</li><li>menuleft3</li>
</ul><!-- /nav -->
<ul class="nav nav-pills navbar-nav navbar-right">
<li>menuright1</li><li>menuright2</li><li>menuright3</li>
</ul><!-- /right_nav -->
</div>
Here is a Bootply with the appropriate HTML to accomplish what I believe you are trying to:
http://www.bootply.com/eTDrQdGYJ7
As for placing something above the navbar. You do not need to modify the Bootstrap CSS. By giving the navbar an ID, and giving a CSS attribute to that ID, that will supercede the Bootstrap CSS.
Alternatively, it's typically okay practice to override the Bootstrap classes in a separate CSS file that is loaded in after the Bootstrap CSS file. That way you are not changing the Bootstrap CSS itself, but have control to modify styling as needed.
Can anyone help me please how to make the unordered list display in grid widths ?
<div class="navbar" role="navigation">
<div class="container">
<div class="row">
<div class="navbar-header col-md-4">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topmenu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a rel="home" class="logo" href="{$baseUri}">
<img src="img/layout/portfolio-2014-logo.png" alt="" class="img-responsive logo" />
</a>
</div>
<div class="navbar-collapse collapse" id="topmenu">
<ul class="nav navbar-nav">
<li class="active">blog</li>
<li class="col-md-2">works</li>
<li class="col-md-2">about</li>
<li class="col-md-2">contact</li>
</ul>
</div>
</div>
</div>
<div class="container">
<hr>
</div>
</div>
I've tried something like this but it is not workiing :/
Well that's not part of default Bootstrap in the navbar because navbar-nav does it's own width based on the width of the text and the padding, but you can just remove the navbar-nav and just use nav:
DEMO: http://jsbin.com/kiyiye/1/
<ul class="nav">
And it will work with col-*-classes but you'll need to likely address the smaller viewport margins and such. Get intimately familiar with Bootstrap's css if you decide to use something never demonstrated in their docs.
I am using bootstrap in my website to make it responsive (I will be making a custom design and not use bootstrap's default css). I have created a bootstrap3 navbar but the button which appears after shrinking the viewport does not function as nothing happens when it is clicked.
I have searched for this on stackoverflow and even tried incorporating changes mentioned here. But its not working.
Javascript is enabled in my browser and I have referenced bootstrap.js in my html as well.
My code is as follows:
<div class="navbar navbar-default navbackcolor" role="navigation">
<div class="container">
<div class="comnWdth">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="number">X12 X123 X123</span>
<span class="text">10am-7pm Mon-Sat</span>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li class="active">Home</li>
<li>My Account</li>
<li>Logout</li>
<li>Register</li>
<li>Login</li>
<li>My Cart</li>
</ul>
</div>
</div> <!-- End .comnWdth -->
</div> <!-- End container -->
</div> <!-- End Navbar -->
Also the toggle button and header ("X12 X123 X123 10am-7pm Mon-Sat") is appearing in different rows when collapsed. How can I make them appear in the same row when in a narrow viewport?
Thanks.
As of Bootstrap 3, you should use navbar-right instead of pull-right inside a navabr:
<ul class="nav navbar-nav navbar-right">.
As for your second question, you should probably post it separately, and include your css because there are clearly custom classes there "text" and "number" that we'll need to know to make good suggestions.