I want to vertically middle align the buttons in bootstrap columns.
Fiddler: https://jsfiddle.net/ebwwvy6m/23/
HTML
<div class="row">
<div class="col-sm-3 vcenter">
<button type="button" class="btn btn-success btn-sm" id="BtnExport">Export</button>
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-sm-6">
Comment
<textarea rows="2" class="form-control" id="TextAreaComment"></textarea>
</div>
<div class="col-sm-6 vcenter">
<button type="button" class="btn btn-primary btn-sm" id="BtnEntry">Abandon</button>
</div>
</div>
</div>
</div>
CSS:
.vcenter {
display:inline-block !important;
vertical-align:middle !important;
}
Expectation:
What I tried?
I tried following the solutions provided here,
Vertical align button in the middle of the column- bootstrap
Vertical align button middle next to text
Bootstrap - Vertically Align Button With Well
But, I am not getting the solution. Any suggestion will be much appreciated. Thanks.
.align-self-center will work.
<div class="col-sm-6 align-self-center">
</div>
You could use flexbox, just use the snippet on parent of the button in which you want to center the item.
(in your case .row div)
.row {
display: flex;
align-items: center;
}
Here is an example: https://jsfiddle.net/xsmnnLoc/
But this method doesn't work on IE 10 and lower
Related
I want to center following divs in the middle of the screen HORIZONTALLY AND VERTICALLY (2 SITES). What should I add to my HTML code to make it works? I managed to center div from first site vertically by adding justify-content-center class to 2nd div, but the same is not working for second site.
first site
<div class="container">
<div class="row justify-content-center">
<div class="form-group col-md-4">
<form method="post" th:object="${redirectionDto}">
<div class="form-group">
<label for="urlinput">URL</label>
<input type="text" id="urlinput" class="form-control" th:field="*{url}" name="urlinput"
maxlength="255"/>
</div>
<div class="form-group">
<label for="date">Date:</label>
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1"
th:field="*{expireDate}" id="date" placeholder="Date"/>
<div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar-alt"></i></div>
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
</div>
</div>
</div>
second site
<div class="container">
<label>Short link: </label>
<p th:text="${redirectionDto.alias}"></p>
<label>Expire date: </label>
<p th:text="${#dates.format(redirectionDto.expireDate, 'dd/MM/yyyy h:mm a')}"></p>
<a th:href="#{/}" class="btn btn-primary">Return</a>
</div>
Wrap it like so:
<div class="container">
<div class="row justify-content-center">
<!-- START THE DIV -->
<label>Short link: </label>
<p th:text="${redirectionDto.alias}"></p>
<label>Expire date: </label>
<p th:text="${#dates.format(redirectionDto.expireDate, 'dd/MM/yyyy h:mm a')}"></p>
<a th:href="#{/}" class="btn btn-primary">Return</a>
</div>
<!-- /END THE DIV -->
</div>
how i normally align <div>s to the centre is by using margins, so using some maths, you would do:
full width of page (say, 100%) - div width, then half this, that's your left margin. then do the same for height, that's your top margin.
this has mostly worked in my experience. hope i am of help!
Can you please check the below code? Hope it will work for you.
If you want to place your content in middle both horizontally and vertically then flex utility classes are very helpful.
In your First site code, you have used justify-content-center with class="row" which centers the content horizontally, if you will use align-items-center class along with it then the content will be centered vertically. In this case, if you will give a particular height to your .row class then you can see the content div in the center.
<div class="row justify-content-center align-items-center">
</div>
.container .row {
height: 100vh;
}
In your Second site, you need to wrap your content in a div and need to give the same classes "row justify-content-center align-items-center" to its parent div similarly as you give it in your first site code.
Please refer to this link:
1st Site:
https://jsfiddle.net/yudizsolutions/schgm9xk/
2nd Site:
https://jsfiddle.net/yudizsolutions/tk2eqdsx/
This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Closed 3 years ago.
The community reviewed whether to reopen this question 12 months ago and left it closed:
Original close reason(s) were not resolved
In my site header, I have 3 divs. For a logo, for search input and for a cart link. I want to align these 3 .col-md-4 divs vertically centered.
The divs have an align-items-center class, but it's not doing what I want, the divs arent centered vertically.
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-4 d-flex justify-content-center justify-content-md-start align-items-center">
<img src="images/assets/logo.png" alt="" class="img-fluid"</a>
</div>
<div class="col-md-4 d-flex justify-content-center justify-content-md-center align-items-center">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Termékek keresése..." aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Keresés</button>
</div>
</div>
</div>
<div class="col-md-4 d-flex justify-content-center justify-content-md-end align-items-center">
<b>Kosár</b>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
I attach a photo of that how is the header looking now. The header has a grey border at its bottom.
align-items: center; is not enough to center vertically because you don't have the height defined. In other words, you have to define the header height as 100% of the page, if you want it to be centered vertically. See the example bellow:
body{
height: 100vh;
}
.header{
height:100%;
}
.container{
height: 100%;
}
.row{
height: 100%;
display:flex;
align-items: center;
}
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-4 d-flex justify-content-center justify-content-md-start align-items-center">
<img src="images/assets/logo.png" alt="" class="img-fluid"</a>
</div>
<div class="col-md-4 d-flex justify-content-center justify-content-md-center align-items-center">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Termékek keresése..." aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Keresés</button>
</div>
</div>
</div>
<div class="col-md-4 d-flex justify-content-center justify-content-md-end align-items-center">
<b>Kosár</b>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
simple add to your flex container:
.row{
align-items: center;
}
Better if you find a more specific class (like add classname center and target .row.center)
your code is correct, the problem is that the row height is based on the tallest child element (logo div for example) so you need to set the row height and the elements will align . Codepen
.header .container .row {
height : 200px;
background-color : grey;
}
How would I go about centering this button besides the image?
top:50% won't work as the parent does not have a fixed size
<div class="row">
<div class="col-xs-12 col-sm-2">
<p style="padding:20px;"></p>
<img src="img/logo.png" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-2">
<div class="btn-group btn-block" role="group">
<a type="button" class="btn btn-block btn-warning" style="top:50%;">Sign in
</a>
</div>
</div>
</div>
Here is a fiddle example:
https://jsfiddle.net/DTcHh/#&togetherjs=d6NLIis7u4
I used display: table, display: table-cell and vertical-align: middle tricks, among others, on this one:
https://jsfiddle.net/qh7nrcyh/1/
Please check if it works on you.
The best way to vertically center something with css is using line-height. But this only works if you have a fixed height and a single line of text.
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;
}
I am building a form in Twitter Bootstrap but I'm having issues with centering the button below the input in the form. I have already tried applying the center-block class to the button but that didn't work. How should I fix this?
Here is my code.
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="singlebutton"></label>
<div class="col-md-4">
<button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
Next Step!
</button>
</div>
</div>
Wrap the Button in div with "text-center" class.
Just change this:
<!-- wrong -->
<div class="col-md-4 center-block">
<button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">Next Step!</button>
</div>
To this:
<!-- correct -->
<div class="col-md-4 text-center">
<button id="singlebutton" name="singlebutton" class="btn btn-primary">Next Step!</button>
</div>
Edit
As of BootstrapV4, center-block was dropped #19102 in favor of m-*-auto
According to the Twitter Bootstrap documentation: http://getbootstrap.com/css/#helper-classes-center
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="singlebutton"></label>
<div class="col-md-4 center-block">
<button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
Next Step!
</button>
</div>
</div>
All the class center-block does is to tell the element to have a margin of 0 auto, the auto being the left/right margins. However, unless the class text-center or css text-align:center; is set on the parent, the element does not know the point to work out this auto calculation from so will not center itself as anticipated.
See an example of the code above here: https://jsfiddle.net/Seany84/2j9pxt1z/
<div class="row">
<div class="col-sm-12">
<div class="text-center">
<button class="btn btn-primary" id="singlebutton"> Next Step!</button>
</div>
</div>
</div>
add to your style:
display: table;
margin: 0 auto;
<div class="container-fluid">
<div class="col-sm-12 text-center">
<button class="btn btn-primary" title="Submit"></button>
<button class="btn btn-warning" title="Cancel"></button>
</div>
</div>
You can do it by giving margin or by positioning those elements absolutely.
For example
.button{
margin:0px auto; //it will center them
}
0px will be from top and bottom and auto will be from left and right.
I tried the following code and it worked for me.
<button class="btn btn-default center-block" type="submit">Button</button>
The button control is in a div and using center-block class of bootstrap helped me to align the button to the center of div
Check the link where you will find the center-block class
http://getbootstrap.com/css/#helper-classes-center
use text-align: center css property
Update for Bootstrap 4:
Wrap the button with a div set with the 'd-flex' and 'justify-content-center' utility classes to take advantage of flexbox.
<!-- Button -->
<div class="form-group">
<div class="d-flex justify-content-center">
<button id="singlebutton" name="singlebutton" class="btn btn-primary">
Next Step!
</button>
</div>
</div>
The benefit of using flexbox is being able to add additional elements/buttons on the same axis, but with their own separate alignment. It also opens up the possibility of vertical alignment with the 'align-items-start/center/end' classes, too.
You could wrap the label and button with another div to keep them aligned with each other.
e.g. https://codepen.io/anon/pen/BJoeRY?editors=1000
You can do the following. It also avoids buttons overlapping.
<div class="center-block" style="max-width:400px">
Accept
Reject
</div>
It works for me
try to make an independent <div>then put the button into that.
just like this :
<div id="contactBtn">
<button type="submit" class="btn btn-primary ">Send</button>
</div>
Then Go to to your CSSStyle page and do the Text-align:center like this :
#contactBtn{text-align: center;}
For Bootstrap 3
we divide the space with the columns, we use 8 small columns (col-xs-8), we leave 4 empty columns (col-xs-offset-4) and we apply the property (center-block)
<!--Footer-->
<div class="modal-footer">
<div class="col-xs-8 col-xs-offset-4 center-block">
<button type="submit" class="btn btn-primary">Enviar</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
</div>
</div>
For Bootstrap 4
We use Spacing, Bootstrap includes a wide range of abbreviated and padded response margin utility classes to modify the appearance of an element.
The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.
more info here: https://getbootstrap.com/docs/4.1/utilities/spacing/
<!--Footer-->
<div class="modal-footer">
<button type="submit" class="btn btn-primary ml-auto">Enviar</button>
<button type="button" class="btn btn-danger mr-auto" data-dismiss="modal">Cerrar</button>
</div>
I had this problem. I used
<div class = "col-xs-8 text-center">
On my div containing a few h3 lines, a couple h4 lines and a Bootstrap button.
Everything besides the button jumped to the center after I used text-center so I went into my CSS sheet overriding Bootstrap and gave the button a
margin: auto;
which seems to have solved the problem.
or you can give specific offsets to make button position where you want simply with bootstrap grid system,
<div class="col-md-offset-4 col-md-2 col-md-offset-5">
<input type="submit" class="btn btn-block" value="submit"/>
this way, also let you specify button size if you set btn-block.
sure, this will only work md size range, if you want to set other sizes too, use xs,sm,lg.