This is very bizarre and must be something silly. This works fine...
<div class="btn-group" role="group" id="lead_buttons">
<a type="button" class="btn btn-default lead" id="lead_0">All</a>
<a type="button" class="btn btn-default lead" id="lead_1">Lead</a>
</div>
... but when I change class="btn-group" to class="btn-group-sm" the buttons aren't joined anymore. They are separate.
This is how it should work.
<div class="btn-group btn-group-sm" role="group" id="lead_buttons">
<a type="button" class="btn btn-default lead" id="lead_0">All</a>
<a type="button" class="btn btn-default lead" id="lead_1">Lead</a>
</div>
You need to add btn-group btn-group-sm.
<div class="btn-group">
<div class="btn-group">
<a class="btn btn-default btn-xs">All</a>
</div>
<div class="btn-group">
<a class="btn btn-default btn-xs">Lead</a>
</div>
</div>
You can also try this
Related
I am trying to arrange a few buttons in boostrap 3.4.
I managed to do it (probably by luck) and this is how it looks
This is the code I used. The idea is to create rows and then various divs within the row with the appropriate columns widths col-xs-N.
<div id="cfd_panel" class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#analysis" href="#collapse2">CFD</a>
</div>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="row">
<div class="col-xs-6">
<button type="button" class="btn btn-block btn-default btn-sm" id='create_cfd_domain' onclick='create_cfd_domain_btn()'>
Create/Update Domain
</button>
</div>
<div class="col-xs-3" style="padding-right: 1px">
<button type="button" class="btn btn-block btn-default btn-sm" onclick='map_to_area_btn()' >
Airflow Map
</button>
</div>
<div class="col-xs-3" style="padding-left: 1px">
<button type="button" class="btn btn-block btn-default btn-sm" onclick='open_cfd_paraview_btn()' >
View
</button>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<button type="button" class="btn btn-block btn-default btn-sm" id='mesh_cfd_domain' onclick='openfoam_mesh_btn()'>
Mesh
</button>
</div>
<div class="col-xs-3" style="padding-right: 1px">
<button type="button" class="btn btn-block btn-default btn-sm" onclick='open_cfd_paraview_samples_btn()' >
Samples
</button>
</div>
<div class="col-xs-3" style="padding-left: 1px">
<button type="button" class="btn btn-block btn-default btn-sm" onclick='import_from_aws_btn()' >
Import
</button>
</div>
</div>
<div class="row">
<div class="col-xs-3" style="padding-right: 1px">
<button type="button" class="btn btn-block btn-default btn-sm" id='run_cfd_cases' onclick='openfoam_run_btn()'>
Run
</button>
</div>
<div class="col-xs-3" style="padding-left: 1px">
<button type="button" class="btn btn-block btn-default btn-sm" id='sample_cfd_cases' onclick='openfoam_get_results_btn()' >
Sample
</button>
</div>
<div class="col-xs-6" style="padding-left: 10px; ali">
<button type="button" class="btn btn-link btn-sm" id='open_cfd_settings' onclick='open_cfd_settings_btn()' >
Settings
</button>
<button type="button" class="btn btn-link btn-sm" id='open_wind_template' onclick='open_wind_template_btn()' >
OFTemplate
</button>
</div>
</div>
</div>
</div>
I am now trying to rearrange the buttons in a different way, but I cannot manage to do it correctly by changing the column widths. This is what happens. The goal is to have MESH and RUN button on the same line and on the first column.
Is there a proper way to do it?
I have a problem with three buttons on my site.
I would like to have some space between those buttons.
Is it possible to do this, without using inline styling?
Perhaps bootstrap has some classes for this?
I know I can simply do it with:
style='margin-right:5px;'
or write custom class with this property.
I am just wondering if bootstrap has some classes for this?
Here is example.
Problem is with this three buttons:
<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>
Try to put them inside btn-toolbar or some other container.
<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>
</div>
Yes you have to wrap them
<div class="btn-group">
<button type="button" class="btn btn-primary">1/2</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">1/2</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">1/2</button>
</div>
EDITED CODEPEN
<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>
</div>
d-flex justify-content-between
<div class="col-md-3 mt-4 d-flex justify-content-betweend-flex justify-content-between">
<button type="submit" class="btn btn-info text-light" id="atndanceFilter"> <i class="fa fa-search"></i> Filter Report</button>
Reset
</div>
Will work like magic.
I want to display buttons to the right in bootstrap panel-heading i tried to add pull-right class on all buttons but its breaking some css rules on panel-body, How can i display all buttons on right side in bootstrap panel-heading ?
main.html
<div class="col-md-11">
<div ng-show="showMessage">
<p class="recordMessage">File is being recorded to the server ,once you stop recording it will prompt for cancel or download. </p>
</div>
<div class="panel panel-default">
<div class="panel-heading">DIT LOGS
<div class="pull-right" style="padding-right: 300px">
<button type="button" class="btn btn-danger btn-rad btn-lg"><span class="glyphicon glyphicon-record"></span></button>
<button type="button" class="btn btn-primary btn-rad btn-lg"><span class="glyphicon glyphicon-stop"></span></button>
<button type="button" class="btn btn-success btn-rad btn-lg"><span class="glyphicon glyphicon-search"></span></button>
<button type="button" class="btn btn-info btn-rad btn-lg"><span class="glyphicon glyphicon-folder-open"></span></button>
</div>
</div>
<div class="panel-body display-logs" scroll-bottom="event">
<ul style="list-style: none;">
<li ng-repeat="message in event track by $index" ng-class="{lastItem: $last}"><span><strong>Log:</strong></span><span>{{message}}</span></li>
</ul>
</div>
</div>
</div>
try putting them in an other div
<div class="panel-heading">DIT LOGS
<div class="pull-right">
<button type="button" class="btn btn-danger btn-rad btn-xs"><span class="glyphicon glyphicon-record"></span></button>
<button type="button" class="btn btn-primary btn-rad btn-xs"><span class="glyphicon glyphicon-stop"></span></button>
<button type="button" class="btn btn-success btn-rad btn-xs"><span class="glyphicon glyphicon-search"></span></button>
<button type="button" class="btn btn-info btn-rad btn-xs"><span class="glyphicon glyphicon-folder-open"></span></button>
</div>
</div>
In Bootstrap, how can I get a button group like the following that span the full width of a parent element? (like with the ".btn-block" class, but applied to a group http://getbootstrap.com/css/#buttons-sizes )
<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>
Correct solution for Bootstrap 4 and Bootstrap 5 (from Bootstrap 4 migration documentation):
Removed .btn-group-justified. As a replacement you can use <div class="btn-group d-flex" role="group"></div> as a wrapper around elements with .w-100.
Example:
<div class="btn-group d-flex" role="group" aria-label="...">
<button type="button" class="btn btn-default w-100">Left</button>
<button type="button" class="btn btn-default w-100">Middle</button>
<button type="button" class="btn btn-default w-100">Right</button>
</div>
Source: https://getbootstrap.com/docs/4.0/migration/#button-group
Edit: verified solution with Bootstrap 5
Flexbox can do that.
.btn-group.special {
display: flex;
}
.special .btn {
flex: 1
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group special" 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>
You can also use bootstraps btn-block will span across parent.
Create block level buttons—those that span the full width of a parent—by adding .btn-block.
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
https://getbootstrap.com/docs/4.0/components/buttons/
In Bootstrap 4, make use of .d-flex on your .btn-group and .w-100 on individual buttons:
.btn-group.d-flex(role='group')
button.w-100.btn.btn-lg.btn-success(type='button') 👍
button.w-100.btn.btn-lg.btn-danger(type='button') 👎
.btn-group(role='group')
button#btnGroupDrop1.btn.btn-lg.btn-light.dropdown-toggle(type='button', data-toggle='dropdown')
| •••
.dropdown-menu
a.dropdown-item(href='#') An option
a.dropdown-item(href='#') Another option
You can also use .btn-group-justified.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="btn-group btn-group-justified">
Left
Middle
Right
</div>
</div>
<div class="col-sm-12">
<div class="btn-group btn-block" role="group">
<button class="btn btn-success col-sm-10" type="submit">Button 1</button>
<button class="btn btn-danger col-sm-2" type="submit">Button 2</button>
</div>
Image
So as you can see in the image above, the History button is not affected by the black outlines like the other buttons is. Apparently the button is not in the class but as you can see in the code below it is.
<div class="container" id="main-container">
<div class="row main-row">
<div class="col-sm-3">
<div style="padding-top: 10px; margin-bottom: 20px;">
<div id="topleft-menu">Menu</div>
<div class="topleft-link-wrapper logout" style="display: none;">
<button class="topleft-link btn btn-primary btn-block" id="change-trade-url-btn"><span class="glyphicon glyphicon-pencil"></span> Change your trade URL</button>
</div>
<div class="topleft-link-wrapper">
<button class="topleft-link btn btn-info btn-block" data-toggle="modal" data-target="#about-modal"><span class="glyphicon glyphicon-list-alt"></span> About/How it works</button>
</div>
<div class="topleft-link-wrapper">
<button class="topleft-link btn btn-warning btn-block" id="support-btn"><span class="glyphicon glyphicon-question-sign"></span> Support</button>
</div>
<div class="topleft-link-wrapper">
<button class="topleft-link btn btn-default btn-block" id="donate-btn"><span class="glyphicon glyphicon-usd"></span> Donate</button>
</div>
<div class="topleft-link-wrapper">
<button class="topleft-link btn btn-success btn-block" id="history-btn"><span class="glyphicon glyphicon-list"></span> History</button>
</div>
I don't know why this problem occurs.
Also if you wanna inspect the site visit; www.csgoxd.net
The other elements have the css declaration:
.topleft-link-wrapper:not(:last-child)
So your last child element will not have the border declarations.