How can I adjust the length of bootstrap buttons without adjusting its width/height? Whenever I adjust the width, It gives me wrong output.
<button type="button" class="btn btn-primary">Primary</button>
It's not clear what you mean by "length" but Bootstrap has set sizes for it's buttons
"extra-small", "small", "default" and "large"
as defined by btn-xs btn-sm, btn-default and bth-lg
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-xs btn-primary">Primary</button>
<button type="button" class="btn btn-sm btn-primary">Primary</button>
<button type="button" class="btn btn-default btn-primary">Primary</button>
<button type="button" class="btn btn-lg btn-primary">Primary</button>
However, there is noting to stop you adding your own customer widths by adjusting the left/right padding.
EG.
.btn-wide {
padding-left: 3em;
padding-right: 3em;
}
JSfiddle Demo
Related
This question already has answers here:
Two inline-block elements, each 50% wide, do not fit side by side in a single row
(9 answers)
Closed 5 years ago.
I have tried to inspect a "Buttons" example from Bootstrap 4. They have a nice-looking row of buttons, like this:
http://getbootstrap.com/docs/4.0/components/buttons/
But I don't understand, where does the space between buttons is coming from.
This is not margin, not flex-box aligning, not a transparent border.
So, how it works? Actually, I disabled all the styles in dev-tools, but that space did not disappear.
The space is there because there's whitespace between the HTML elements. If you remove the whitespace, the buttons will be positioned next to each other.
Note that whitespace (newline) between the elements is condensed to a single space by the browser.
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
Now if we remove the whitespace:
<button type="button" class="btn btn-primary">Primary</button><button type="button" class="btn btn-secondary">Secondary</button>
If you check with firefox the space coming from here please check screenshot:
You can remove the space by adding your own css rule like merging or padding.
Thanks
The space is coming because buttons are inline elements by default...it is not a bug..its just the way inline elements align in browsers...
So remove all the space from your coding is a solution, which I don't think I will do, because if you are coding your code should look good...right..
As you are using bootstrap4 you can use bootstrap d-flex class
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="parent d-flex">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
</div>
Another solution is you can set the font-size of the parent of buttons to 0 and then set the font-size of buttons to the default one
Stack Snippet
.parent {
font-size: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="parent">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
</div>
You can solve it using simple parent element to flex
<div class="button">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
</div>
<style>
.button{
display: flex;
}
.button > button{
display: inline-block;
}
</style>
I have this HTML:
<h4><span class="label label-default">1546 - some text</span></h4>
<div class="pull-left">
<button type="button" class="btn btn-primary" ng-click="list.saveItems();" ng-disabled="!list.currentItems.length || list.currentItemsStatus.id == 1">Submit</button>
<button type="button" class="btn btn-default" ng-click="list.getItems()">Reload</button>
<button type="button" class="btn btn-default" ng-disabled="true">Cancel</button>
</div>
How can I make <h4> element on the same row with the buttons on the right side?
You have to add the following CSS for the heading <h4>:
h4 {
display:inline-block;
float:left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<h4><span class="label label-default">1546 - some text</span></h4>
<div class="pull-left">
<button type="button" class="btn btn-primary" ng-click="list.saveItems();" ng-disabled="!list.currentItems.length || list.currentItemsStatus.id == 1">Submit</button>
<button type="button" class="btn btn-default" ng-click="list.getItems()">Reload</button>
<button type="button" class="btn btn-default" ng-disabled="true">Cancel</button>
</div>
The default value of the display property is block so the heading (<h4>) takes the full width of the parent container. With display: inline-block the heading takes only the space needed.
Bootstrap 3.3
You can set the class .pull-left to the <h4> element. So you don't need additional CSS rules:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<h4 class="pull-left"><span class="label label-default">1546 - some text</span></h4>
<div class="pull-left">
<button type="button" class="btn btn-primary" ng-click="list.saveItems();" ng-disabled="!list.currentItems.length || list.currentItemsStatus.id == 1">Submit</button>
<button type="button" class="btn btn-default" ng-click="list.getItems()">Reload</button>
<button type="button" class="btn btn-default" ng-disabled="true">Cancel</button>
</div>
Bootstrap 4.0+
Since Bootstrap 4.0 you have to use .float-left instead of .pull-left:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<h4 class="float-left"><span class="label label-default">1546 - some text</span></h4>
<div class="float-left">
<button type="button" class="btn btn-primary" ng-click="list.saveItems();" ng-disabled="!list.currentItems.length || list.currentItemsStatus.id == 1">Submit</button>
<button type="button" class="btn btn-default" ng-click="list.getItems()">Reload</button>
<button type="button" class="btn btn-default" ng-disabled="true">Cancel</button>
</div>
You have to add some CSS for h4 and pull-left-class:
h4{
display: inline-block;
}
.pull-left{
display: inline-block;
}
example:
https://jsfiddle.net/y6f0ddLg/
I want to have hotkeys using accesskey.
Let's say I have this (it's AnguarJs but that doesn't matter):
<button type="button" class="btn btn-outline btn-default"
ng-click="CancelCampaignEdit();" accesskey='n'
style="margin-right:10%">Cancel</button>
As you can see, I want to assign the hotkey n to this button. How could I underline the n in Cancel using CSS?
You can add a span tag with text-decoration:underline if you want add extra styling. Otherwise use tag
<button type="button" class="btn btn-outline btn-default"
ng-click="CancelCampaignEdit();" accesskey='n'
style="margin-right:10%">Ca<u>n</u>cel</button>
<button type="button" class="btn btn-outline btn-default"
ng-click="CancelCampaignEdit();" accesskey='n'
style="margin-right:10%">Ca<span style="text-decoration: underline;">n</span>cel</button>
If I put several Bootstrap 3 buttons in a row:
<button class="btn btn-default">Button 1</button>
<button class="btn btn-default">Button 2</button>
<button class="btn btn-default">Button 3</button>
there is a small space between them. Where does it come from and how to remove it without using float? According to the Firebug and Chrome Inspector the buttons haven't any margin applied to them.
The newline between the buttons actually causes the space. Observe:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-default">Button 1</button><button class="btn btn-default">Button 2</button><button class="btn btn-default">Button 3</button>
There is a button-group rule you can use if you want the buttons visually grouped: http://getbootstrap.com/components/#btn-groups
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<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>
</div>
I believe you style your buttons display:inline-block; or inline. By default they create spaces if you have newline character.
So to remove it, put those markups next to each other without newline char.
It would get messy, but will get what you want without having a style float
So do it like this :
<button class="btn btn-default">Button 1</button><button class="btn btn-default">Button 2</button><button class="btn btn-default">Button 3</button>
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;
}