I need to center horizontally a set of buttons into div.
My problem is that the buttons continues left aligned.
//css
.space-btn{
margin-bottom:5px!important;
}
here is my markup:
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="text-center">
<div class="btn-toolbar">
<button class="btn btn-primary space-btn" type="button">Histórico</button>
<button class="btn btn-primary space-btn" type="button">Reagendar</button>
<button class="btn btn-primary space-btn" type="button">Detalhes</button>
</div>
</div>
</div>
</div>
</div>
</div>
The issue is that btn in bootstrap used inside btn-toolbar are floated
so you may add this code :
.space-btn {
float: none!important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="btn-toolbar text-center">
<button class="btn btn-primary space-btn" type="button">Histórico</button>
<button class="btn btn-primary space-btn" type="button">Reagendar</button>
<button class="btn btn-primary space-btn" type="button">Detalhes</button>
</div>
</div>
</div>
</div>
</div>
There is no big issue in code you have to change position of text-center class. this will come like this.
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="btn-toolbar text-center">
<button class="btn btn-primary space-btn" type="button">Histórico</button>
<button class="btn btn-primary space-btn" type="button">Reagendar</button>
<button class="btn btn-primary space-btn" type="button">Detalhes</button>
</div>
</div>
</div>
</div>
</div>
There is a small change also in css which is
.space-btn{
float:none!important;
}
Add text-center class to the button container.
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="btn-toolbar text-center">
<button class="btn btn-primary space-btn" type="button">Histórico</button>
<button class="btn btn-primary space-btn" type="button">Reagendar</button>
<button class="btn btn-primary space-btn" type="button">Detalhes</button>
</div>
</div>
</div>
</div>
</div>
Related
I have tried to align the code (linked) to make buttons align horizantlly vs stacked. Any advice? New this working with CSS/Bootstrap this in-depth.
http://jsfiddle.net/kuedrgoL/
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="listmenu">
<div class="mini-layout fluid">
<div class="mini-layout-sidebar2">
<p><a class="btn btn-primary btn-sm btn-block" href="index.cfm">Program Home</a></p></div>
</div>
<div class="mini-layout fluid">
<div class="mini-layout-sidebar2">
<p><a class="btn btn-primary btn-sm btn-block" href="Courses.cfm">Course Descriptions</a></p>
</div>
</div>
<div class="mini-layout fluid">
<div class="mini-layout-sidebar2">
<p><a class="btn btn-primary btn-sm btn-block" href="Optional.cfm">Optional Learning</a></p>
</div>
</div>
You have a lot of ways to make this horizantlly
First way
#listmenu{
display:flex;
}
The second way if you using Bootstrap
<div class="container">
<div class="row">
<div class="col-sm">
<div class="mini-layout fluid">
<div class="mini-layout-sidebar2">
<p><a class="btn btn-primary btn-sm btn-block" href="index.cfm">Program Home</a></p>
</div>
</div>
</div>
<div class="col-sm">
<div class="mini-layout fluid">
<div class="mini-layout-sidebar2">
<p><a class="btn btn-primary btn-sm btn-block" href="Courses.cfm">Course Descriptions</a></p>
</div>
</div>
</div>
<div class="col-sm">
<div class="mini-layout fluid">
<div class="mini-layout-sidebar2">
<p><a class="btn btn-primary btn-sm btn-block" href="Optional.cfm">Optional Learning</a></p>
</div>
</div>
</div>
</div>
</div>
The last way you can read this
https://getbootstrap.com/docs/4.0/utilities/flex/
You can achieve this by using a flex layout with the Bootstrap utility classes. Note the addition of classes to #listmenu and the removal of the btn-block classes.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="listmenu" class="d-flex justify-content-start align-items-center">
<div class="mini-layout fluid">
<div class="mini-layout-sidebar2">
<p><a class="btn btn-primary btn-sm mr-2" href="index.cfm">Program Home</a></p>
</div>
</div>
<div class="mini-layout fluid">
<div class="mini-layout-sidebar2">
<p><a class="btn btn-primary btn-sm mr-2" href="Courses.cfm">Course Descriptions</a></p>
</div>
</div>
<div class="mini-layout fluid">
<div class="mini-layout-sidebar2">
<p><a class="btn btn-primary btn-sm" href="Optional.cfm">Optional Learning</a></p>
</div>
</div>
I have a form that looks like the following:
<div class="row">
<div class="col">
<textarea name="comment" class='form-control' placeholder='Type new comment here..'></textarea>
</div>
<div class="col">
<div class="row">
<div class="col">
<button class="btn btn-secondary btn-sm" type='button'><span class="fa fa-times mr5"></span>Cancel</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="btn btn-primary btn-sm mt5" name='new_comment' type='submit'><span class="fa fa-plus mr5"></span>Save</button>
</div>
</div>
</div>
</div>
I'm using Bootstrap 4. The thing is, I want this form to be the max width of its container - to have the textarea stretch and the buttons be a static width. If I use the above, I get a big empty gap because the smallest col (col-1) is to wide for the buttons. How can I have it fill the width of the screen with the button columns remaining a fixed width?
I have a feeling its using flex and d-flex but I cant manage to get it work.
add flex-grow-0 to buttons column:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="container-fluid">
<div class="row">
<div class="col">
<textarea name="comment" class='form-control' placeholder='Type new comment here..'></textarea>
</div>
<div class="col flex-grow-0">
<div class="row">
<div class="col">
<button class="btn btn-secondary btn-sm" type='button'><span class="fa fa-times mr5"></span>Cancel</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="btn btn-primary btn-sm mt5" name='new_comment' type='submit'><span class="fa fa-plus mr5"></span>Save</button>
</div>
</div>
</div>
</div>
</div>
You can remove .col and use d-flex and flex-grow-1.
Then, you can also add a margin-left using ml-3 to the buttons.
<div class="row mw-100">
<div class="d-flex flex-grow-1">
<textarea name="comment" class='form-control' placeholder='Type new comment here..'></textarea>
</div>
<div class="ml-3">
<div class="row">
<div class="col">
<button class="btn btn-secondary btn-sm" type='button'><span class="fa fa-times mr5"></span>Cancel</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="btn btn-primary btn-sm mt5" name='new_comment' type='submit'><span class="fa fa-plus mr5"></span>Save</button>
</div>
</div>
</div>
</div>
For the buttons container, you can set the width you want.
I am using bootstrap 3 and have a my data coming from a service. I am using ng-repeat to render the design,I need two buttons to appear in one row and if we are using mobile then one button in a row. The Buttons should be center on the screen as indicated below.
Button Text 1 Button Text 2
Button Tex 3 Button Text 4
This is my html code
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-offset-2"><button type="button" class="btn btn-default btn-block">Here sits text 1</button></div>
<div class="col-sm-4"><button type="button" class="btn btn-default btn-block">Here sits text 2</button></div>
</div>
<div class="row">
<div class="col-sm-4 col-md-offset-2"><button type="button" class="btn btn-default btn-block">Here sits text 3</button></div>
<div class="col-sm-4">
<button type="button" class="btn btn-default btn-block" style="word-wrap: break-word;">Here sits text 4 </button></div>
</div>
</div>
How would I avoid using multiple rows in order to force two columns?
I am asking for that to make my ng-repeat just render some columns because, it would not work with this design?
Update For Question:
I have updated using the answer suggested below, its working now:
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-offset-2 col-sm-offset-2 col-lg-offset-2 col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-align:center;">
<button type="button" class="btn btn-primary btn-block">Button text 1</button>
</div>
<div class="col-sm-4 col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-align:center;">
<button type="button" class="btn btn-primary btn-block">Button text 2</button>
</div>
<div class="col-sm-4 col-md-offset-2 col-sm-offset-2 col-lg-offset-2 col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-align:center;">
<button type="button" class="btn btn-primary btn-block">Button text 1</button>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-align:center;">
<button type="button" class="btn btn-primary btn-block">Button text 4</button>
</div>
</div>
Is it possible to use the same styling for cols and and make it work (there are offsets on alternate cols.
I thinkyou should take a look at this: https://jsfiddle.net/2zu0oksc/
You can have a div with class row and many col-*
Setting the col-xs-12 to the div, you are saying taht in small devices it will take all the row width.
This is the code:
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" style="text-align:center;">
<button type="button" class="btn btn-primary">Button text 1</button>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" style="text-align:center;">
<button type="button" class="btn btn-primary">Button text 2</button>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" style="text-align:center;">
<button type="button" class="btn btn-primary">Button text 3</button>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" style="text-align:center;">
<button type="button" class="btn btn-primary">Button text 4</button>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="col-xs-2 col-xs-offset-4">
<button class="btn btn-primary">
Text 1
</button>
</div>
<div class="col-xs-2 col-xs-offset-1">
<button class="btn btn-primary">
Text 1
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="col-xs-2 col-xs-offset-4">
<button class="btn btn-primary">
Text 1
</button>
</div>
<div class="col-xs-2 col-xs-offset-1">
<button class="btn btn-primary">
Text 1
</button>
</div>
</div>
</div>
</div>
https://jsfiddle.net/wuy235f9/
This works but you'll have to adjust the offset and col size you want for it!
I have a group of buttons group:
<div class="row">
<div class="col-md-2">
<div class="btn-group-vertical btn-group-justified" role="group" id="nav_bar">
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="row">
<a class="btn btn-primary" data-toggle="collapse" href="#Setup1" data-parent="#accordion">Setup1</a>
<div id="Setup1" class="panel-collapse collapse">
<div class="col-md-12">
<div class="btn-group-vertical btn-group-justified" role="group">
<div class="row">
<button type="button" class="btn btn-default">MAIN</button>
</div>
<div class="row">
<button type="button" class="btn btn-default">EXEC</button>
</div>
<div class="row">
<button type="button" class="btn btn-default">ROUTER</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<a class="btn btn-primary" data-toggle="collapse" href="#Setup2" data-parent="#accordion">Setup2</a>
<div id="Setup2" class="panel-collapse collapse">
<div class="col-md-12">
<div class="btn-group-vertical btn-group-justified" role="group">
<div class="row">
<button type="button" class="btn btn-default">MAIN</button>
</div>
<div class="row">
<button type="button" class="btn btn-default">EXEC</button>
</div>
<div class="row">
<button type="button" class="btn btn-default">ROUTER</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and in output this is:
but I cant figure out, how to make collapse one group, when you expand other. Could someone help with that?
I was trying to play with panels, but it's unsuitable, because i need a style, which showed on attached image. And in panels only text is clickable.
Thanks
You can do it by setting up your elements with bootstrap properly.
But you can also extend the collapse by:
$('.btn').on('click',function(){
$('.panel-collapse').each(function(){
$(this).removeClass('in');
}):
});
<div class="row">
<div class="col-md-6 col-sm-8 col-xs-12">
<a class="btn btn-default" id="lnkBtnSave" onclick=" GetSaveData(); ">Save</a>
<a class="btn btn-default" id="lnkBtnSubmit" onclick=" GetSubmitData(); ">Submit</a>
<asp:LinkButton class="btn btn-default" id="lnkBtnAttach" runat="server" OnClick="lnkBtnAttach_OnClick" Text="Attach" ></asp:LinkButton>
<asp:LinkButton class="btn btn-default" id="lnkBtnExit" runat="server" OnClick="lnkBtnExit_OnClick" Text="Exit"></asp:LinkButton>
</div>
</div>
I have 4 buttons in row. How can i stretch this buttons on all row?
Currently it looks like :
What i want looks like this :
Add a div around each of them and give it the dimensions you want. Tried it on my website just now and I have four buttons stretching across the page.
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-6 text-center">
<a class="btn btn-default" id="lnkBtnSave" onclick=" GetSaveData(); ">Save</a>
</div>
<div class="col-md-3 col-sm-3 col-xs-6 text-center">
<a class="btn btn-default" id="lnkBtnSubmit" onclick=" GetSubmitData(); ">Submit</a>
</div>
<div class="col-md-3 col-sm-3 col-xs-6 text-center">
<asp:LinkButton class="btn btn-default" id="lnkBtnAttach" runat="server" OnClick="lnkBtnAttach_OnClick" Text="Attach" ></asp:LinkButton>
</div>
<div class="col-md-3 col-sm-3 col-xs-6 text-center">
<asp:LinkButton class="btn btn-default" id="lnkBtnExit" runat="server" OnClick="lnkBtnExit_OnClick" Text="Exit"></asp:LinkButton>
</div>
</div>
Wrap each button in a .col-xs-3 div and apply a text-align:center on those divs:
.row > div {
text-align:center
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-3">
<a class="btn btn-default" id="lnkBtnSave" onclick=" GetSaveData(); ">Save</a>
</div>
<div class="col-xs-3">
<a class="btn btn-default" id="lnkBtnSubmit" onclick=" GetSubmitData(); ">Submit</a>
</div>
<div class="col-xs-3">
<a class="btn btn-default" id="lnkBtnAttach" runat="server" OnClick="lnkBtnAttach_OnClick" Text="Attach" >Attach</a>
</div>
<div class="col-xs-3">
<a class="btn btn-default" id="lnkBtnExit" runat="server" OnClick="lnkBtnExit_OnClick" Text="Exit">Exit</a>
</div>
</div>
</div>