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/
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'm using Bootstrap outline buttons.
How I can keep the "active" button WITH BACKGROUND COLOR when clicked?
Right now, this only happens on mouse hover.
HTML
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group-vertical btn-group-toggle d-flex align-items-center justify-content-center" data-toggle="buttons">
<button type="button" class="btn btn-outline-dark btn-sm btn-block m-1 p-1" id="btn1" data-toggle="button" aria-pressed="false">
btn1
</button>
<button type="button" class="btn btn-outline-dark btn-sm btn-block m-0 p-1" id="btn2" data-toggle="button" aria-pressed="false">
btn2
</button>
<button type="button" class="btn btn-outline-dark btn-sm btn-block m-1 p-1" id="btn3" data-toggle="button" aria-pressed="false">
btn3
</button>
<button type="button" class="btn btn-outline-dark btn-sm btn-block m-0 p-1" id="btn4" data-toggle="button" aria-pressed="false">
btn4
</button>
</div>
JSFidle
https://jsfiddle.net/28c0g5Lf/
Add this code for the focused-clicked buttons
button:focus{
color: #fff;
background-color: #343a40;
border-color: #343a40;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group-vertical btn-group-toggle d-flex align-items-center justify-content-center" data-toggle="buttons">
<button type="button" class="btn btn-outline-dark btn-sm btn-block m-1 p-1" id="btn1" data-toggle="button" aria-pressed="false">
btn1
</button>
<button type="button" class="btn btn-outline-dark btn-sm btn-block m-0 p-1" id="btn2" data-toggle="button" aria-pressed="false">
btn2
</button>
<button type="button" class="btn btn-outline-dark btn-sm btn-block m-1 p-1" id="btn3" data-toggle="button" aria-pressed="false">
btn3
</button>
<button type="button" class="btn btn-outline-dark btn-sm btn-block m-0 p-1" id="btn4" data-toggle="button" aria-pressed="false">
btn4
</button>
</div>
Working example
In case anyone needs it...
I followed Tzimpo suggestion along with this tutorial for the JavaScript part and got working...
HTML
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group-vertical btn-group-toggle d-flex align-items-center justify-content-center" id="buttonsDiv" data-toggle="buttons">
<button type="button" class="btn btn-outline-dark btn-sm btn-block m-1 p-1" id="btn1" data-toggle="button" aria-pressed="false">
btn1
</button>
<button type="button" class="btn btn-outline-dark btn-sm btn-block m-0 p-1" id="btn2" data-toggle="button" aria-pressed="false">
btn2
</button>
<button type="button" class="btn btn-outline-dark btn-sm btn-block m-1 p-1" id="btn3" data-toggle="button" aria-pressed="false">
btn3
</button>
<button type="button" class="btn btn-outline-dark btn-sm btn-block m-0 p-1" id="btn4" data-toggle="button" aria-pressed="false">
btn4
</button>
</div>
CSS
button:focus{
color: #fff;
background-color: #343a40;
border-color: #343a40;
}
JS
// Get the container element
var btnContainer = document.getElementById("buttonsDiv");
// Get all buttons with class="btn" inside the container
var btns = btnContainer.getElementsByClassName("btn");
// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
// If there's no active class
if (current.length > 0) {
current[0].className = current[0].className.replace(" active", "");
}
// Add the active class to the current/clicked button
this.className += " active";
});
}
Working example
I have the problem with center all button in each col-md-4:
<div class="row position-relative mt-2">
<div class="col-md-4 center-block">
<div class="center-block align-to-bottom">
<div class="btn-group-vertical">
<p>
<button class="btn btn-info btn-sm btn-block" type="button">
button
</button>
</p>
<p>
<button class="btn btn-warning btn-sm btn-block" type="button">
button
</button>
</p>
</div>
</div>
</div>
<div class="col-md-4 center-block">
<div class="btn-group-vertical">
<p>
<button class="btn btn-info btn-sm btn-block" type="button">
button
</button>
</p>
<p>
<button class="btn btn-info btn-sm btn-block" type="button">
button
</button>
</p>
<p>
<button class="btn btn-warning btn-sm btn-block" type="button">
button
</button>
</p>
</div>
</div>
<div class="col-md-4 center-block">
<p>
<button class="btn btn-success btn-sm btn-block" type="button">
button
</button>
</p>
</div>
</div>
Also second question -> I uses also w-100, h-85... But it is no working. I am also looking for solution to set up relative size of buttons.
To horizontally align a button you can just add the class text-center to your parent column.
I also removed the p tags and instead added the margin to the button itself with the class mb-2
I did remove a lot of your classes too as they didn't seem to be Bootstrap 4 classes. If these are needed just add them back where you think neccessary.
Also rather than making your button a block which gives it the full width of your parent, I just added another row and put each button in its own full width column which will act as the block.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row mt-2">
<div class="col-md-4 text-center">
<div class="row">
<div class="col-12 mb-2">
<button class="btn btn-info btn-sm" type="button">
Button
</button>
</div>
<div class="col-12 mb-2">
<button class="btn btn-warning btn-sm" type="button">
Button
</button>
</div>
<div class="col-12 mb-2">
<button class="btn btn-warning btn-sm" type="button">
Button
</button>
</div>
</div>
</div>
<div class="col-md-4 text-center">
<div class="row">
<div class="col-12 mb-2">
<button class="btn btn-info btn-sm" type="button">
Button
</button>
</div>
<div class="col-12 mb-2">
<button class="btn btn-info btn-sm" type="button">
Button
</button>
</div>
<div class="col-12 mb-2">
<button class="btn btn-warning btn-sm" type="button">
Button
</button>
</div>
</div>
</div>
<div class="col-md-4 text-center">
<button class="btn btn-success btn-sm" type="button">
Button
</button>
</div>
</div>
I hope this solves your issues, let me know if it's not quite what you were looking for.
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;
}
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/