I’m working on a web application in Laravel 5.4 which uses Bootstrap 4.0.0 beta2 for front-end designing.

The problem is that Jumbotron is too large and I have to scroll down and left to see the entire content. And I want it to fit the window (or to seem like a small beautiful photo frame on a large wall!).

1. Here is my blade file

   Get Started

   Choose services

   We are much happy to serve you! Please choose services from below

   Carpet cleaning
   Tile cleaning

   Next

In the above, I had used CDN for generating Jquery, Popper.js, and Bootsrap.min.js. And CSS is generated from the project itself( Bootstrap 4.0.0 beta2 has installed and compiled via npm).

The funniest thing is that the Jumbotron works fine when using CDN for implementing CSS( followed the official docs ).

2. The below section is from my app.css file (mylaravelproject/public/css/app.css ).

@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);

/*!
 * Bootstrap v4.0.0-beta.2 (https://getbootstrap.com)
 * Copyright 2011-2017 The Bootstrap Authors
 * Copyright 2011-2017 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */


.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: #e9ecef;
  border-radius: 0.3rem;
}

@media (min-width: 576px) {
  .jumbotron {
    padding: 4rem 2rem;
  }
}

.jumbotron-fluid {
  padding-right: 0;
  padding-left: 0;
  border-radius: 0;
}

• I doubt that there is something with the CSS, but can’t figure out. Have I missed anything?