I have a layout that i need to build as can be seen in the image:
Grey stands for header, and there are no problems there. As for the body, I've split it into 3 divs as follows:
<div class="row">
<div class="col-lg-3">
<p>text positioned right here</p>
</div>
<div class="col-lg-6">
<img src="path/to/image.jpg">
</div>
<div class="col-lg-3">
<p>text positioned right here</p>
</div>
</div>
The problem I have is that I need that text to be vertically centered, and I don't know how. I've tried this solution Twitter Bootstrap 3, vertically center content but it doesn't seem to work for me (maybe I'm doing something wrong). I've tried adding padding-top to fix it, but it messes up the mobile display (as expected).
Please, can anyone help?
Thank you.
Text align property is only for horizontal text align, if you want to make text align vertically you need to use position property, we can make using text align something like that. for example: use center of the screen property.
position:relative;
left:50%; top:50%;
also minus margin property off of the container with.
The simplest way to center vertically is to add display:table to the containing element, and display:table-cell to the element you want centered. Bootstrap has a .text-center class to handle the horizontal centering.
http://www.bootply.com/lTigluKakK
Using your example as template:
<div class="col-xs-3 text-center v-align-container">
<p class="v-align-content">text positioned right here</p>
</div>
<div class="col-xs-6 text-center">
<img src="//placehold.it/400x400">
</div>
<div class="col-xs-3 text-center v-align-container">
<p class="v-align-content">text positioned right here</p>
</div>
CSS:
.v-align-container{display: table;height:400px} /* height set to match img (plus padding if needed) */
.v-align-content{display:table-cell;vertical-align:middle}
This works great if you're able to define the height of the sidebar divs. But, if you need them to match the height of the center element dynamically, you'll need a little more bootstrap magic to tie them together, but this will still apply to centering the content within those sidebars.
Related
I have a couple of divs sat side by side that need the button to be on the bottom.
I need the button to sit on the bottom of the .col-sm-4 container, without the h3 tag pushing it further out. Does anyone have a hack or some kind of solution?
The h3 tag size needs to be responsive as its text may change. I've got it to a point where the boxes are pushed out of the container, but now I'm stuck.
____________________Better explanation_______________
My h3 tag is pushing my .col-sm-4 outside of the container. I need the button to be at the bottom of the div.
In this js.fiddle, I have provided two divs. The first one is where I want the button, but I need the h3 tag to look like div 2. I can't seem to achieve the second div without the button being pushed out of the container.
https://jsfiddle.net/19obrm0q/1/
edit - h4 -> h3.
You can't put an element with nonzero height in the same container as a full-height div and expect both to fit in 100% of the parent's height. That's what height: 100% means.
I've tried again, this time keeping the h3 outside the col-sm-12 as required. To make this work I've moved the full-height class up a level to the col-sm-4. I also had to move the center-bottom element outside the col-sm-12. This is because now that the col-sm-4 is the element with defined height, it should also be the element which defines the position context for the absolute element.
https://jsfiddle.net/19obrm0q/7/
First, your markup was a little different between the two columns: one had the h3 inside the parent div and the other had it before/outside, which was contributing to making them look different.
But my suggested solution is to pad the bottom of the parent so that there's sure to be room for the absolute positioned button.
Have a look:
https://jsfiddle.net/19obrm0q/3/
https://jsfiddle.net/19obrm0q/5/
After much fiddling about: BEFORE:
<div class="col-sm-12 bg-white pad-sm-top text-center full-height full-width">
<h3 class="clear-margin text-banner-activity fix text-center"> SOME TEXT</h3>
<p class="clear-margin">SOME TEXT</p>
<div class="center-bottom">
Learn more >
</div>
</div>
</div>
and AFTER:
<div class="col-sm-4 no-pad bg-white">
<h3 class="clear-margin text-banner-activity text-center">heading</h3>
<div class="col-sm-12 pad-sm-top pad-xlg-bot text-center">
inner
</div>
<a href="#" role="button" class="btn btn-activity-light btn-md center-bottom">
button
</a>
</div>
I moved the divs around and got rid of the div that was nesting the button, and now it works, the button sits on the bottom no matter the size of the column.
I'm trying to model the following design with Bootstrap.
Currently I've found a method to do this using "carousel-caption" class from bootstrap CSS but it doesn't seem to working as expected.
The html looks like this:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/1000x550" alt="test" class="img-responsive">
<div class="carousel-caption">
<h1>Text word1 word2 superlative.</h1>
</div>
</div>
</div>
</div>
You can see an example of on https://jsfiddle.net/3vf5gog4/2/
This produces a single title but the image doesn't stretch and the title is not vertically centered and I can't figure out how I should be adding another title beneath the current carousel title
This is one of those things with bootstrap that can trip you up. So the .container-fluid class has a padding around it and so to the other grid elements so thats causing the issues with the stretch. Vertically centred elements in CSS can be a pain there is one good method I've seen on it but I typically just eye ball the percent and add some precent
I've edited your fiddle to take out the bootstrap padding and centre that text.
https://jsfiddle.net/3vf5gog4/5/
Try this :
.carousel-caption{
postion:absolute;
top : 20%;
}
I'm trying to position sidebar on the right side in a site based on Bootstrap grid.
Well, this is very simplified layout that I've made - jsFiddle
I admit it's not the good use of bootstrap classes (rows etc.) but it works.
The problem is: the sidebar html code must be under the text and content (because of SEO), so it must be somehow positioned next to content (class .content).
I tried positioned it as an relative element but didn't have any luck.
The text in .text div does not have static height, it will change
The .content will have same height every time
Is this more what you were after?
<div class="container">
<div class="row">
<div class="col-xs-9 pull-right">
<div class="col-xs-12 content">Main</div>
<div class="col-xs-12 text">Lorem</div>
</div>
<div class="col-xs-3 sidebar pull-left">
<p>sidebar</p>
</div>
</div>
</div>
jsFiddle
Basically I've split your entire container 3 to 9, and then made your 'content' and 'text' blocks children of the '9' column. I then applied both the pull-left and pull-right class to the relevant containers.
I also fixed up your HTML a bit as it was missing a div tag. I also got rid of some of the text to make the code more readable to me!
There are some options I can choose from when it comes to horizontal center alignment with Bootstap.
I can either use offset class or use blank span class as a placeholder.
One other option can be using custom alignment like the following
.center {
float: none;
margin: 0 auto;
}
None of these options solve my issue because the content of the div container has to fill up the width by 100%.
Let's say I have the following
<div class="container-fluid">
<div class="row-fluid">
<div class="span4 offset4">
<button class="btn">1-1</button>
<button class="btn">1-2</button>
</div>
</div>
</div>
If the buttons do not fill up the whole div space of span4, I won't get the real center alignment. Perhaps, I can make the content stretch to 100% but I don't know if this is any good practice.
Here I have a canvas to play with. JS BIN
Since you have inline elements you can just use the .text-center class on the span, also your're probably better off using offsets than empty elements:
HTML
<div class="row-fluid">
<div class="span4 offset4 text-center">
<button class="btn">1-1</button>
<button class="btn">1-2</button>
</div>
</div>
Updated demo: http://jsbin.com/ayuFEhO/2/edit
You don't need add a new class, if you want horizontal align this buttons, just use .text-center here is a bin http://jsbin.com/UVeGejO/1/edit
Obs: text-center class already exist on twitter's bootstrap code.
have a look at my code.
http://jsfiddle.net/Q8V4H/6/
The text within p element Telephone Dialer is being aligned using top-down approach whereas i want to align it in the center from all positions i,e top right bottom and left. here is the example output my code is producing.
I don't want any space there instead the text Download PC Dialer should be aligned in center of the div i.e from left,right,top,bottom and not just left and right.
here is the example image of what i want to achieve.
if i use text-align:center it will only align the text in center from left and right, not from top and bottom, and in this case i want to align it from top and bottom too. how do i do it?
thank you
<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell;text-align:center;vertical-align:middle;padding:8px">
Download PC Dialer
</div>
</div>
<div style="display:table-row">
<div style="display:table-cell;text-align:center">
<img src="download.png">
</div>
</div>
</div>
This will give you the same behaviour as if you had used a table without the semantic issues of actually using a table. Works in all browsers except IE7 and below.
For horziontal alignment, you can use margin: 0 auto; on a fixed div element. For vertical alignment, you can set the line-height to be same as font-size.
Put it in a <div> and then put that in another <div>. The child div should have vertical-align: middle and line-height: Xpx where X is the height of the inner div.
Look here: http://phrogz.net/css/vertical-align/index.html