My Bootstrap 3 navbar-btn alignment is not inline with the navbar-form. Before I get into customising the CSS, I'd like to know if my issue is in the Bootstrap markup.
Screenshot
HTML
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-sm-4">
<button type="button" class="btn btn-primary navbar-btn" data-toggle="offcanvas"><i class="fa fa-th-list fa-fw"></i></button>
</div><!-- /.col-xs-2.col-sm-4 -->
<div class="col-xs-8 col-sm-4">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="search" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button type="button" class="btn btn-primary"><i class="fa fa-search fa-fw"></i></button>
</span>
</div><!-- /.input-group -->
</form>
</div><!-- /.col-xs-8.col-sm-4 -->
<div class="col-xs-2 col-sm-4">
<button type="button" class="btn btn-primary navbar-btn"><i class="fa fa-cog fa-fw"></i></button>
</div><!-- /.col-xs-2.col-sm-4 -->
</div><!-- /.row -->
</div><!-- /.container -->
</nav><!-- /.navbar -->
Bootlint doesn't find any errors and markup is valid HTML 5.
Any thoughts?
Thank you.
The misalignment is caused by the default margin and padding provided with the form element in Twitter Bootstrap. You can override them for small devices with the below code.
#media (max-width: 768px) {
.navbar-form {
margin: 0 !important;
/* Avoid !important and use the custom CSS with higher priority */
padding-top: 7px !important;
}
}
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-sm-4">
<button type="button" class="btn btn-primary navbar-btn" data-toggle="offcanvas"><i class="fa fa-th-list fa-fw"></i>
</button>
</div>
<!-- /.col-xs-2.col-sm-4 -->
<div class="col-xs-8 col-sm-4">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="search" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button type="button" class="btn btn-primary"><i class="fa fa-search fa-fw"></i></button>
</span>
</div>
<!-- /.input-group -->
</form>
</div>
<!-- /.col-xs-8.col-sm-4 -->
<div class="col-xs-2 col-sm-4 text-right">
<button type="button" class="btn btn-primary navbar-btn"><i class="fa fa-cog fa-fw"></i>
</button>
</div>
<!-- /.col-xs-2.col-sm-4 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->
Related
I have a div with a button group.
Here is the code:
<div id="main"><!-- This is 100% width and no passing or margin -->
<div class="btn-toolbar" role="toolbar">
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button class="btn btn-primary btn-lg"><i class="fa fa-plus"></i> Add</button>
</div>
<div class="btn-group" role="group">
<button class="btn btn-primary btn-lg"><i class="fa fa-download"></i> Import</button>
</div>
<div class="btn-group" role="group">
<button class="btn btn-primary btn-lg"><i class="fa fa-trash"></i> Delete</button>
</div>
<div class="btn-group" role="group">
<button class="btn btn-primary btn-lg"><i class="fa fa-save"></i> Save</button>
</div>
</div>
</div>
</div>
This issue is that I need these buttons the:
1. Be the same size
2. Take up 100% of the parent div inline
I can only fit 3 buttons at the moment but need to fix 4.
I could divide 100 by 4 and give the buttons the size, but as I'm using Bootstrap 4, is there a way to do this using Bootstrap's 4 own classes or if you can't do it just using bootstrap 4 classes, how can I best do this?
Use this in your index.html file
<!doctype HTML>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRe3js3W69CrGF8kKXvvmYtT4zNGqicXRjvuAnmmbvPZXc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css" type="text/css">
<title>WeGo</title>
</head>
<body>
<div id="main"><!-- This is 100% width and no passing or margin -->
<div class="btn-toolbar" role="toolbar">
<div class="btn-group btn-group-justified bg-primary" role="group" style="width: 100%;">
<div class="row">
<div class="col-lg-3 btn-group" role="group">
<button class="btn btn-primary btn-lg" style="width: 20em;"><i class="fa fa-plus"></i> Add</button>
</div>
<div class="col-lg-3 btn-group" role="group">
<button class="btn btn-primary btn-lg" style="width: 20em;"><i class="fa fa-download"></i> Import</button>
</div>
<div class="col-lg-3 btn-group" role="group">
<button class="btn btn-primary btn-lg" style="width: 20em;"><i class="fa fa-trash"></i> Delete</button>
</div>
<div class="col-lg-3 btn-group" role="group">
<button class="btn btn-primary btn-lg" style="width: 20em;"><i class="fa fa-save"></i> Save</button>
</div>
</div>
</div>
</div>
</div>
<script src="jquery/jquery.slim.min.js"></script>
<script src="popper/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
I hope this will help you.
I have a minor css issue with my bootstrap footer found in the modal. There is a line that appears going across the top. It appears to be caused by the footer. I had the issue with header as well, but removed it and noticed its in the footer. Can someone take a peak to see what is going on?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Get Started</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content modal-lg">
<p>
<h3 style="margin-left:30px;">We've simplified our processes...</h3>
</p>
<div class="modal-body modal-lg">
<div class="container col-md-12">
<div class="row">
<div class="col-md-1">
<button type="button" class="btn btn-info btn-circle btn-lg"><i class="glyphicon glyphicon-cog"></i>
</button>
</div>
<div class="col-md-11">
<ul>
<li>Spent xyz</li>
<li>Spent xyz</li>
<li>Spent xyz</li>
</ul>
</div>
</div>
<button type="button" class="btn btn-primary btn-block">Annual campaign planning</button>
<br>
<div class="row">
<div class="col-md-3">
<button type="" class="btn btn-primary">Plan It</button>
<br>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
<div class="col-md-3">
<button type="" class="btn btn-primary">Create It</button>
<br>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
<div class="col-md-3">
<button type="" class="btn btn-primary">Deliver It</button>
<br>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
<div class="col-md-3">
<button type="" class="btn btn-primary">Measure It</button>
<br>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
</div>
</div>
</div>
<div class="modal-footer modal-lg">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
overiding .model-footer class will solve the issue.
.model-footer{
border:none;
}
Please let me know if this helped.
The issue is the footer's border-top. You can use this CSS to turn off the border:
.model-footer {
border-top:none;
}
It will work definitely !!
Normally, I would just do position: relative and do left: 500px. But, the best part about Bootstrap is that it's responsive. I don't want to get rid of the responsive feature of Bootstrap. How do I center an li in Bootstrap inside of my nav?
Please view the snippet in Full Page mode. My goal is to move the two "Links" to the middle of the div. They are both li's. How do I accomplish this?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
<title>Fancy navbar login / sign in form - Bootsnipp.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body{
background:url('http://www.wallpaperup.com/uploads/wallpapers/2012/10/21/20181/cad2441dd3252cf53f12154412286ba0.jpg');
padding:50px;
}
#login-dp{
min-width: 250px;
padding: 14px 14px 0;
overflow:hidden;
background-color:rgba(255,255,255,.8);
}
#login-dp .help-block{
font-size:12px
}
#login-dp .bottom{
background-color:rgba(255,255,255,.8);
border-top:1px solid #ddd;
clear:both;
padding:14px;
}
#login-dp .social-buttons{
margin:12px 0
}
#login-dp .social-buttons a{
width: 49%;
}
#login-dp .form-group {
margin-bottom: 10px;
}
.btn-fb{
color: #fff;
background-color:#3b5998;
}
.btn-fb:hover{
color: #fff;
background-color:#496ebc
}
.btn-tw{
color: #fff;
background-color:#55acee;
}
.btn-tw:hover{
color: #fff;
background-color:#59b5fa;
}
#media(max-width:768px){
#login-dp{
background-color: inherit;
color: #fff;
}
#login-dp .bottom{
background-color: inherit;
border-top:0 none;
}
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<body>
<nav class="navbar navbar-default navbar-inverse" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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" href="#">Login dropdown</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">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><p class="navbar-text">Already have an account?</p></li>
<li class="dropdown">
<b>Login</b> <span class="caret"></span>
<ul id="login-dp" class="dropdown-menu">
<li>
<div class="row">
<div class="col-md-12">
Login via
<div class="social-buttons">
<i class="fa fa-facebook"></i> Facebook
<i class="fa fa-twitter"></i> Twitter
</div>
or
<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required>
<div class="help-block text-right">Forget the password ?</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> keep me logged-in
</label>
</div>
</form>
</div>
<div class="bottom text-center">
New here ? <b>Join Us</b>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
<script type="text/javascript">
</script>
</body>
</html>
Just you can do it in this way--
Add a class .navbar-centre to the ul which contains the links to be centered.
Then add the css like the snippet.
#media (min-width: 768px) {
.navbar-nav.navbar-center {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
}
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-inverse" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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" href="#">Login dropdown</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-center">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><p class="navbar-text">Already have an account?</p></li>
<li class="dropdown">
<b>Login</b> <span class="caret"></span>
<ul id="login-dp" class="dropdown-menu">
<li>
<div class="row">
<div class="col-md-12">
Login via
<div class="social-buttons">
<i class="fa fa-facebook"></i> Facebook
<i class="fa fa-twitter"></i> Twitter
</div>
or
<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required>
<div class="help-block text-right">Forget the password ?</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> keep me logged-in
</label>
</div>
</form>
</div>
<div class="bottom text-center">
New here ? <b>Join Us</b>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
</html>
I've been trying to make a responsive navbar with columns but I can't manage to react well to the different sizes I've trying al lot of things: column-offset, contaniers, paddings... but I can't get a decent result. Here it is what I managed to do so far:
<nav class="navbar navbar-default ">
<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 class="navbar-collapse collapse" style="height: 0px;">
<div class="row show-grid">
<div class=" col-xs-8 col-md-6 col-md-offset-2" >
<ul class="nav navbar-nav" id="altre">
<li>Shop
</li>
<li>Style Guide
</li>
<li>Be a man
</li>
</ul>
</div>
<div class=" col-xs-4 col-md-4">
<ul class="nav navbar-nav hidden-xs" id="login">
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Login</a>
<div class="dropdown-menu">
<form class="navbar-form" role="form">
<p><input class="form-control" type="text" placeholder="E-mail"></p>
<p><input class="form-control" type="password" placeholder="Contrasenya"></p>
<button type="button" class="btn btn-primary">Sign in</button>
<button type="button" class="btn btn-success">Log in</button>
</form>
</div>
</li>
</ul>
<form class="navbar-form text-center visible-xs" role="form">
<p><input class="form-control" type="text" placeholder="E-mail"></p>
<p><input class="form-control" type="password" placeholder="Contrasenya"></p>
<button type="button" class="btn btn-primary">Sign in</button>
<button type="button" class="btn btn-success">Log in</button>
</form>
</div>
</div>
</div>
</nav>
At first sight it seems to be working right but when you resize you see the difference between the right and left margin.
I'm very lost at this point, anyone knows a clean way to have a good result?
here the files if you don't want to download one by one:
https://drive.google.com/file/d/0BwOBDBZckmYwZ20tLTRQdFI3a3c/edit?usp=sharing
thanks
You need to use .container class in divs before rows, the problem that you have seems to be using percentages in margin-left.
<div class="container"><!-- container -->
<div class="row">
<ul>...
</div>
</div>
See: http://jsfiddle.net/uFwnU/
I am designing a fluid layout with twitter bootstrap but unfortunately there is some mistake in how i am approaching it.
Please advise where am i doing wrong. I have created a navbar div which contains navbar-inner and within that i have container. Within a container a row.
In a row i have 3 elements the project-name , the navigation bar and the login section.
On shrinking the page the project name stays in correct position, the navbar is hidden to show up only on click and the third the login section gets dislocated.
I can't understand why it is getting dis located.
I have uploaded the code on ---> http://jsfiddle.net/GgzgB/2/
but due to missing images the background is not shown.
PS: this is my first css attempt
<body>
<div class="navbar navbar-fixed-top">
<div id='cssmenu' class="navbar-inner">
<!--<div class="navbar-custom">-->
<div class="container">
<div class="row">
<div class="span2">
<!--<a 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>
</a>-->
<a class="brand" href="#">Project name</a>
</div><!--end of first col -span2-->
<div class="span7">
<div class="nav-collapse collapse">
<ul class="nav">
<li class='active '><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>Company</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div><!--end of nav-collapse collapse-->
</div><!--end of second col - span5-->
<div class="span3">
<div class="login">
<form class="form-signin">
<div class="row">
<div class="span1">
<div class="row">
<input type="text" class="input-header-small pull-left" placeholder="Username">
</div>
<div class="row">
<input type="password" class="input-header-small pull-left" placeholder="Password">
</div>
</div>
<div class="span1">
<div class="row">
<button type="submit" class="btn btn-success btn-medium pull-right">Sign in</button></div>
</div>
</div><!--end of inner 1st row-->
</form>
</div><!--end of login-->
</div><!-- end of span3-->
</div><!-- end of row -->
</div><!-- end of container -->
</div><!-- end of inner -->
</div><!-- end of navbar navbar-fixed-top -->
</body>
First off, if you are trying to create a fluid layout, you'd use row-fluid as opposed to just row.
Additionally, you're putting the login form in the same row as the project-name and navbar.
I'm not going to perfect this for you, but this gets you much closer by using row-fluid, and creating a new row after the navigation:
<body>
<div class="navbar navbar-fixed-top">
<div id='cssmenu' class="navbar-inner">
<div class="container">
<div class="row-fluid">
<div class="span2">
<a class="brand" href="#">Project name</a>
</div>
<div class="span7">
<div class="nav-collapse collapse">
<ul class="nav">
<li class='active '><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>Company</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div><!--end of nav-collapse collapse-->
</div><!--end of second col - span5-->
</div>
<div class="row-fluid">
<div class="span12">
<div class="login">
<form class="form-signin">
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<input type="text" class="input-header-small pull-left" placeholder="Username">
</div>
<div class="row-fluid">
<input type="password" class="input-header-small pull-left" placeholder="Password">
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<button type="submit" class="btn btn-success btn-medium pull-right">Sign in</button></div>
</div>
</div>
</div>
</form>
</div><!--end of login-->
</div><!-- end of span3-->
</div><!-- end of row -->
</div><!-- end of container -->
</div><!-- end of inner -->
</div><!-- end of navbar navbar-fixed-top -->
Often with CSS less is more, so I think you could start off with simplifying your code a bit by removing all the row/span definitions in the navbar, they aren't really necessary. Next, the Bootstrap documentation is quite good, so its always worth looking through them in detail to see if what you want has already been defined there.
From the documentation: "Align nav links, search form, or text, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction." Also, we can use the "navbar-form" class to layout the login form, rather than the grid classes. So lets pare the code down a bit, and then you can perhaps get closer to what you are after.
<body>
<div class="navbar navbar-fixed-top">
<div id='cssmenu' class="navbar-inner">
<div class="container">
<a 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>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class='active '><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>Company</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div><!--end of nav-collapse collapse-->
<div class="login pull-right">
<form class="form-signin navbar-form">
<input type="text" class="input-header-small pull-left" placeholder="Username">
<input type="password" class="input-header-small pull-left" placeholder="Password">
<button type="submit" class="btn btn-success btn-medium pull-right">Sign in</button></div>
</form>
</div><!--end of login-->
</div><!-- end of container -->
</div><!-- end of inner -->
</div><!-- end of navbar navbar-fixed-top -->
</body>
This may not be your final solution, but I think it would be a good starting point.