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>
Related
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>
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/
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;
}
This question already has answers here:
Space between buttons with bootstrap class
(4 answers)
Closed 5 years ago.
I would like to put some space between rows with buttons (three buttons in each row). In my example each row is inside div element marked with bootstrap class btn-toolbar.
I know I can solve this problem with using inline styling and put parameter like margin-top or writing custom css class but I am wondering if there is some bootstrap class for this?
Code:
<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>
<br/>
<button type="button" class="btn btn-primary" style="margin-right:30px;">Nazaj</button>
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-arrow-up"></span></button>
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-arrow-down"></span></button>
<input type="text" class="form-control" style="width:50px;display:inline-block;position:relative;top:1px;"/><h2 style="display:inline-block;position:relative;top:5px;padding-left:3px;">/</h2>
<input type="text" class="form-control" style="width:50px;display:inline-block;position:relative;top:1px;"/>
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-arrow-up"></span></button>
<button type="button" class="btn btn-primary" style="margin-right:30px;"><span class="glyphicon glyphicon-arrow-down" ></span></button>
<button type="button" class="btn btn-success">Shrani</button>
<br/>
<br/>
<div class="btn-toolbar">
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
</div>
<div class="btn-toolbar">
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
</div>
<div class="btn-toolbar">
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
</div>
you can use form-group to give space of 15px to give vertical space.
If you want to give space between col-md-column-* use col-md-offset-*
<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>
<br/>
<button type="button" class="btn btn-primary" style="margin-right:30px;">Nazaj</button>
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-arrow-up"></span></button>
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-arrow-down"></span></button>
<input type="text" class="form-control" style="width:50px;display:inline-block;position:relative;top:1px;"/><h2 style="display:inline-block;position:relative;top:5px;padding-left:3px;">/</h2>
<input type="text" class="form-control" style="width:50px;display:inline-block;position:relative;top:1px;"/>
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-arrow-up"></span></button>
<button type="button" class="btn btn-primary" style="margin-right:30px;"><span class="glyphicon glyphicon-arrow-down" ></span></button>
<button type="button" class="btn btn-success">Shrani</button>
<br/>
<br/>
<div class="btn-toolbar form-group">
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
</div>
<div class="btn-toolbar form-group">
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
</div>
<div class="btn-toolbar form-group">
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
</div>
I don't understand why this is not inline:
http://jsfiddle.net/dugfresh/dUkz4/
<div class="btn-group" data-toggle="buttons-checkbox">
<div class="row">
<div class="span7"><button type="button" class="btn btn-primary">Sun</button></div>
<div class="span7"><button type="button" class="btn btn-primary">Mon</button></div>
<div class="span7"><button type="button" class="btn btn-primary">Tue</button></div>
<div class="span7"><button type="button" class="btn btn-primary">Wed</button></div>
<div class="span7"><button type="button" class="btn btn-primary">Thu</button></div>
<div class="span7"><button type="button" class="btn btn-primary">Fri</button></div>
<div class="span7"><button type="button" class="btn btn-primary">Sat</button></div>
</div>
</div>
Is it what you're looking for ??
fiddle : http://jsfiddle.net/dUkz4/3/
html :
<div class="btn-group" data-toggle="buttons-checkbox">
<button type="button" class="btn btn-primary">Sun</button>
<button type="button" class="btn btn-primary">Mon</button>
<button type="button" class="btn btn-primary">Tue</button>
<button type="button" class="btn btn-primary">Wed</button>
<button type="button" class="btn btn-primary">Thu</button>
<button type="button" class="btn btn-primary">Fri</button>
<button type="button" class="btn btn-primary">Sat</button>
</div>
doc : http://getbootstrap.com/2.3.2/components.html#buttonGroups
UPDATE After comment:
You can customize the css for the space :
.btn-group .btn{
margin-right:5px;
}
And make something like
<div class="btn-group row-fluid" data-toggle="buttons-checkbox">
<button type="button" class="btn btn-primary span1">Sun</button>
<button type="button" class="btn btn-primary span1">Mon</button>
<button type="button" class="btn btn-primary span1">Tue</button>
<button type="button" class="btn btn-primary span1">Wed</button>
<button type="button" class="btn btn-primary span1">Thu</button>
<button type="button" class="btn btn-primary span1">Fri</button>
<button type="button" class="btn btn-primary span1">Sat</button>
</div>
Here is the result (responsive) : http://jsfiddle.net/dUkz4/4/