I'd like to create a vertical button group, containing a horizontal button group, and a few buttons inside. My attempt looks like this:
<div class="btn-group-vertical">
<div class="btn-group">
<button type="button" class="btn btn-primary" style="width : 60%">Row 1.1</button>
<button type="button" class="btn btn-primary" style="width : 40%">Row 1.2</button>
</div>
<button type="button" class="btn btn-primary">Row 2</button>
<button type="button" class="btn btn-primary">Row 3</button>
</div>
I want button Row 1.1 and Row 1.2 to be in one row.
Enclose your button group in a row class:
<div class="row">
<div class="btn-group">
<button type="button" class="btn btn-primary" style="width : 60%">Row 1.1</button>
<button type="button" class="btn btn-primary" style="width : 40%">Row 1.2</button>
</div>
</div>
Check the Codepen. You might wanna change the width/border the way you want it.
EDIT
As for the buttons not being rounded, here's the class responsible for it, you can change it:
.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
border-radius: 0;
}
From bootstrap.css, the btn class has a border-radius: 4px :
.btn {
...
border: 1px solid transparent;
border-radius: 4px;
}
You can either remove all the radius or change the second button to have the same border-radius
New Codepen
Related
<button class="btn btn-default">Click me</button>
I want to alter this button by reducing it's padding to 0px, so I added an extra class no-padding in style.css
.no-padding {
padding-left: 0;
padding-right: 0;
}
and called it like
<button class="btn btn-default no-padding">Click me</button>
But still I'm getting the same class
and If I use inline style statement, it works perfectly, but I don't want to do it in that way
Thanks!!
for that you need to know specificity concept of CSS
you can do like this
button.no-padding {
padding-left: 0;
padding-rigt: 0;
}
and your CSS works fine. You see difference in below snippet
button.no-padding {
padding-left: 0;
padding-right: 0;
}
.no-padding1 {
padding-left: 0;
padding-right: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<button class="btn btn-default no-padding">Click me</button>
<button class="btn btn-default no-padding1">Click me</button>
You can use Bootstrap padding classes.
1 > px : padding at left and right. 2 > py : padding at top and
botton.
See more examples given below
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
Your Button as it is :
<button class="btn btn-default ">Click me</button>
<br/>
<br/>
Button with px class :
<button class="btn btn-primary px-0">Click me</button>
<br/>
<br/>
Button with py class
<button class="btn btn-warning py-0">Click me</button>
<br/>
<br/>
Button with px and py class :
<button class="btn btn-success px-0 py-0">Click me</button>
<br/>
<br/>
Button with pl class
<button class="btn btn-danger pl-0">Click me</button>
<br/>
<br/>
Button with pr class :
<button class="btn btn-success pr-0">Click me</button>
I am using bootstrap 3. I want to change button color when I click on button.I mean button should be in different color when it is selected. How can I do this using css?
My codes are :
<div class="col-sm-12" id="">
<button type="submit" class="btn btn-warning" id="1">Button1</button>
<button type="submit" class="btn btn-warning" id="2">Button2</button>
</div>
CSS has different pseudo selector by which you can achieve such effect. In your case you can use
:active : if you want background color only when the button is clicked and don't want to persist.
:focus: if you want background color untill the focus is on the button.
button:active{
background:olive;
}
and
button:focus{
background:olive;
}
JsFiddle Example
P.S.: Please don't give the number in Id attribute of html elements.
CSS has many pseudo selector like, :active, :hover, :focus so you can use.
.btn{
background: #ccc;
} .btn:focus{
background: red;
}
<div class="col-sm-12" id="my_styles">
<button type="submit" class="btn btn-warning" id="1">Button1</button>
<button type="submit" class="btn btn-warning" id="2">Button2</button>
</div>
JsFiddle
HTML--
<div class="col-sm-12" id="my_styles">
<button type="submit" class="btn btn-warning" id="1">Button1</button>
<button type="submit" class="btn btn-warning" id="2">Button2</button>
</div>
css--
.active{
background:red;
}
button.btn:active{
background:red;
}
jQuery--
jQuery("#my_styles .btn").click(function(){
jQuery("#my_styles .btn").removeClass('active');
jQuery(this).toggleClass('active');
});
view the live demo on jsfiddle
I have a button group containing 10 buttons. Under certain screen widths (responsive) I hide some of these buttons with media queries.
The problem is that if I hide the last button the new last button's edges do not become rounded.
It's a difficult problem to describe, but very easy to show in a Fiddle.
My question: how can I add the rounded corners to the last visible button in the button group, rather than simply the last button, as it currently is.
Code from Fiddle below, as per SO's rules:
<div class="btn-group" id="sortBtns" role="group">
<button type="button" class="btn btn-default">First</button>
<button type="button" class="btn btn-default">Second</button>
<button type="button" class="btn btn-default">Third</button>
<button type="button" class="btn btn-default">Fourth</button>
<button type="button" class="btn btn-default">Fifth</button>
<button type="button" class="btn btn-default">Sixth</button>
</div>
<div class="btn-group" id="sortBtns" role="group">
<button type="button" class="btn btn-default">First</button>
<button type="button" class="btn btn-default">Second</button>
<button type="button" class="btn btn-default">Third</button>
<button type="button" class="btn btn-default">Fourth</button>
<button type="button" class="btn btn-default">Fifth</button>
<button type="button" class="btn btn-default" style="display:none;">Sixth</button>
</div>
Note the lack of rounded corners on 'fifth' in the second button group.
I can do this using JavaScript by adding a new class to the last visible element, but I'd rather not. Is there a cleaner CSS-only solution?
If you don't mind adding a dependency, I recommend AngularJS' ng-if. It comes in handy when using css selectors that rely on an element's position within the DOM, such as the :first-child or :last-child pseudo-classes. It will remove the element from the DOM and allow you to achieve your goal.
Here's a solution using jQuery:
$('.btn-group').has('.btn:hidden').find('.btn').css('border-radius', 0);
$('.btn-group').has('.btn:hidden').find('.btn:visible:first').css({
'border-top-left-radius': '3px',
'border-bottom-left-radius': '3px',
});
$('.btn-group').has('.btn:hidden').find('.btn:visible:last').css({
'border-top-right-radius': '3px',
'border-bottom-right-radius': '3px',
});
For each button group with hidden buttons, this will remove the border radii for all buttons within, and then add back border radii for the first and last visible buttons.
OP's Fiddle with solution
One option is to simply duplicate the code and add an hidden-xs class the first code block and visible-xs to the other code block.
Like this:
<div class="btn-group hidden-xs" id="sortBtns" role="group">
<button type="button" class="btn btn-default">First</button>
<button type="button" class="btn btn-default">Second</button>
<button type="button" class="btn btn-default">Third</button>
<button type="button" class="btn btn-default">Fourth</button>
<button type="button" class="btn btn-default">Fifth</button>
<button type="button" class="btn btn-default">Sixth</button>
</div>
<div class="btn-group visible-xs" id="sortBtns2" role="group">
<button type="button" class="btn btn-default">First</button>
<button type="button" class="btn btn-default">Fifth</button>
<button type="button" class="btn btn-default">Sixth</button>
</div>
Another option is to apply the css rule to the edgy element:
.edgy-right-element {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
In Chrome/Safari my icon within a bootstrap button looks fine:
But in Firefox, the icon drops down a line:
I have the fontawesome icon floated right within the <button>.
<!--html-->
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-small">Cached logs<i class="fa fa-money"></i></button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-small">Logs on mount<i class="fa fa-database"></i></button>
</div>
</div>
<!--style-->
i.fa {
float: right;
top: 2px;
position: relative;
font-size: 12pt;
}
.glyphicon, i.fa {
color: rgb(90, 90, 90);
top: 1px;
}
How can I make the Firefox version one-line like the Chrome?
JSBIN
Move the icon to the left of the text. I'm not sure of the underlying cause of it not being consistent how you've got it - but this does make both browsers render it consistently.
<button type="button" class="btn btn-default btn-small"><i class="fa fa-database"></i>Logs on mount</button>
Instead of
<button type="button" class="btn btn-default btn-small">Logs on mount<i class="fa fa-database"></i></button>
How can I prevent bootstrap button goups from breaking in to 2 lines when there is less space?
I am trying to use the below Bootstrap code:
<div class="btn-group" style=" width:100px ;">
<button type="button" class="btn btn-default" style=" width:30px;">-</button>
<input type="text" class="form-control" style="width:30px;">
<button type="button" class="btn btn-default" style=" width:30px;"> +</button>
</div>
And it looks like:
This is what worked for me, turn the group of buttons to a flex item (by default it does not wrap):
.btn-group {
display: flex;
}
I saw this here, and there are more options too:
https://github.com/twbs/bootstrap/issues/9939