CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
pavlos163
pavlos163

Reputation: 2890

Bootstrap jumbotron too short

I am currently building a website using bootstrap.

This is my HTML file:

http://www.bootply.com/D5ltZOOcQE

<header class="navbar navbar-inverse navbar-static-top" role="banner">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="index.html">Santorini</a>
        </div>
          <nav class="collapse navbar-collapse" role="navigation">            
              <ul class="nav navbar-nav navbar-right">
                <li><a href="committee.html">Committee</a></li>
                <li><a href="events.html">Events</a></li>
                <li><a href="constitution.html">Constitution</a></li>
              </ul>
          </nav>
       </div>
</header>

<div class="jumbotron">
        <div class="container">
            <h1>Welcome</h1>
            <p class="lead">Welcome to my website.</p>
            <p class="lead"><a class="btn btn-large btn-primary" href="www.google.com">Become a member</a></p>
        </div>
</div>

<div class="container">
      <div class="row">
        <div class="col-sm-4" align="center">
          <a href="www.google.com"><img class="contact" src="img/facebook.png" height="120" width="120"></a>
        </div>
        <div class="col-sm-4" align="center">
          <a href="www.google.com"><img class="contact" src="img/emailIcon.png" height="120" width="120"></a>
        </div>
        <div class="col-sm-4" align="center">
          <a href="www.google.com"><img class="contact" src="img/twitter.png" height="120" width="120"></a>

    </div>
  </div>
</div>

So, what I wanted to do is have a big jumbotron, similar to the one in the getboostrap.com website. That means I wanted it at least twice the size of my current jumbotron.

In the <head> of my HTML file, I have a place where I have put a special rule for my jumbotron, so that I include the picture and also some other stuff. This is the code:

.jumbotron {
        position: relative;
        background: url('img/background.jpg') no-repeat center center;
        overflow: hidden;
        height: 100%;
        width: 100%;
        background-size: cover;    
}

However, when I change the size of height to 500px for example, I see no change. I think this is because my jumbotron kind of adapts to the size of my container? So if I add more text it will grow but now it doesn't. However, I want the whole picture to show, and this doesn't happen right now.

Any help is welcome :)

Upvotes: 1

Views: 703

Answers (3)

dbrree
dbrree

Reputation: 623

Just to add to this, and not necessarily saying this is the ultimate solution. I rarely touch any of the built in bootstrap code and create my own classes. These normally will apply no problem to any bootstrap classes you may be using. for instance.

<div class="jumbotron customclass">

.customclass {
    width: 100%;
    height: 500px;
}

This generally always works for me best and you avoid messing with bootstrap directly which could potentially break other portions of your website if you have already designed quite a bit utilizing bootstrap.

Very rarely do I ever target bootstrap classes directly.

You can see an example from your original bootply here: http://www.bootply.com/Qcdz3AxWvP

I added a background color as well, just to show how creating your own class works just fine.

Upvotes: 3

vanburen
vanburen

Reputation: 21663

In your Bootply you have the height set at 100% and your question states 500px which maybe matters and may very well not. The Jumbotron class doesn't have a set height, padding is used instead. Setting the height should be no different then the rules in your question so perhaps you have multiple jumbotron rules or you haven't placed your stylesheet after bootstraps.

*(you should have zero need to use !important)

Bootstrap Rules (Not complete)

.jumbotron {
  padding-top: 30px;
  padding-bottom: 30px;
  margin-bottom: 30px;
  color: inherit;
  background-color: #eee
}

.container .jumbotron,
.container-fluid .jumbotron {
  padding-right: 15px;
  padding-left: 15px;
  border-radius: 6px
}

.jumbotron .container {
  max-width: 100%
}

@media screen and (min-width:768px) {
  .jumbotron {
    padding-top: 48px;
    padding-bottom: 48px
  }
  .container .jumbotron,
  .container-fluid .jumbotron {
    padding-right: 60px;
    padding-left: 60px
  }
  .jumbotron .h1,
  .jumbotron h1 {
    font-size: 63px
  }
}

See working example Snippet at FullPage.

/*FOR DEMO ONLY*/

.navbar.navbar-inverse {
  margin-bottom: 0;
}
/*FOR DEMO ONLY*/

.jumbotron.jumbotron-one {
  position: relative;
  background: url('http://placehold.it/2000x500/f00/fff') no-repeat center center;
  background-size: cover;
  height: 100%;
  width: 100%;
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .jumbotron.jumbotron-one {
    height: 500px;
  }
}
.jumbotron.jumbotron-two {
  position: relative;
  background: url('http://placehold.it/2000x500/ff0/fff') no-repeat center center;
  background-size: cover;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<header class="navbar navbar-inverse navbar-static-top" role="banner">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="index.html">Santorini</a>
    </div>
    <nav class="collapse navbar-collapse" role="navigation">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="committee.html">Committee</a>
        </li>
        <li><a href="events.html">Events</a>
        </li>
        <li><a href="constitution.html">Constitution</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

<div class="jumbotron jumbotron-one">
  <div class="container">
    <h1>Welcome</h1>
    <p class="lead">Height 500PX</p>
    <p class="lead"><a class="btn btn-large btn-primary" href="www.google.com">Become a member</a>
    </p>
  </div>
</div>

<div class="jumbotron jumbotron-two">
  <div class="container">
    <h1>Welcome</h1>
    <p class="lead">Default Height (padding)</p>
    <p class="lead"><a class="btn btn-large btn-primary" href="www.google.com">Become a member</a>
    </p>
  </div>

Upvotes: 2

Dan Keiger
Dan Keiger

Reputation: 671

My guess is bootstrap.css is overriding whatever custom css you have. To correct this, change custom css height to this height: 500px !important, or load your css file before bootstrap.css (Remember, when 2 CSS files are used, the first one loaded always takes precedence, unless !important is used.)

Upvotes: 0

Related Questions