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.
Related
I'm new to CSS-frameworks.
Normally I start my markup within the body by adding a div with the class "wrap". The purpose of that, is to get the content horizontally centered. And for having a top-, bottom-margin.
Now with Foundation I would like to keep that approach. But I'm not sure where to put the "wrap"-div.
That's what I got currently:
.wrap {
margin: 10px auto;
}
<div class="wrap">
<div class="row">
<div class="small-12 columns">
<div class="callout">
<h1>Lorem Ipsum</h1>
</div>
</div>
</div>
</div>
Demo with Foundation added on CodePen: http://codepen.io/mizech/pen/LWBOvQ
I mean: It works but I'm not sure if I do it right.
Shall I keep it the way it is? Or should I put the "wrap"-div somewhere else?
Should I perhaps leave the "wrap"-div at all (when using Foundation) and doing something else instead?
You don't need a wrap div. Foundation has a maximum width set on the .row so anything inside it will conform to that grid. If you need you can add a class with vertical margins or padding to that row. If you need a full width row you just add the class .expanded to it.
I use Bootstrap 3.3.7 and I wonder how to display:
Header element h1 aligned to the left of the page-header
button element aligned to the right of the page-header
Both elements being on the same baseline
Current code is pasted below and the working example is on JSFiddle. My question is similar to this question, but proposed solution does not work for me.
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="page-header">
<div class="pull-left">
<h1>Hello World <small>Home Page</small></h1>
</div>
<div class="pull-right">
<button class="btn btn-primary">Submit</button>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</body>
Your problem is with the CSS, not the markup
The fiddle you provided works as expected, the reason why the elements don't seem to align properly is because bootstrap sets a default margin on h1 elements while it doesn't do so with buttons.
The easiest way to fix this is to add
h1 {
margin: 0;
}
To your site's CSS.
Alternatively for similar output in a "bootstrappy" way, you can look into bootstrap navbars and branded bootstrap navbars.
Remove top margin from header element:
.page-header h1 {
margin-top: 0;
}
I am attempting to embed ShareThis code in to a website created using Bootstrap.
Problem is that for some reason the bottom of both buttons is cut off and also I cannot seem to center the buttons using Bootstrap column offsets as it seems impossible to get both buttons exactly centered using this method.
What is the solution here?
<div class="row">
<div class="col-lg-12">
<span class='st_facebook_vcount' displayText='Facebook'></span>
<span class='st_twitter_vcount' displayText='Tweet'></span>
</div>
</div>
I'm not too familiar with the ShareThis buttons, do you have a link to view the site?
Regarding the centering, currently you are using a col-lg-12 which means it takes up 100% of the width and everything inside (your buttons) would be left aligned by default. You wouldn't necessarily need to use the bootstrap column offset but just put the spans in a wrapper as below. You can find out more about the Bootstrap Grid here http://getbootstrap.com/css/#grid.
<div class="row">
<div class="col-lg-12">
<div class="social-wrapper">
<span class='st_facebook_vcount' displayText='Facebook'></span>
<span class='st_twitter_vcount' displayText='Tweet'></span>
</div>
</div>
</div>
Then add text-align:center to the wrapper.
.social-wrapper {
text-align: center;
}
Check out a JSFiddle here: https://jsfiddle.net/hez7pqbo/
I have created an html page and I have used <center> to make it to come at the center of the div like as shown below, but the error alert message is not coming at the center of the portlet-body
Can anyone please tell me some solution for this
Plunker
<div class="portlet-body">
<center>
<div class="alert alert-error">
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
</center>
</div>
You cannot vertical center any element directly unless
- All parents have 100% height.
There are some neat solutions to allow vertical centering, and one latest addition to CSS3 standards called - Flexbox
Some popular tricks:
Use CSS Table-Cell layout
<div class="table">
<div class="table-cell">
<!-- You apply 'vertical-align: center' property to table-cell class -->
</div>
</div>
Use Flex Layout
.container {
display: flex;
align-items: center;
}
Read further: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
Use Ghost element
Refer Chris Coyer here: https://css-tricks.com/centering-in-the-unknown/
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.