0

Here's my page: enter image description here

The problem is, my Jumbotron placed on the upper side of the page. I want to move it to the center (a little down below). I tried overriding margin and padding but it still didn't work. How would I do that?

Here's my HTML

<div class="col-md-6">
    <div class="welcome-page-eat">
        <div class="jumbotron">
            <h2>
                Hello, world!
            </h2>
            <p>
                This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
            </p>
            <p>
                <a class="btn btn-primary btn-large" href="#">Learn more</a>
            </p>
        </div>
    </div>
</div>

And here's my CSS:

.welcome-page-eat {
    background: url(../images/front_page/eat.jpg) no-repeat right 0;
    margin-right: -15px;
    margin-left: -15px;
    padding-bottom: 62.5%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.welcome-page-cook {
    background: url(../images/front_page/cook.jpg) no-repeat right 0;
    margin-right: -15px;
    margin-left: -15px;
    padding-bottom: 62.5%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.jumbotron {
    background-color: transparent;
    color: white;
}
bnrfly
  • 155
  • 1
  • 2
  • 11
  • do you mean that you want it to center vertically? If yes, it has been discussed many times here. For example: http://stackoverflow.com/questions/8865458/how-to-vertically-center-text-with-css – Yuriy Tseretyan Dec 23 '16 at 17:05
  • You've padded from the bottom, but not from the top – Rogue Dec 23 '16 at 17:05

1 Answers1

0

Try using:

.jumbotron {
background-color: transparent;
color: white;
margin: auto;
width: 90%;

}

Maybe this article can help you: W3CSchools | CSS Margin

NMenam
  • 134
  • 2
  • 13