I have set of buttons aligned fine on desktop but on mobile, when buttons wraps, second row sticks with first set of buttons and starts a little inside.
Please see following fiddle for the problem;
https://jsfiddle.net/u4dq9x38/
HTML:
<div role="toolbar" class="btn-toolbar bottom-buffer">
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
</div>
Is there any way to fix this?
Remove the btn-toolbar class, seems like it adds a space before the first element, so not designed to work for wrapping
You may need to add a bottom and right margin to each button individually
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.btn-toolbar>.btn:nth-child(1){
margin-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div role="toolbar" class="btn-toolbar bottom-buffer">
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
</div>
Related
I am making an app with Bootstrap 4. I have 3 buttons and an inline form, and I want the inline form to be in the same line as the buttons. Currently with this code the form is below the buttons. How can I make everything be in the same line?
<button type="button" class="mb-2 mr-2 btn btn-primary">
<span>Agregar</span>
</button>
<div class="d-inline dropdown">
<button aria-haspopup="true" aria-expanded="false" id="menuUtilidades" type="button" class="mr-2 mb-2 dropdown-toggle btn btn-primary">Utilidades</button>
</div>
<div class="d-inline dropdown">
<button aria-haspopup="true" aria-expanded="false" id="menuReportes" type="button" class="mb-2 dropdown-toggle btn btn-primary">Reportes</button>
</div>
<form class="mb-2 form-inline">
<!-- form that should be in same line -->
</form>
Add d-inline to your form
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container">
<button type="button" class="mb-2 mr-2 btn btn-primary">
<span>Agregar</span>
</button>
<div class="d-inline dropdown">
<button aria-haspopup="true" aria-expanded="false" id="menuUtilidades" type="button"
class="mr-2 mb-2 dropdown-toggle btn btn-primary">Utilidades</button>
</div>
<div class="d-inline dropdown">
<button aria-haspopup="true" aria-expanded="false" id="menuReportes" type="button"
class="mb-2 dropdown-toggle btn btn-primary">Reportes</button>
</div>
<form class="mb-2 form-inline d-inline">
my form
</form>
</div>
im a little stuck as to how to center align a button group i have:
<section>
<div class="d-inline mx-auto">
<a class="btn btn-outline-primary" href="#">Home</a>
<a class="btn btn-outline-primary" href="#">Traffic</a>
<a class="btn btn-outline-primary" href="#">MAC Monitoring</a>
<a class="btn btn-outline-primary" href="#">Alert Logging</a>
<a class="btn btn-outline-primary" href="#">Diameter Server</a>
<a class="btn btn-outline-primary" href="#">Maintenance Mode</a>
</div>
</section>
I've tried to add d-inline and mx-auto to it but it doesnt work. Im not that familiar with the library so could someone please point me in the right direction?
Just use margin:auto its working with bootstrap 4
.center{margin:auto;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<section class="row">
<div class="center">
<a class="btn btn-outline-primary" href="#">Home</a>
<a class="btn btn-outline-primary" href="#">Traffic</a>
<a class="btn btn-outline-primary" href="#">MAC Monitoring</a>
<a class="btn btn-outline-primary" href="#">Alert Logging</a>
<a class="btn btn-outline-primary" href="#">Diameter Server</a>
<a class="btn btn-outline-primary" href="#">Maintenance Mode</a>
</div>
</section>
or you can use mx-auto in this way..
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<section class="row">
<div class="mx-auto">
<a class="btn btn-outline-primary" href="#">Home</a>
<a class="btn btn-outline-primary" href="#">Traffic</a>
<a class="btn btn-outline-primary" href="#">MAC Monitoring</a>
<a class="btn btn-outline-primary" href="#">Alert Logging</a>
<a class="btn btn-outline-primary" href="#">Diameter Server</a>
<a class="btn btn-outline-primary" href="#">Maintenance Mode</a>
</div>
</section>
add the 2 classes mx-auto d-block to the button
<button class="btn btn-primary mx-auto d-block">My Button</button>
this worked for me when the button was in a card-body div.
By default bootstrap give text-center class. Please add this. Extra css or class haven't needed.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<section>
<div class="text-center">
<a class="btn btn-outline-primary" href="#">Home</a>
<a class="btn btn-outline-primary" href="#">Traffic</a>
<a class="btn btn-outline-primary" href="#">MAC Monitoring</a>
<a class="btn btn-outline-primary" href="#">Alert Logging</a>
<a class="btn btn-outline-primary" href="#">Diameter Server</a>
<a class="btn btn-outline-primary" href="#">Maintenance Mode</a>
</div>
</section>
Insert class center :
<div class="d-inline mx-auto center">
And:
.d-inline.mx-auto.center {
text-align: center!important;
display:block!important;
}
.d-inline.mx-auto.center {
text-align:center!important;
display:block!important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<section>
<div class="d-inline mx-auto center">
<a class="btn btn-outline-primary" href="#">Home</a>
<a class="btn btn-outline-primary" href="#">Traffic</a>
<a class="btn btn-outline-primary" href="#">MAC Monitoring</a>
<a class="btn btn-outline-primary" href="#">Alert Logging</a>
<a class="btn btn-outline-primary" href="#">Diameter Server</a>
<a class="btn btn-outline-primary" href="#">Maintenance Mode</a>
</div>
</section>
Different way to also try it, to parent element text-align: center
example:
.center { text-align: center; }
TRY THIS CSS
<section>
<div class="center">
<a class="btn btn-outline-primary" href="#">Home</a>
<a class="btn btn-outline-primary" href="#">Traffic</a>
<a class="btn btn-outline-primary" href="#">MAC Monitoring</a>
<a class="btn btn-outline-primary" href="#">Alert Logging</a>
<a class="btn btn-outline-primary" href="#">Diameter Server</a>
<a class="btn btn-outline-primary" href="#">Maintenance Mode</a>
</div>
</section>
Simple way to do that:
just add: style="margin-left: 45%;"
<section>
<div class="d-inline mx-auto" style="margin-left: 45%;">
<a class="btn btn-outline-primary" href="#">Home</a>
<a class="btn btn-outline-primary" href="#">Traffic</a>
<a class="btn btn-outline-primary" href="#">MAC Monitoring</a>
<a class="btn btn-outline-primary" href="#">Alert Logging</a>
<a class="btn btn-outline-primary" href="#">Diameter Server</a>
<a class="btn btn-outline-primary" href="#">Maintenance Mode</a>
</div>
</section>
Making a quick landing page and wanted the button centered. Adding a div was a simple solution for me :)
Learn more
My page in progress
Using bootstrap 3 I am trying to produce a row of labeled dropdown menus with a final query button. However the buttons are floating to the left of the labels due to the btn-toolbar CSS. Changing the btn-toolbar to float right produces a reversed order of query button and choices with the labels in the right position.
<div class="btn-toolbar row">
<div class="btn-group">
<label class="btn-label">Topic:</label>
<button id="choose_topic_title" type="button" class="btn btn-default">Select</button>
<button id="choose_topic" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul id="choose_topic_menu" class="dropdown-menu">
<li>all</li>
<li>weather</li>
<li>sports</li>
<li>business</li>
<li>news</li>
<li>arts</li>
<li>science</li>
</ul>
</div>
<div class="btn-group">
<label for="choose_lang_title" class="control-label">Language:</label>
<button id="choose_lang_title" type="button" class="btn btn-default">Select</button>
<button id="choose_lang" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul id="choose_lang_menu" class="dropdown-menu">
<li>en-us</li>
<li>es-us</li>
</ul>
</div>
<div class="btn-group">
<a href="#">
<button id="query_data" type="button" class="btn btn-primary">Query</button>
</a>
</div>
</div>
Does bootstrap have a simple way to position a horizontal row of labeled dropdown menus?
Here is a jsfiddle demonstrating the issue: https://jsfiddle.net/cgalles/nqmqka2e/4/
You can change float of your labels (or you can add pull-left class to labels).
.btn-toolbar .btn-label {
float: left;
}
JSFIDDLE
I have the following code to display some buttons and dropdown menus.
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="Toolbar Group">
<button type="button" class="btn btn-default as-btn-text as-add-btn">Add</button>
<button type="button" class="btn btn-default as-btn-text as-delete-btn">Delete</button>
<button type="button" class="btn btn-default dropdown-toggle as-btn-text as-conf-btn" data-toggle="dropdown" aria-expanded="false">Configuration <span class="caret"></span>
</button>
<ul class="dropdown-menu as-toolbar-dropdown" role="menu">
<li>Enable
</li>
<li>Disable
</li>
</ul>
</div>
<div class="button-group pull-right">
<button type="button" class="btn btn-default as-btn-text as-refresh-btn"></button>
</div>
</div>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="Toolbar Group">
<button type="button" class="btn btn-default dropdown-toggle as-btn-text as-conf-btn" data-toggle="dropdown" aria-expanded="false">Configuration <span class="caret"></span>
</button>
<ul class="dropdown-menu as-toolbar-dropdown" role="menu">
<li>
<button id="btnEnable" type="submit" name="command" value="Enable"><span>Enable</span>
</button>
</li>
<li>
<button id="btnDisable" type="submit" name="command" value="Disable"><span>Disable</span>
</button>
</li>
</ul>
</div>
</div>
It works okay except one of the menus doesn't appear under the dropdown.
Fiddle here
Any ideas would be appreciated.
Looks like you are not using latest version of JQuery. Please update JQuery and use Bootstrap library to make this work.
In you fiddle, choose jQuery 2.1.0 and select Bootstrap 3.2.0 option.
Looks like I had to put the dropdown buttons into their own btn-group.
Fiddle here
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="Toolbar Group">
<button type="button" class="btn btn-default as-btn-text as-add-btn">Add</button>
<button type="button" class="btn btn-default as-btn-text as-delete-btn">Delete</button>
<div class="btn-group" role="group" aria-label="Dropdown Group">
<button type="button" class="btn btn-default dropdown-toggle as-btn-text as-conf-btn" data-toggle="dropdown" aria-expanded="false">Configuration <span class="caret"></span>
</button>
<ul class="dropdown-menu as-toolbar-dropdown" role="menu">
<li>Enable
</li>
<li>Disable
</li>
</ul>
</div>
</div>
<div class="button-group pull-right">
<button type="button" class="btn btn-default as-btn-text as-refresh-btn"></button>
</div>
</div>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="Toolbar Group">
<button type="button" class="btn btn-default dropdown-toggle as-btn-text as-conf-btn" data-toggle="dropdown" aria-expanded="false">Configuration <span class="caret"></span>
</button>
<ul class="dropdown-menu as-toolbar-dropdown" role="menu">
<li>
<button id="btnEnable" type="submit" name="command" value="Enable"><span>Enable</span>
</button>
</li>
<li>
<button id="btnDisable" type="submit" name="command" value="Disable"><span>Disable</span>
</button>
</li>
</ul>
</div>
</div>
I have the following code which displays some buttons:
Fiddle
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="Toolbar Group">
<button type="button" class="btn btn-default as-btn-text as-add-btn">Add</button>
<button type="button" class="btn btn-default as-btn-text as-delete-btn">Delete</button>
<button type="button" class="btn btn-default dropdown-toggle as-btn-text as-conf-btn" data-toggle="dropdown" aria-expanded="false">Configuration <span class="caret"></span>
</button>
<ul class="dropdown-menu as-toolbar-dropdown" role="menu">
<li>A
</li>
<li>B
</li>
</ul>
<button type="button" class="btn btn-default as-btn-text as-refresh-btn">X</button>
</div>
</div>
I want to pull the "X" to the far right of the group. I have tried .pull-right, float:right but neither seem to work.
Any ideas appreciated!
I would put the close ("X") button in its own .button-group and pull the group to the right:
<!-- previous button location -->
</div><!-- close the existing group -->
<div class="button-group pull-right">
<!-- new button location -->
<button type="button" class="btn btn-default as-btn-text as-refresh-btn">X</button>
</div>
</div><!-- end .btn-toolbar -->
Here's an update to your fiddle.
The advantage to this approach is that you get the correct button rounding based on the .button-group rules and you don't need to alter or override existing Bootstrap framework CSS.
Updated HTML
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div id ="b"class="btn-group" role="group" aria-label="Toolbar Group">
<button type="button" class="btn btn-default as-btn-text as-add-btn">Add</button>
<button type="button" class="btn btn-default as-btn-text as-delete-btn">Delete</button>
<button type="button" class="btn btn-default dropdown-toggle as-btn-text as-conf-btn" data-toggle="dropdown" aria-expanded="false">
Configuration
<span class="caret"></span>
</button>
<ul class="dropdown-menu as-toolbar-dropdown" role="menu">
<li>A</li>
<li>B</li>
</ul>
<button type="button" id="right" class="btn btn-default as-btn-text as-refresh-btn">X</button>
</div>
</div>
Updated CSS:
#b{
width:100%;
}
#right{
float:right;
}
Working Example:http://jsfiddle.net/tmurmvnx/
In bootstrap 4 you can use the strong text class, check this simple example:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="btn-group btn-group-lg float-right" role="group">
<button type="submit" class="btn btn-dark">
Btn 1
</button>
<button type="submit" class="btn btn-primary">
Btn 2
</button>
</div>
For more information check this documentation:
https://getbootstrap.com/docs/4.0/utilities/float/
https://getbootstrap.com/docs/4.0/utilities/text/#text-alignment