I am trying to horizontally center-align a bootstrap button with accompanying text. But am not getting the expected output. Could someone tell me why its not centering?
<div class="col-md-12 well">
<div class="col-md-6">
<h2 class="btn btn-warning btn-lg btn-block">Sign in via google</h2>
</div>
<div class="col-md-6 text-center">
<span><em> Already have an account? Login</em></span>
</div>
</div>
I created a Plunker demo. In smaller screens it works as expected. But in larger screens it's not aligned properly.
Use col-md-offset-3 along with col-md-6 to center align your content:
<div class="col-md-offset-3 col-md-6">
...
</div>
Further more, set text-center class on the outside div and not on span tag:
<div class="col-md-offset-3 col-md-6 text-center">
<em> Already have an account? Login</em>
</div>
See fiddle here.
Try this:
.flex-centered {
display: flex;
justify-content: center;
margin-top: 31px;
height: 46px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-12 well">
<div class="col-md-6 text-center">
<h2 class="btn btn-warning btn-lg btn-block">Sign in via google</h2>
</div>
<div class="col-md-6">
<div class="flex-centered">
<em> Already have an account? Login</em>
</div>
</div>
</div>
use div outside of span tag
<div style="text-align:center;" ><span class="text-center"><em> Already have an account? Login</em></span>
</div>
Try this code...
<body>
<div class="row">
<div class="col-md-6 col-md-push-3">
<h2 class="btn btn-warning btn-lg btn-block">Sign in via google</h2>
</div>
<div class="col-md-6 col-md-offset-3">
<span><em> Already have an account? Login</em></span>
</div>
</div>
</body>
Plunker Link
After some fiddling around I found a solution..Its not a bootstrap solution. But its only few lines of css. If anyone found a bootsrap way post here and I will change the accepted answer. Thank you.
<div class="row well row-centered">
<div class="col-md-6 col-centered">
<h2 class="btn btn-warning btn-lg center-block">Sign in via google</h2>
</div>
<div class="col-md-6 text-center col-centered" >
<span><em> Already have an account?Login
</div>
</div>
here is the custom css
/* centered columns styles */
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}
Related
When I use display:block it doesn't want to work which was working before. When I inspect it shows me strike through on display:block. Now the buttons are positioned on the right side of the col, I'd need them to be positioned in the middle under the image.
html
<div class="sectionLight">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-12 col-lg-4">
<img class="img-fluid imgCenter" src="images/square.png">
<div class="row">
<div class="col-sm-12">
<button type="button" class="btn btn-danger btn-lg btnCenter" data-toggle="modal" data-target=".square-modal-lg">Prime</button>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<img class="img-fluid imgCenter" src="images/fibo.png">
<div class="row">
<div class="col-sm-12">
<button type="button" class="btn btn-danger btn-lg btnCenter" data-toggle="modal" data-target=".fibo-modal-lg">Fibo</button>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<img class="img-fluid imgCenter" src="images/square_copy.png">
<div class="row">
<div class="col-sm-12">
<button type="button" class="btn btn-danger btn-lg btnCenter" data-toggle="modal" data-target=".prime-modal-lg">Square</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.btnCenter {
display: block;
margin: auto;
margin-top: 15px;
margin-bottom: 20px;
width: 50%;
}
You probably have included another css script that overwrites your current one.
You can try to make it !important. If that doesnt work, you might have to make your selector more spesific than the one currently overwriting it.
.btnCenter {
display: block !important;
margin: auto;
margin-top: 15px;
margin-bottom: 20px;
width: 50%;
}
You can debug this in the dev-tools. See the example image below:
In this example, primary.css is higher in the css hierarchy (meaning the file primary.css is included later than stacks.css) Therefore, it will overwrite the selector.
I have a bootstrap grid system on my page and want two elements pulled to the right, but placed one below the other. This is the code I have right now. I want "Active" and "Primary" button place one below the other, but also pulled right. As of now, it looks like this:
If I were to add this to the button, then it aligns properly, but on mobile, it messes up.
<button type="button" class="btn btn-w-m btn-primary" style="margin-left: 261px;">Primary</button>
This is what I have so far. What can I do to achieve the desired result?
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row border-bottom white-bg dashboard-header">
<div class="col-md-3">
<h4>Dummy Name</h4>
<small>Dummy Street</small><br>
<small>Dummy Apt, Some City, Some State</small><br>
<small>United States</small><br>
</div>
<div class="col-md-3">
<h5>123-456-7890</h5>
</div>
<div class="col-md-3">
<h5>some_name#somecompany.com</h5>
</div>
<div class="col-md-3">
<h2 class="pull-right" style="margin-top: -5px">Active</h2><br>
<button type="button" class="btn btn-w-m btn-primary">Primary</button>
</div>
</div>
</div>
You do not need pull-right at all - all you need to right align the text of the heading and the button is text-align:right in the css or the text-right class on the parent div. Note that you need to open this snippet in "full screen mode due to the small size of the preview window.
I would also suggest that you put the css in its own style sheet rather than inline style rules. If you use text-align: right as a style rule then you can use a media query to apply it or left align on certain screen sizes as required.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row border-bottom white-bg dashboard-header">
<div class="col-xs-3 col-md-3">
<h4>Dummy Name</h4>
<small>Dummy Street</small><br>
<small>Dummy Apt, Some City, Some State</small><br>
<small>United States</small><br>
</div>
<div class="col-xs-3 col-md-3">
<h5>123-456-7890</h5>
</div>
<div class="col-xs-3 col-md-3">
<h5>some_name#somecompany.com</h5>
</div>
<div class="col-xs-3 col-md-3 text-right">
<h2>Active</h2><br>
<button type="button" class="btn btn-w-m btn-primary">Primary</button>
</div>
</div>
</div>
</div>
I have a bootstrap 3 based layout, with two columns, how can I make sure the text in the second aligns with the center (horizontal) of the page?
HTML:
<div class="row spaced">
<div class="col-sm-2 text-center">
<img src="Images/picture.png" alt="Image" height="100%" width="100%">
</div>
<div class="col-sm-10 text-center horizontal-center">
<h1 class="text-box text-center horizontal-center">Are you interested?</h1>
<button type="button" class="btn btn-primary btn-lg outline text-center">Find Out More</button>
</div>
</div>
CSS:
.horizontal-center {
display: inline-block;
vertical-align: middle;
text-align: center;
float: none;
}
JSFiddle
You can pull the image left and take it out of the container, then make the div 12 so it will use the whole screen
<div class="col-sm-2 pull-left">
<img src="Images/picture.png" alt="space taking image to push other columns off center" height="100%" width="100%">
</div>
<div class="container">
<div class="row spaced">
<div class="col-sm-12 text-center horizontal-center">
<h1 class="text-box text-center horizontal-center">Are you interested to find out more? Then click the button below.</h1>
<button type="button" class="btn btn-primary btn-lg outline text-center">Find Out More</button>
</div>
</div>
</div>
https://jsfiddle.net/ygznu3gy/
I am trying to get two buttons on the same line on mobile. The buttons are on the same line for the desktop but as soon as it goes mobile they stack on top of each other. I have tried adding an inline-block tag to the div class but they still stacked, albeit at the correct 50 50 size.
Here is my html:
<div class="buttonDiv">
<div class="row">
<div class="col-lg-6">
<button type="button" class="btn btn-primary btn-custom" id= "buttonCustom">SIGN UP</button>
</div>
<div class="col-lg-6">
<button type="button" class="btn btn-primary btn-custom" id= "buttonCustom">CHECK STANDINGS</button>
</div>
</div>
</div>
and here is the relevant CSS:
.buttonDiv{
position:relative;
bottom:90px;
font-family: "Cabin Condensed";
font-weight:700;
display:inline-block;
}
#buttonCustom{
position:relative;
margin-bottom:10px;
height:10%;
width:100%;
}
css looks like an overkill, unless OP solves some other design task (s)he didn't mention in the question.
If all you want is to keep 2 buttons inline on any device you can get away with...
<div class="row">
<div class="col-xs-12">
<button class="btn btn-primary">SIGN UP</button>
<button class="btn btn-primary">CHECK STANDINGS</button>
</div>
</div>
... and no additional css required.
fiddle.
Bootstrap has the classes xs for phones, and sm for tablets. You actually only need to add col-xs-6 to both your classes as this will affect all other widths unless otherwise stated. From the bootstrap docs:
Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.
add col-sm-6 col-xs-6 to the two btns. This indicates that when the screen is small size or xsmall size. They maintain 50% width.
You could look into this JsFiddle.
HTML
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Some content</h1>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-3 col-md-3 col-lg-2">
<button class="btn btn-primary my-button">Sign Up</button>
</div>
<div class="col-xs-6 col-sm-3 col-md-3 col-lg-2">
<button class="btn btn-primary my-button">Check Standings</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h1>Some content</h1>
</div>
</div>
CSS
.my-button{
width:100%;
}
You can paly with the values of classes of these lines <div class="col-xs-6 col-sm-3 col-md-3 col-lg-2">. To understand this grid-system you can look at the official documentation. Happy Coding.
I tried to look at other stack questions about adding spacing between columns in bootstrap, but I don't seem to find the right answer to my issue. Basically what i want is to have 2 buttons one at the far right and one at the far left on desktop/tablet (and I managed to do that) but then on mobile the buttons will have to go one below the other, will have to be centered and will need to have some space in between (and that's where I can't find a solution). Please note that I'm using an editor where I can add html and/or bootstrap code only, so any css will have to be in the html.
Here is the code I used so far:
<div class="raw">
<div class="col-md-6 col-sm-6 col-xs-6"><a class="btn btn-primary pull-left" href="">Becoming an au pair</a></div>
<div class="col-md-6 col-sm-6 col-xs-6"><a class="btn btn-primary pull-right" href="">Becoming a host family</a></div>
</div>
Thanks!
https://jsfiddle.net/m00durk3/
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-xs-12 text-left">
<div class="btn">
Left Button
</div>
</div>
<div class="col-sm-6 col-xs-12 text-right">
<div class="btn">
Right Button
</div>
</div>
</div>
</div>
CSS:
.btn {
background-color: lightblue;
}
#media screen and (max-width: 767px) {
.btn {
width: 100%;
margin-bottom: 5px;
}
}
So basically you need to use the grid to wrap the outermost columns. Once thats done you need to add a media query that changes the width of the buttons to fill the screen.
In the jsfiddle link make the html sections width bigger or smaller to see the changes take effect.
Edit: Full code showing how to put styles on the same page as the html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.btn {
background-color: lightblue;
}
#media screen and (max-width: 767px) {
.btn {
width: 100%;
margin-bottom: 5px;
}
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-xs-12 text-left">
<div class="btn">
Left Button
</div>
</div>
<div class="col-sm-6 col-xs-12 text-right">
<div class="btn">
Right Button
</div>
</div>
</div>
</div>
</body>
</html>
I actually managed to fix it with the following code. Thanks for putting me on the right track Bioto
<div class="row">
<div class="col-md-6 col-sm-6 text-left">
<div class="col-xs-12 text-center"><a class="btn btn-primary" href="https://kangaroo-staging.devguru.co/en/ireland/au-pair" style="margin-bottom:10px;">Becoming an au pair</a></div>
</div>
<div class="col-md-6 col-sm-6 text-right">
<div class="col-xs-12 text-center"><a class="btn btn-primary" href="https://kangaroo-staging.devguru.co/en/ireland/host-family" style="margin-bottom:10px;">Becoming a host family</a></div>
</div>
</div>