Bootstrap Responsive Jumbotron

Question

I am new to Bootstrap and I've seen website that have breakpoints in the jumbotron section to where the h1 and p elements automatically reduce their size when the windows gets to a certain dimension.

This works but the default h1 and p size is far too small for my webpage.

This is the HTML:

 <div class="jumbotron" id="page-header">
         <div class="container">
            <h1>日本語のクラブ</h1>
            <p class="lead">The Japanese Club!</p>
          </div>
        </div>

This is what the code looks like in the stylesheet:

.jumbotron {
    background-color: #9d2237;
    color: white;
    text-align: center;
}
    .jumbotron h1 {
        **font-size: 8em;**
    }
    .jumbotron .lead {
        opacity: .8;
    }

The block surrounded by asterisks is where I set the h1 jumbotron to my desired font size causes the page to not be reponsive anymore. As I shorten the window the breakpoints don't come into play. I think this is a min-width/max-width problem but I can't find documentation on how to access those how changing them might affect other parts of the website.

Answer 1

You can simply use @media queries to change the font size. Since you have manually overridden the font size, you will have to override the font size you have declared yourself with your own media queries, as per the rule of cascading styles.

You can refer to the complete documentation of how media queries are defined in Bootstrap to formulate the correct media queries.

An example (values are decided arbitrarily, but good enough to illustrate my point):

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .jumbotron h1 {
        font-size: 4em;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .jumbotron h1 {
        font-size: 6em;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .jumbotron h1 {
        font-size: 8em;
    }
}

Answer 2

The below code works for jumbotron on all the screens :

.jumbotron {
   background: url('backgroundimage.jpg') no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   -o-background-size: cover;
}

The cover property will resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.

Further you can override the font-size using the simple queries as mentioned below for different screen sizes :

@include media-breakpoint-up(sm) {
  .jumbotron h1 {
   font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  .jumbotron h1 {
   font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
   .jumbotron h1 {
    font-size: 1.6rem;
   }
}