I am trying to center two of my divs in Bootstrap 3's grid. The problem is, together they span 9 columns, which is an odd number of columns. My first div spans 6 columns, and the second one spans 3 columns. This leaves me with 3 extra columns for whitespace, but I'm not able to figure out how to divide this up equally to the left and right. I can either have 2 empty columns on the left and 1 on the right or the other way round.
For example, this gets left aligned:
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-6">
<div id="myFirstDiv"></div>
</div>
<div class="col-md-3">
<div id="mySecondDiv"></div>
</div>
<div class="col-md-1"></div>
</div>
If there was a way to make the first column 1.5 and the last 1.5, that would be have been perfect. Is there anything I can do to center my content?
I have tried using center-block, but this doesn't seem to have any effect.
So you want a .col-md-1andahalf class?
Just create one, if that's what you need:
#media (min-width: 992px)/*or whatever*/{
.col-md-1-5 {
width: 12.5%;
}
//.....
}
Related
I'm getting back into frontend, so I'm making myself a portfolio page for practice, I'm using the css framework called Bulma I can't figure out why the "1" on the left isn't centered. I have 4 total divs in the body, 1 to hold the 3 columns, and the 3 columns sized in thirds
These are what my divs look like. I didn't feel like making a navbar in traditional CSS, so I used a framework for it. I'm using the repl IDE, here is the website where you can view my issue.
I basically just want those 3 divs to be centered, so I can add text in the middle div, labeled as "2". I made the two other divs so I can set some "boundaries".
<div class="columns"> <!--defines where the columns are-->
<div id="left" class="column is-one-third">1</div>
<div class="column is-one-third">2</div>
<div class="column is-one-third">3</div>
</div>
I see from your example that the divs are centered, but the text inside them is not.
<div class="columns">
<div class="column is-one-third has-text-centered">1</div>
<div class="column is-one-third has-text-centered">2</div>
<div class="column is-one-third has-text-centered">3</div>
</div>
I centered the text with has-text-centered and added a background color to demonstrate:
I need a section in bootstrap where there are two columns (6 and 6) in a row.
The left 6 column div needs to have the fluid effect where its contains stretch to the browser window's left edge.
The right 6 column div needs its contents to match/be kept within the right-side confines of the other sections of the page that have a normal (non-fluid) container class (which has a width of 1170px).
How can I best achieve this effect?
This is for 1170px wide container, you need media queries for the rest of the sizes. Hopefully helps.
CSS:
.stretch-left {
margin-left: calc((100vw - 1170px) / -2);
}
HTML:
<div class="container">
<div class="row">
<div class="col-md-6 stretch-left">
content
</div>
<div class="col-md-6">
content
</div>
</div>
</div>
I have 3 rows in my webpage using bootstraps grid. The first row has 3 divs of equal width while the next two rows have 2 divs of the same width left aligned. However, the last div of the first row is longer than the first two divs and I want it to overflow into the second row. How would I do this?
I have a link here of what I mean: http://imgur.com/a/mxnaH
You would have to separate the page in example "content-left, content-right". Bootstrap isn't supposed to be used to have rows overflow in to another. So if you give content-left a width of like 8, and content-right 4. That way you can have different heights and make it seem like it's overflowing
Try this grid:
<div class="container">
<div class="row">
<div class="col-8">
<div class="row">
<div class="col-6"></div>
<div class="col-6"></div>
<div class="col-6"></div>
<div class="col-6"></div>
</div>
</div>
<div class="col-4"></div>
</div>
</div>
I have a bootstrap grid/row that looks like this...
<!--column a-->
<div class="col-sm-3">
</div>
<!--column b-->
<div class="col-sm-6">
<!-- I want this div to always be fixed at the top of column b and take up 15% of column b's height-->
<div>
<h1 id="mainText">
Some main text
</h1>
</div>
<!-- I want these 2 divs to be centered within the remaining 85% of column b's height-->
<div>
<p id="bodyText">
Some body text
</p>
</div>
<div>
<h2 id="detailText">
Some detail text
</h2>
</div>
</div>
<!--column c-->
<div class="col-sm-3">
</div>
I want the top div within column b (that contains the h1 element "mainText"), to always be fixed at the top - accounting for, say the top 15% of the column.
I then want the remaining 2 divs (containing "bodyText" and "detailText") to be vertically centered/spread-out within the remaining 85% of column B.
I can achieve the vertical center effect on all 3 divs within col-sm-6 by simply adding "margin:auto" to col-sm-6 (but of course this means "mainText" might slip down further than 15% of column B). So I experimented adding another div (with "margin:auto") around the last 2 divs, but it had no effect at all.
Does anyone have any suggestions on the best way to combine these 2 requirements of fixing one div within a bootstrap column, and spreading out the other 2? Really struggling to visualise the right way to structure this so appreciate any thoughts at all.
UPDATED
If I give a max-width to .container then my spans stops lining up properly.
<div class="container" style="max-width:940px">
<div class="row">
<div class="span4" style="background-color:#F00">1</div>
<div class="span4" style="background-color:#F00">2</div>
<div class="span4" style="background-color:#F00">3</div>
<div class="span4" style="background-color:#F00">4</div> <!-- make a new line-->
<div class="span4" style="background-color:#F00">5</div>
</div>
</div>
It seems whatever I wrap my spans in it has the same effect.
Is there any way to work around with this?
LIVE PREVIEW HERE
It's because Bootstrap has a width of 12 columns.
Your 3 first div have 4 + 4 + 4 columns, so it breaks line before print others div.
Try to reduce width... By example with class "span2" and you'll see the change :)
Bootstrap operates a 12 column CSS grid system you have 5 * span4 in one row, a row can only contain 3 * span4 before it'll wrap to a new row.
If you want one solid row just remember the sum of spanX can't be > than 12
See: http://getbootstrap.com/css/#grid-example-basic