How do I make a responsive jumbotron with only CSS and no bootstrap?

Answer 1

Hiya,

A jumbotron is just a div with padding and a bottom margin, by default it is already responsive, although you may want to increase/decrease your padding based on screen size. For reference when inspecting bootstraps jumbotron class, this is the only css that is used:

.jumbotron {

padding: 2rem 1rem;

margin-bottom: 2rem;

background-color: #e9ecef;

border-radius: .3rem;

}

Further styling is applied to each of the child components in order to achieve design, but a jumbotron is essentially just a padded container

👨🏼‍💻 Cheers!