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>
Related
enter image description herehow to center all the elements center in the html body with responsive.i want all three elements in center of the body which are shown in the image.Am using bootstrap frame.
<div class="container-fluid">
<div class="col-md-4">
<img src="img/quote.png" class="img-responsive wow animated zoomIn">
</div>
<div class="col-md-6 text-center main-img">
<img src="img/main.jpg" class="homeimg img-responsive wow animated zoomIn">
</div>
<div class="col-md-2">
<button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Go to Website</button>
</div>
</div>
enter image description here
Have a look at this - https://plnkr.co/edit/ABOpqjxWw2ZvGiMiy53O?p=preview
Since you're using bootstrap cols, adding an offset col-md-offset-4 will help do the job.
You can a div class row to align the grid to the center of the page
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<img src="img/quote.png" class="img-responsive wow animated zoomIn">
</div>
<div class="col-md-6 text-center main-img">
<img src="img/main.jpg" class="homeimg img-responsive wow animated zoomIn">
</div>
<div class="col-md-2">
<button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Go to Website</button>
</div>
</div>
</div>
You can try like this:
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="img/quote.png" class="img-responsive wow animated zoomIn">
</div>
<div class="col-md-6 text-center main-img">
<img src="img/main.jpg" class="homeimg img-responsive wow animated zoomIn">
</div>
<div class="col-md-2">
<button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Go to Website</button>
</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!
i've a bug when choosing the tablet layout.
It works like a charm on smartphones and desktop but my buttons aren't centered anymore on tablet.
Here's my code :
<body>
<header class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<img src="assets/img/maison.png" alt="logo" class="col-lg-1 col-md-1 col-sm-1 hidden-xs">
<h1 class="text-center">La maison de l'architecte</h1>
</header>
<nav class="">
<div id="left" class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<img src="assets/img/city1.jpg" alt="Nos réalisations">
</div>
<div id="side1" class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="assets/img/side1.jpg" alt="Nos projets">
</div>
<div id="side2" class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="assets/img/side2.jpg" alt="Notre ambition">
</div>
</nav>
<footer class="text-center">
<a class="btn btn-primary" href="#"><i class="fa fa-twitter fa-2x"></i></a>
<a class="btn btn-primary" href="#"><i class="fa fa-facebook fa-2x"></i></a>
<a class="btn btn-primary" href="#"><i class="fa fa-google-plus fa-2x"></i></a>
<a class="btn btn-primary" href="#"><i class="fa fa-flickr fa-2x"></i></a>
<a class="btn btn-primary" href="#"><i class="fa fa-spotify fa-2x"></i></a>
</footer>
</body>
Just add the row class to the nav <nav class="row">
see fiddle https://jsfiddle.net/g74Ep/472/
<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>