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
Related
Sorry, I have googled forever and I don't find the answer:
I have downloaded a css-file from Bootswatch and I have put it in my www directory where I have my app.R. Now I want to style my widgets to look like the different options presented at Bootswatch.
For example, to style an actionButton in the secondary button style, I put:
actionButton(
inputId = "action",
class = "btn-success")
How do I apply the more complicated styling source code? For example, for the selectInput widget the source code at Bootswatch is:
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-primary">Primary</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1" style="">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-success">Success</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop2" type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop2" style="">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-info">Info</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop3" type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop3" style="">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-danger">Danger</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop4" type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop4" style="">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
This corresponds to four different styling options for selectInput. If I want to apply the success styling of the above code to a selectInput, where do I put it: As options to the relevant selectInput? In some header or tags for Shiny? Somewhere else?
I have already put the:
tags$head(tags$link(rel = "stylesheet", type = "text/css", href = "mytheme.css"))
In my R-script, but I don't know what to do next. Trying to read up on CSS now.
Edit: An example. My radio buttons right now look like:
I want them to look like:
I'm stupid, just use buttons from here:
https://shinyapps.dreamrs.fr/shinyWidgets/
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>
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>
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