<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>
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>
Need to place 5 buttons in a download and finally i came with the following code.
<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-xs-12 col-sm-2 col-md-2">
<a class="btn btn-danger" href="#">Click Here For Music & Rhyme Section</a>
</div>
<div class="col-xs-12 col-sm-2 col-md-2">
<a class="btn btn-danger" href="#">Click Here For Music & Rhyme Section</a>
</div>
<div class="col-xs-12 col-sm-2 col-md-2">
<a class="btn btn-danger" href="#">Click Here For Music & Rhyme Section</a>
</div>
<div class="col-xs-12 col-sm-2 col-md-2">
<a class="btn btn-danger" href="#">Click Here For Music & Rhyme Section</a>
</div>
<div class="col-xs-12 col-sm-2 col-md-2">
<a class="btn btn-danger" href="#">Click Here For Music & Rhyme Section</a>
</div>
</div>
</div>
But the issues here is that the text is collapsed in the button. We want the entire the text to visible in the button.
#rakeshkumar you just need to add class="col-lg-2" to all your divs. it solves my problem.
<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-xs-12 col-sm-2 col-md-2 col-lg-2">
<a class="btn btn-danger" href="#">Click Here For Music & Rhyme Section</a>
</div>
<div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
<a class="btn btn-danger" href="#">Click Here For Music & Rhyme Section</a>
</div>
<div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
<a class="btn btn-danger" href="#">Click Here For Music & Rhyme Section</a>
</div>
<div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
<a class="btn btn-danger" href="#">Click Here For Music & Rhyme Section</a>
</div>
<div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
<a class="btn btn-danger" href="#">Click Here For Music & Rhyme Section</a>
</div>
</div>
</div>
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>
I am developing a web application and would like my EntreCadastre-se|Carrinho menu to be next to the text field, but it is getting underneath
<div class="row">
<div class="col-6 col-md-4 col-xs-4">
<img src="imagens/eccomerce.JPG" alt="principal" id="imagem_principal">
</div>
<div class="col-6 col-md-4">
<div class="busca"><input type="text" id="campo_busca" placeholder="O que você procura?"><button type="submit" onclick="" class="buscar_produto "><i class="fa fa-search" action="" ></i></button> </div>
</div>
<div class="col-6 col-md-4">
<ul class="menu_2">
<div class="btn-group" role="group">
<div class="btn-group" role="group">
Entre/Cadastre-se <span class="caret"></span>
</div>
<button type="button" class="carrinho btn btn-default">Carrinho <i class="fa fa-shopping-cart"></i> ( )</button>
</div>
</ul>
</div>
</div>
What you are doing wrong here is your math. Like #efkin said you have only 12 columns. But you have defined three divs with col-6. That means 3*6 = 18.
When you want 3 columns with equal size on one row you have to use col-4 for each, because 3*4 = 12.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-4 col-md-4 col-xs-4">
<img src="imagens/eccomerce.JPG" alt="principal" id="imagem_principal" >
</div>
<div class="col-4 col-md-4">
<div class="busca"><input type="text" id="campo_busca" placeholder="O que você procura?"><button type="submit" onclick="" class="buscar_produto "><i class="fa fa-search" action="" ></i></button> </div>
</div>
<div class="col-4 col-md-4">
<ul class="menu_2">
<div class="btn-group" role="group">
<div class="btn-group" role="group">
Entre/Cadastre-se <span class="caret"></span>
</div>
<button type="button" class="carrinho btn btn-default">Carrinho <i class="fa fa-shopping-cart"></i> ( )</button>
</div>
</ul>
</div>
</div>
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!