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/
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'm trying to center a vertical button group horizontally using d-flex, and change its width to 50% of the parent element, but after changing the width it gets aligned to the left. What gives?
.myclass {
border: 1px solid green;
}
.btn-group-vertical-50 {
width: 50%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<h4>Button group width: 100%</h3>
<div class="card">
<div class="card-body">
<div id="btn-group-centering" class="d-flex flex-grow flex-column justify-content-center myclass">
<div id="button-group" class="btn-group-vertical myclass" role="group">
<button type="submit" name="siren-btn" class="btn btn-outline-info">5 second
siren</button>
<button type="submit" name="reboot-btn" class="btn btn-outline-warning">Reboot</button>
</div>
</div>
</div>
</div>
<br>
<h4>Button group width: 50%</h4>
<div class="card">
<div class="card-body">
<div id="btn-group-centering" class="d-flex flex-grow flex-column justify-content-center myclass">
<div id="button-group" class="btn-group-vertical-50 myclass" role="group">
<button type="submit" name="siren-btn" class="btn btn-outline-info js-siren-btn"><i class="fas fa-bullhorn mr-3"></i>5 second
siren</button>
<button type="submit" name="reboot-btn" class="btn btn-outline-warning js-reboot-btn"><i class="fas fa-power-off mr-3"></i>Reboot</button>
</div>
</div>
</div>
</div>
I am working on an Express JS web app based on Bootstrap 4 styling as front-end.
No custom stylesheet is involved.
My HTML with Bootstrap 4 styling:
<div class="container">
<div class="row text-center">
<div class="col-sm-6">
<div class="grid-container">
<div><a class="btn btn-primary btn-lg btn-block" href="items/addItem">Add a New Item</a></div>
</div>
</div>
<div class="col-sm-6">
<div class="grid-container">
<div><a class="btn btn-primary btn-lg btn-block" href="items/showItemList?status=0">Originated items</a></div>
</div>
</div>
<div class="col-sm-6">
<div class="grid-container">
<div><a class="btn btn-primary btn-lg btn-block" href="items/showItemList?status=1">Equipment Catelogue</a></div>
</div>
</div>
<div class="col-sm-6">
<div class="grid-container">
<div><a class="btn btn-primary btn-lg btn-block" href="items/showItemList?status=4">Items removed from service</a></div>
</div>
</div>
<div class="col-sm-6">
<div class="grid-container">
<div><a class="btn btn-primary btn-lg btn-block" href="items/showItemList?status=3">Items Under Evaluation</a></div>
</div>
</div>
<div class="col-sm-6">
<div class="grid-container">
<div><a class="btn btn-primary btn-lg btn-block" href="items/showItemList?status=5">Evalutaion Completed but not proceed</a></div>
</div>
</div>
</div>
</div>
I would need to center the text in each DIV element in the grid-container. However, they are all top aligned as below.
You are looking for a vertical-align, and there are multiple ways to get this done.
Here is one of them
div.center.middle {
background: blue;
text-align: center;
vertical-align: middle;
border-radius: 5px;
width: 150px;
height: 85px;
display: table-cell;
}
<div class="center middle">
Test text
</div>
Note that in order for the vertical-align: center to work I had to set the display: table-cell;.
I'm using Bootstrap's grid system. I have 3 divs inside a "row", and inside each of those divs are nested controls.
When I horizontally decrease the browser size, the 2nd and 3rd div in the row are overlapping the 1st div. I want them to wrap, not overlap.
How can I achieve this?
Here is my code:
<!-- SEARCH CONTROLS -->
<div class="row">
<!-- Left side search boxes and search button -->
<div class="col-xs-5">
<div class="article" id="SAorPIList">
<select style="min-width: 215px; max-width: 300px;" class="col-xs-4 form-control" data-bind="value: selectedSAPIValue, options: saorpi, optionsText: 'Name', optionsValue: 'CmeTypeId', optionsCaption: 'Select SA or PI'"></select>
</div>
<div class="col-xs-5" style="padding-top: 20px;">
<select style="max-width: 300px;" class="specialties-class form-control" name="Name" id="SpecialtyId"></select>
</div>
<div class="col-xs-5" style="max-width: 150px; padding-top: 20px; padding-left: 175px;">
<button id="btnDropDownsSearch" class="btn btn-search collapsed" type="button">
<i class="icon-search"></i>
</button>
</div>
</div>
<!-- The world "OR" in the center of the page -->
<div class="col-xs-2" style=" padding-left: 75px; padding-top:50px;">
<strong style="display:inline;">OR</strong>
</div>
<!-- Right side search box -->
<div class="col-xs-5 pull-left" style="padding-bottom: 50px; min-width:400px;">
<span><strong style="text-align:left;">Activity Search</strong></span>
<div class="col-xs-4 input-group pull-left input-group-lg" style="padding-top:50px;">
<input id="txtFreeformSearch" class="form-control" type="search" style="min-width:175px;" />
<div class="input-group-btn">
<button id="btnFreeformSearch" class="btn btn-search collapsed" type="button">
<i class="icon-search"></i>
</button>
</div>
</div>
</div>
</div>
When you say, you nesting controls to div; Do you mean somethink like this?
.row > div {
background: lightgrey;
border: 1px solid grey;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-md-4</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-md-4</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-md-4</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-md-4</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-md-4</div>
</div>
I solved this by defining min-width inside a good number of the tags.
This allowed the DIVs to wrap in PC, tablet, and mobile formats.
I would post the resulting HTML, but I think it would affect too few readers to make it worthwhile. I say this because there is a knockout control and select2 control within the HTML, and some of their UI properties are defined in javascript.
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;
}