Bootstrap button groups with separators - css

How to get Bootstrap button groups with a border line separator between each button?
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
</div>
https://getbootstrap.com/docs/4.6/components/button-group
The #padaleiana solution is working fine! I used a btn-light disabled button as separator.


Workaround:
Create a button with mr-0, ml-0, pl-0 and pr-0 classes (margin and padding left and right = 0), and with disabled attribute (otherwise the "separator" will not appear!)
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary mr-0 ml-0 pr-0 pl-0" disabled></button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary mr-0 ml-0 pr-0 pl-0" disabled></button>
<button type="button" class="btn btn-secondary">3</button>
</div>


An alternative to padaleiana's answer is the following, which is not using HTML button tags. Thus, it avoids problems, when jQuery (or other Javascripts) iterates buttons:
<div class="alert alert-dark m-0 px-0"></div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-secondary">1</button>
<div class="alert alert-dark m-0 px-0"></div>
<button type="button" class="btn btn-secondary">2</button>
<div class="alert alert-dark m-0 px-0"></div>
<button type="button" class="btn btn-secondary">3</button>
</div>

Related

How do I make the inline form be in the same line as the buttons?

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>

Clickable element in div with shadow: inset

I would like to have clickable/focusable elements in a div, which has an inset shadow (the .calendar in this example): https://jsfiddle.net/axel50397/846ostv5/9/
<div class="calendar">
<div class="card-deck p-2 w-100">
<div class="card mx-2">
<div class="card-header">
2020-04-01
</div>
<div class="card-body">
<button type="button" class="btn btn-sm btn-primary btn-block">09:00</button>
<button type="button" class="btn btn-sm btn-primary btn-block">10:00</button>
<button type="button" class="btn btn-sm btn-primary btn-block">11:00</button>
<button type="button" class="btn btn-sm btn-primary btn-block">12:00</button>
<button type="button" class="btn btn-sm btn-primary btn-block">13:00</button>
<button type="button" class="btn btn-sm btn-primary btn-block">14:00</button>
<button type="button" class="btn btn-sm btn-primary btn-block">15:00</button>
</div>
</div>
</div>
</div>
Based on my small CSS experience, it seems impossible because the .calendar must be above its content… If it's not possible in CSS, I'm open to suggestions if any.

Remove below CSS, you added. Now it is clickable and focusable buttons.
.calendar .card {
z-index: -1;
}
https://jsfiddle.net/Lqv4fkjy/

How to remove duplicate borders in group of elements?

I am not sure this is doable in CSS only. How can I apply CSS roles to the .btn s only when there are another group of btn-group in a container?
Like I would like to remove the bottom borders of first group .btns when there are 2 groups like Group 2 and even top border when they are in group 3? without changing anything in group 1.
body {
padding-top: 20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<h4> Group 1</h4>
<div class="container">
<div class="col-xs-7">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
<h4> Group 2</h4>
<div class="container" style="margin-top:10px;">
<div class="col-xs-7">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
<h4> Group 3</h4>
<div class="container" style="margin-top:10px;">
<div class="col-xs-7">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>

Here is an alternative to the current answer. I am using the ~ selector to select any element with the class .btn-group that is after any element with the class .btn-group and then removing the border-top from the child buttons.
body {
padding-top: 20px;
}
.btn-group ~ .btn-group button {
border-top:none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<h4> Group 1</h4>
<div class="container">
<div class="col-xs-7">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
<h4> Group 2</h4>
<div class="container" style="margin-top:10px;">
<div class="col-xs-7">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
<h4> Group 3</h4>
<div class="container" style="margin-top:10px;">
<div class="col-xs-7">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>

You can do something like:
.btn-group + .btn-group {
margin-top: -1px;
}

Multi-line button groups in bootstrap 4

In boostrap 4, it is possible to have button groups.
Horizontals:
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
and verticals, using the class btn-group-vertical.
Is it possible to obtain in a nice way a 3x3 button array, such as in a numerical pad?

You could nest the btn-group inside btn-group vertical and adjust the borders using the utility classes...
<div class="btn-group-vertical" role="group">
<div class="btn-group">
<button type="button" class="btn btn-secondary border-bottom-0 rounded-0">1</button>
<button type="button" class="btn btn-secondary border-bottom-0">2</button>
<button type="button" class="btn btn-secondary border-bottom-0 rounded-0">3</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary border-bottom-0 rounded-0">4</button>
<button type="button" class="btn btn-secondary border-bottom-0">5</button>
<button type="button" class="btn btn-secondary border-bottom-0 rounded-0">6</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary rounded-0">7</button>
<button type="button" class="btn btn-secondary">8</button>
<button type="button" class="btn btn-secondary rounded-0">9</button>
</div>
</div>
https://www.codeply.com/go/yZprmIVhl8

How about just using multiple button groups?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<div class="btn-group" role="group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
</div><br>
<div class="btn-group" role="group">
<button type="button" class="btn btn-secondary">4</button>
<button type="button" class="btn btn-secondary">5</button>
<button type="button" class="btn btn-secondary">6</button>
</div><br>
<div class="btn-group" role="group">
<button type="button" class="btn btn-secondary">7</button>
<button type="button" class="btn btn-secondary">8</button>
<button type="button" class="btn btn-secondary">9</button>
</div>

Trouble pulling button in btn-group to right

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

Resources