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.
Related
Firts of all i dont want to change responsive desing. I have 3 questons and thank you for your helps.
I need 2 lines in the button. 1st line text is "XXX Pump" and 2nd line is "P01" and the lines shouldnt mix.
When i give a very long text button is going bigger then normal size (see 5th button)
The space between the buttons are so much. I created a div for each button for responsive design. But i couldnt give less space.
<!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.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="index.css">
<title>S7-1200 WEB SERVER</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Test</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Manual Control <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-2">
<div class="col-lg-12">
<div class="hero-button text-center">
<a href="#" class="btn btn-large btn-danger">
<span style="font-size:smaller;">Pre Heating Pump</span>
PU01
</a>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="col-lg-12">
<div class="hero-button text-center">
<a href="#" class="btn btn-large btn-danger">
<span style="font-size:smaller;">Pre Heating Pump</span>
PU01
</a>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="col-lg-12">
<div class="hero-button text-center">
<a href="#" class="btn btn-large btn-danger">
<span style="font-size:smaller;">Pre Heating Pump</span>
PU01
</a>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="col-lg-12">
<div class="hero-button text-center">
<a href="#" class="btn btn-large btn-danger">
<span style="font-size:smaller;">Pre Heating Pump</span>
PU01
</a>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="col-lg-12">
<div class="hero-button text-center">
<a href="#" class="btn btn-large btn-danger">
<span style="font-size:smaller;">Pre Heassssssssssssssting Pump</span>
PU01
</a>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="col-lg-12">
<div class="hero-button text-center">
<a href="#" class="btn btn-large btn-danger">
<span style="font-size:smaller;">Pre Heating Pump</span>
PU01
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
For 1st question you can use .d-block class from display utilities as an alternative to <br> line break.
Example:
<a class="btn btn-primary">
<span class="d-block">Pre Heating Pump</span>
<span class="d-block">PU01</span>
</a>
I'm trying to get the "Banana Score" badge to float right, but to no avail. Does anyone know if this is even possible in Bootstrap 4.
I've tried all sorts of variations around flex, the best I had was a hack using columns, but this looks worse than the example below.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Customer
<span id="test" class="badge badge-secondary">Banana Score <span class="badge badge-light">4</span></span></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Without Css , using bootstrap html classes.
Header 5 (#exampleModalLabel) : add CSS class col-md-10 or w-100
adds:
col-md-10 = position: relative; width: 100%; min-height: 1px; padding-right: 15px; padding-left: 15px;
OR
w-100 = width: 100%;
span (#test) : add (2) CSS classes mt-1 float-right
adds:
mt-1 = margin-top: 1px;
float-right = float: right;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title col-md-10" id="exampleModalLabel">Customer
<span id="test" class="badge badge-secondary mt-1 float-right">Banana Score <span class="badge badge-light">4</span></span></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
No need to add any new style. Just add the bootstrap classes w-100 and float-right to the heading tag h5
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title w-100 float-right" id="exampleModalLabel">Customer
<span id="test" class="badge badge-secondary float-right">Banana Score <span class="badge badge-light">4</span></span></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
You need first to make the title width:100% then use float :
#exampleModalLabel {
width: 100%;
}
#test {
float: right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Customer
<span id="test" class="badge badge-secondary">Banana Score <span class="badge badge-light">4</span></span>
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Give h5 width:100% and float:right to banana element.
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})
#exampleModalLabel{
width:100%
}
.badge-secondary{
float:right;
margin-top:6px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">
<span>Customer</span>
<span id="test" class="badge badge-secondary">Banana Score <span class="badge badge-light">4</span></span>
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
modal-header is flex container already. Add
justify-content-end
how I can align button on the left? I am using bootswatch/Litera it is bootstrap 4 beta theme.
I already tried adding the float-left class on the button and putting it inside a div but the result is the same.
I added it on the modal footer.
<div class="modal-footer">
<div class="float-left">
<button type="button" class="btn btn-outline-primary btn-circle float-left">
<i class="fa fa-plus"></i>
</button>
</div>
<button type="button" class="btn btn-primary">Save</button>
</div>
<div class="modal-footer">
<div class="pull-left">
<button type="button" class="btn btn-outline-primary btn-circle pull-left">
<i class="fa fa-plus"></i>
</button>
</div>
<button type="button" class="btn btn-primary">Save</button>
You can add "pull-left" class instead of "float-left"
Try this. Add only this css for button align leftside. and click on demo modal button to check popup.
#myModal .modal-footer {
justify-content: space-between;
}
#myModal .modal-footer {
justify-content: space-between;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary btn-circle">
<i class="fa fa-plus"></i>
</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
Try This:
.modal-footer > .float-left {
width: 100%;
}
.modal-footer>.float-left {
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="modal-footer">
<div class="float-left">
<button type="button" class="btn btn-outline-primary btn-circle float-left">
<i class="fa fa-plus"></i>
</button>
</div>
<button type="button" class="btn btn-primary">Save</button>
</div>
you write simple CSS in your style
.modal-footer {
display: block;
-webkit-box-pack: inherit;
-webkit-justify-content: inherit;
-ms-flex-pack: inherit;
justify-content: inherit;
}
.btn-save {
align-self: right;
}
flow this html code :
<div class="modal-footer">
<div class="plus-button">
<button type="button" class="btn btn-outline-primary btn-circle float-left">
<i class="fa fa-plus"></i>
</button>
</div>
<button type="button" class="btn btn-primary float-right">Save</button>
</div>
I'm new to Bootstrap/CSS and I would like to know why every change on Bootstrap class works only with luck. This happens to me so much so any tip can be great.
example:
Failing to have drop-down on the left side and some text in the center- on the same line.
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-info">
<div class="dropdown" style="align-content: center">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
<span class="caret"></span></button>
</div>
<div class="text-left">Contacts</div>
</div>
.center {
float: none;
margin-left: 500px;
display: inline-block;
}
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-info">
<div class="dropdown" style="align-content: center">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
<span class="caret"></span></button> <h1 class="span7 center"> Contacts </h1>
</div>
</div>
<div class="panel panel-info">
<div class="dropdown" style="align-content: center">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
<span class="caret align-left"></span>Contacts</button>
</div>
Are you asking like this? Above code when executed give the result as a button that has drop-down on the left and some text. Please check and revert.
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 -->