http://twitter.github.com/bootstrap/scaffolding.html
I tried like all combinations:
<div class="row">
<div class="span7 offset5"> box </div>
</div>
or
<div class="container">
<div class="row">
<div class="span7 offset5"> box </div>
</div>
</div>
changed span and offset numbers...
But I cant get a simple box perfectly centered on a page :(
I just want a 6-column-wide box centered...
edit:
did it with
<div class="container">
<div class="row" id="login-container">
<div class="span8 offset2">
box
</div>
</div>
</div>
But the box is too wide, is there any way I can do it with span7 ?
span7 offset2 gives extra padding to the left span7 offset3 extra padding to the right...
Bootstrap's spans are floated to the left. All it takes to center them is override this behavior. I do this by adding this to my stylesheet:
.center {
float: none;
margin-left: auto;
margin-right: auto;
}
If you have this class defined, just add it to the span and you're good to go.
<div class="span7 center"> box </div>
Note that this custom center class must be defined after the bootstrap css. You could use !important but that isn't recommended.
besides shrinking the div itself to the size you want, by reducing span size like so... class="span6 offset3", class="span4 offset4", etc... something as simple as style="text-align: center" on the div could have the effect you're looking for
you can't use span7 with any set offset and get the span centered on the page (Because total spans = 12)
Bootstrap3 has the .center-block class that you can use. It is defined as
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
Documentation here.
If you want to go full-bootstrap (and not the auto left/right way) you need a pattern that will fit within 12 columns e.g. 2 blanks, 8 content, 2 blanks. That's what this setup will do.
It only covers the -md- variants, I tend to snap it to full size for small by adding col-xs-12
<div class="container">
<div class="col-md-8 col-md-offset-2">
box
</div>
</div>
Sounds like you just wanted to center align a single container.
The bootstrap framework might be overcomplicating that one example, you could have just had a standalone div with your own styling, something like:
<div class="login-container">
<!-- Your Login Form -->
</div>
and style:
.login-container {
margin: 0 auto;
width: 400px; /* Whatever exact width you are looking for (not bound by preset bootstrap widths) */
}
That should work fine if you are nested somewhere within a bootstrap .container div.
add the class centercontents
/** Center the contents of the element **/
.centercontents {
text-align: center !important;
}
#ZuhaibAli code kind of work for me but I changed it a little bit:
I created a new class in css
.center {
float: none;
margin-left: auto;
margin-right: auto;
}
then the div become
<div class="center col-md-6"></div>
I added col-md-6 for the width of the div itself which in this situation meant the div is half the size, there are 1 -12 col md in bootstrap.
Follow this guidance https://getbootstrap.com/docs/3.3/css/
Use .center-block
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
wrap the div in a parent div with class row then add style margin:0 auto; to the div
<div class="row">
<div style="margin: 0 auto;">center</div>
</div>
Related
I'm kinda stuck with this small issue that's breaking my layout. On the home page I have a blue box which is serving as my main container. Within my main container there are two more boxes which are on the right side of the screen which contain contact info. Also within the headline-container there is an H2 which say's -- "Satisfaction is our strongest point"
So what's wrong? Well nothing looks wrong atm but what if wanted to accurately center the H2 "Satisfaction is our strongest point" within it's headline-container which is the light blue large rectangle. So I write this CSS to try accurately center the text within headline-container
%align {
position: relative;
top: 50%;
-webkit-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
}
Hold my breath and bang crash..
My entire layout breaks..I'm thinking this due to a parenting issue with the H2. In my HTML I am inserting the h2 class just bellow the div class for large-8 columns which in this case is not the correct parent to (center the text within.) The element that I want to center the text within is headline-container (light blue box). To simply put it -- My layout seems to be breaking as soon as I change the h2's parent to headline-container and add the styles above.
Here is the HTML
<div class="headline-container">
<div class="row">
<div class="large-8 columns">
<h2 class="satisfaction">Satisfaction is,</br>Our Strongest Point</h2>
</div>
<div id="contact-info" class="large-4 columns">
<div class="phone-box">
<div class="number">
<a id="phone-number" href="tel:808-848-8821">808-848-8821</a>
</div>
</div>
<div class="email">
<div class="email-box"><a id="email-contact" href="mailto:etoile#hawaii.rr.com">etoile#hawaii.rr.com</a>
</div>
</div>
</div>
</div>
</div>
I've used a temporary not so accurate way of centering my H2 by applying this padding to the text. It looks fine but something deep down tells me it's not 100% accurate and that bothers me..Any suggestions on why my layout is breaking?
padding-top: 40px;
Here's the link
http://kapena.github.io/pp_web/
Thax for reading and I look forward to you're suggestions and comments.
Setting a fixed height to the container (div.columns) of the h2 fixes this.
Example
<div class="large-8 columns">
<h2 class="satisfaction">Satisfaction is,</br>Our Strongest Point</h2>
</div>
CSS
.columns {
height: 218px;
}
.satisfaction {
position: relative;
top: 50%;
transform: translateY(-50%);
}
You could just use h2{text-align: center} or failing that .row{display: block; position: relative; margin: 0 auto; width: 100%;} you dont need the translates
try this for h1 element
h2{
display:inline-block;
margin: 0 auto;
}
I need to split window in to the 2 horizontal divs by height:50%; width:100%:, is it possible with bootstrap? Tried like this:
<div class="container-fluid">
<div class="row">
<div class="col-lg-12" style="border:1px solid red">
1
</div>
<div class="col-lg-12" style="border:1px solid red">
2
</div>
</div>
</div>
With green matched how it should be...
Just a suggestion calculate the height of the .row div dynamically using javascript. CSS height:50% will only work if the parent div is given some height.
EG: .row{ height:500px; } will work fine.
But calculate this height using jQuery function $(window).height().
Assuming this is your only markup you can give each parent element a height of 100%:
body,html {
height: 100%;
}
.container-fluid {
height: 100%;
}
.row {
height: 100%;
}
.col-lg-12 {
height: 50%;
}
DEMO
Not sure why you would need to have 2 boxes with no content containing set heights?
Surely the rational thing to do is fill it with content first, then add padding to your divs to make the design the way you want it.
Adding heights to an empty div is asking for trouble early in your build stage.
Simply add 1 x id to each col-lg-12 as shown below:
<div class="col-lg-12" id="topContent" style="border:1px solid red">
1
</div>
<div class="col-lg-12" id="bottomContent" style="border:1px solid red">
2
</div>
Now when you finished adding content simply reference the ID and add padding top or bottom to your id and you will find it is a lot simpler to code going forward. Trying to mess with set heights early really is looking for problems if going responsive.
I warned you, I can be a little vague
Anyway, what I am after are those pages that fill the whole screen, but if you scroll down and you come to a different section ( some specific content or just a footer), it breaks away from the previous content by having a different background.
Sorry, if I sleep on it, I can maybe come up whith a better explanation and/or an example page.
Does that style have a name and how is it done? If it needs to be responsive?
thanks
Yes. It's simple to do. Setup like so, and customize to your heart's content.
<div id="header" class="container">
<div class="wrapper">
[...]
</div>
</div>
<div id="feature_area" class="container">
<div class="wrapper">
[...]
</div>
</div>
<div id="content" class="container">
<div class="wrapper">
[...]
</div>
</div>
<div id="footer" class="container">
<div class="wrapper">
[...]
</div>
</div>
CSS:
.container {
width: 100%;
text-align: center;
}
.wrapper {
margin: 0px auto;
width: 70%;
text-align: left;
}
The parent (container) <div>s will stretch to 100% page width. The child (wrapper) <div>s will stretch to 70% of their parents (or, you can set this to fixed pixel dimensions and change based upon screen dimensions) and will be centered. You apply decorative backgrounds to the parent .container like:
#header {
background: #ff0000;
}
#footer {
background: #000;
}
#content {
background: url(img/bg_pattern.gif);
}
#feature_area {
background: url(img/hero_feature_img.jpg) top center no-repeat;
}
I would to create something like this using the 960 grid, is it possible using the framework or do i have to do some custom work?
960.gs and other CSS Frameworks use the padding and margins, all you have to do is to override them
this is the normal code
<div class="span-18">
<div class="span-4 last">
</div>
</div>
use something like
<div class="span-18 cut-margin">
<div class="span-4 last cut-margin">
</div>
</div>
and
.cut-margin { margin-right: 0 !important; }
and set the new width of your elements to the element + the margin/padding you are using.
You can always create your own bigspan classes, for example:
.bigspan-4 { width: 475px; margin-right: 0px; }
.bigspan-18 { width: 715px; margin-right: 0px; }
and
<div class="bigspan-18">
<div class="bigspan-4">
</div>
</div>
remember that you can always design your onw grid
I'm having an issue aligning three divs inside a parent div, the effect I need is the following
|IMAGE| +TEXT+ |IMAGE|
Each div contains an Image (2) and the text (1) respectively. Aligning them is easy, the problem is that I want the CENTER div to auto width to the size of the browsers' window and keep the other IMAGE divs always on the right and left side respectively.
Something like this for example, if the user maximizes the window:
|IMAGE| +++++++++++++++++++TEXT++++++++++++++++++++++++ |IMAGE|
As you can see, the idea is that the center div grows, and auto width but keeping the structure.
How could I get that behaviour? Thanks in advance.
#container { text-align: center; }
#div-1 { float: left; }
#div-2 { display: inline; }
#div-3 { float: right; }
If that still doesn't behave how you want, please give more detailed requirements.
Here is another inline implementation for three images side by side:
<div style="text-align:center">
<div style="float: left"><img src="image1.png"/></div>
<div style="display: inline"><img src="image2.png"/></div>
<div style="float: right"><img src="image3.png"/></div>
</div>
This works rather well as well.
.container{width: 100%; padding: 5px;}
.fig-left {float: left;}
.text {float: left;}
.fig-right{float: right;}
/* add margins maybe */
.text, .fig-right, p{margin: .75em;}
and HTML https://codepen.io/tradesouthwest/pen/MWELwGN to test
<div class="container">
<div class="fig-left">
<img src="https://picsum.photos/id/1055/200/300"/>
</div>
<div class="text">
<p>ABCDEFGHIJKLMNOP don't forget the alt in images QRSTUVWXYZ</p>
</div>
<div class="fig-right">
<img src="https://picsum.photos/id/1055/200/300"/>
</div>
</div>