How can I get my rows 100% wide?


Tags: css,twitter-bootstrap

Problem :

I am having a few issues aligning some rows. I am displaying a section which takes up 100% height of the viewport. So when you view this section on your screen, you will only see this section.

Within this section, I have a title and subtitle. The title should be displayed near the top of the section, but the subtitle should be displayed vertically in the middle of the section. So if your screen is 1000px high (which will make this section 1000px in height) then the subtitle should be displayed at around the 500px point. My section currently looks like the following

<section class="block-hero">
  <div class="container container-table">
    <div class="row vertical-top-row">
      <div class="col-md-12 centerText">
        <h1 class="heroTitle">Some Title</h1>
      </div>
    </div>
    <div class="row vertical-center-row">
      <div class="col-md-12 centerText">
        <h2 id="subTitle">Some<br>Text</h2>
      </div>
    </div>
  </div>
</section>

And the CSS is like so

html, body {
  height:100%;
}
.site-wrapper {
    overflow: hidden;
    position: relative;
    top: 0;
    width: 100%;
}

.block-hero {
  height:100%;
  width: 100%;
  z-index: 300;
  overflow:hidden;
}

.container-table {
    display: table;
    width:100%;
    height:100%;
}
.vertical-top-row {
    display: table-cell;
    vertical-align: top;
}
.vertical-center-row {
    display: table-cell;
    vertical-align: middle;
    height:100%;
}

.centerText {
    text-align: center;
}

#subTitle {
    width: 100%;
}

I have a fiddle One problem I am now having is how I currently have it, my rows are no longer 100% width. This means that the subtitle is not centered precisly in the middle. I think I have the vertical align working, but now I need to center the text in the middle.

How could I go about doing this or do I need to make changes to what I currently have?

Thanks



Solution :

After playing around with you jsfiddle a bit, the thing that's throwing you off seems to be your use of display: table in conjunction with Bootstrap's rows and columns. Bootstrap isn't made to work with tables that way, it's made to replace them, so it's sort of fighting for control with the table.

The main thing is it looks like your rows are ending up next to each other rather than one below the other, and that's because you have display: table-cell on your rows without any display: table-row elements around them, so the browser seems to be acting like there's a table-row element around both of them, thereby forcing them to lie next to each other, since they're now two cells in the same row.

Your best bet, IMO, is to pick one grid method or the other, Bootstrap or table cells. Personally I prefer Bootstrap, but that's your call. If you want to go the table route, remove all the .row and .col-sm-12 classes, set your former .row elements to display: table-row, and set your former .col-sm-12 elements to display: table-cell.

If you want to go the Bootstrap route (my preference), you have options. You didn't really specify whether you'd have any other content besides these two headings in that section, but if not, an easy way to vertically align your subtitle would be to give its .row something like margin-top: 40% to push it down a relative distance from the row above it. Play around with the percentage and see what you like. Here's an example based on your original jsfiddle: https://jsfiddle.net/ck3epwm5/1/

By the way, if your preferred behavior is really for the section to be 100% of the viewport height, you might want to replace height: 100% with height: 100vh. This is a new(ish) CSS3 length unit that literally means "percent of viewport height" (technically, 1vh is defined as "1/100th of the height of the viewport"; MDN reference) and thus is based directly on the viewport itself, whereas % values are based on the nearest ancestor with a specified height, which can sometimes cause unexpected behaviors.


    CSS Howto..

    How to perform media queries if either statements are correct?

    How to get the same height on two Bootstrap columns? [duplicate]

    How can you hide the arrow that is displayed by default on the HTML5
    element in Chrome?

    Weird css box-sizing in bootstrap 3. How to get rid of horizontal slider

    How to get slanted borders in CSS

    How to set this CSS arrow transparent?

    How to add wikipedia in to a wordpress plugin

    how to allow transform in htmlpurifier

    How to resize div size proportional with browser size?

    How to pull all CSS rules on an element together

    What is the best tutorial or tutorials on how to make a tooltip using CSS or JQuery or Both? [closed]

    How to center this input using css only

    How to set align of elements to center with css?

    How can I find out what CSS is needed to implement twitter Bootstraps Modal. [closed]

    How to make columns scroll independently using CSS?

    How to add padding to anchor tags in Top Bar in Foundation 6?

    How to make css flex box row auto resizing horizontally with image

    CSS: How do I select CSS for all the
  • elements that do have not been styled yet?
  • How to Click a div and have it change dimensions of other divs and then change back once clicked again

    how do I create an HTML table with fixed/frozen left column and scrollable body?

    In CSS, how can I make a div as high as the entire page?

    How to prevent text style defaults during CSS transition

    How to place buttons next to each other using css Bootstrap

    how to make the text in a div to not overflow its width

    HTML/JavaScript - How can I hide the links and cursor?

    How to add two images one in the right and other in the left side of the input textbox?

    How can I style a button to look the same as the home button in Google Chrome with CSS? [closed]

    how to get text beside image button using CSS

    How to parameterize CSS selectors? [duplicate]

    How to make this series of rules into a mixin?