how to remove white space under Bootstrap 4 jumbotron

bootstrap 4 jumbotron less padding
bootstrap 4 jumbotron examples
bootstrap jumbotron height
bootstrap scrolling jumbotron
bootstrap jumbotron background image
bootstrap 4 remove padding
remove background of jumbotron
jumbotron center bootstrap 4

I am having an issue with the jumbotron, white space appear under it for some reason i don't know if its because of my code or a mistake that i made some where . i have been at it for two days now .i copy the code for the jumbotron on the bootstrap 4 website. i could use some help on this . As you can see by the picture white space appear under it.

.container_fluid.one {
    background-size: cover;
    height: 100vh;
    background-color:  #43E8E4;
}
.nav-item {
    padding-right:20px;
    font-size: 18px;
}
.info h1 {
    margin-top: 170px;
    line-height: 50px;
}
.info p {
    font-size: 15px;
}
span {
    color: #fffc00;
}
 span .gold{
    color: #fffc00;
}
.info p {
    font-size: 18px;
}
.white {
    color: #fff;
}
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
    color: #fffc00;
}
.leader {
    margin-top: 110px;
    width: 457px;
    height: 316px;
}
.down {
    margin-top: 60px;
}
.container_fluid.two {
    background-size: cover;
    min-height: 100vh;
    background-color:  #43E8E4;
}
.jumbotron {
    margin-top: 0px;
}
<div class="container_fluid one">
		<!--Navbar -->
		<nav class="mb-1 navbar navbar-expand-lg navbar-dark orange lighten-1">
				<a class="navbar-brand" href="#"><i class='bx bxl-stripe bx-md' style="color:#fffc00;"></i></a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-555"
				aria-controls="navbarSupportedContent-555" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="navbarSupportedContent-555">
				<ul class="navbar-nav ml-auto">
					<li class="nav-item active">
					<a class="nav-link" href="#">
						<span class="gold">Home</span>
					</a>
					</li>
					<li class="nav-item">
					<a class="nav-link" href="#">Features</a>
					</li>
					<li class="nav-item">
					<a class="nav-link" href="#">Pricing</a>
					</li>
				</ul>
				</div>
			</nav>
	  <!--/.Navbar -->
	  <section data-aos="zoom-in"data-aos-duration="1900">
	  <div class="container">
		  <div class="row">
			  <div class="col-md-6 text-white info">
				  <h1>I'll go above and beyond for <span>you.</span></h1>
				  <p>The world's best.</p>
				  <p><span>I am good at what i do.</span></p>
				  <button type="button" class="btn btn-outline-info white">Learn More</button>
			  </div>
				  <div class="col-md-6 text-right">
					  <img class="img-fluid leader" src="/images/undraw_site_stats_l57q.svg" alt="Responsive image">
				  </div>
			  </div>
		  </div>
	  </section>
	  <div class="container">
		  <div class="row">
			  <div class="col-md-12 text-center down">
				<i class='bx bx-down-arrow bx-md bx-fade-down' style="color:#fffc00;"></i>
			  </div>
		  </div>
	  </div>
	</div>
	<div class="jumbotron jumbotron-fluid">
		<div class="container">
			<h1 class="display-4">Fluid jumbotron</h1>
			<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
		</div>
		</div>
	<div class="container_fluid two">

Include these lines of code in your CSS file

.jumbotron {
    margin-bottom: 0px;
 }

White Space under the Jumbotron in Bootstrap, White Space under the Jumbotron in Bootstrap. In bootstrap4 -jumbotron, i've set a full width background image, and <h1 class=""display-1>� Participate in discussions with other Treehouse members and learn.

It is because of:

.jumbotron {
    margin-bottom: 2em;
}

So if you want to remove that, simply give a class to your div e.g.: jumbotron-override and add this code to css:

.jumbotron-override {
    margin-bottom: 0px;
}

The result can be seen on jsfiddle: https://jsfiddle.net/nabtron/1kesqj8f/4/ (full page: https://fiddle.jshell.net/nabtron/1kesqj8f/4/show/ )

I hope it solves your problem :)

how to remove white space under Bootstrap 4 jumbotron, I am having an issue with the jumbotron, white space appear under it for some reason i don't know if its because of my code or a mistake that i made some� However, if your using the app and the apps component for the jumbotron you can’t delete the class for it because it’s a protected space for the app component and you would need to delete the whole jumbotron instead then. If it looks like you still have that gap then you have your jumbotron inside another element that has a height to it.

I tried to override your code by commenting margin-bottom: 2rem; then white space disappear

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

Jumbotron � Bootstrap, It uses utility classes for typography and spacing to space content out within the larger container. Learn more. Copy. <div class="jumbotron">� Source Code: https://github.com/SonarSystems/Bootstrap-4-Tutorial-Series http://v4-alpha.getbootstrap.com/layout/grid/#grid-options Like our content and want

Remove White Space on White Sides of Jumbotron Image, I am trying to remove the white space on both sides of my home page the jumbotron and I fixed an error in the CSS but there is a warning for� Jumbotron Bootstrap jumbotron. Bootstrap Jumbotron is a responsive component which the main goal is to focus the visitor's attention or highlight a special piece of information. Inside a Jumbotron, you can make use of almost any other Bootstrap code to further increase its engagement value.

Another Jumbotron question -- extra white space at, I still can't figure out how to get rid of the white space at the bottom of the jumbotron. It must be coming from a padding or margin - insert the below css in the page in question I do appreciate your help for those of us baffled by Bootstrap. Hey gang, in this Bootstrap tutorial, we'll take a look at the oddly named Jumbotrons and how we can use them for page headings and banners. You can find more front-end development tutorials on

White space under image/at the end of website, For some reason the first jumbotron image leaves a white space no matter what. After the HTML code the CSS code appears [image] <!… Searches related to bootstrap jumbotron bootstrap jumbotron background image bootstrap jumbotron carousel bootstrap jumbotron background color bootstrap jumbotron height bootstrap jumbotron center

Comments
  • There may be some margin on elements inside, possibly h1,did you inspect the elements?