CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
user9835275
user9835275

Reputation:

How do I get rid of the whitespace between different bootstrap classes/elements?

I am a beginner when it comes to website design. How do I get rid of the whitespace between my jumbotron navbar and footer? There is whitespace between the jumbotron and the following Navbar aswell as the following footer thereafter. Attached is the following jsfiddle> https://jsfiddle.net/5c6kx9tu/1/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="mj.css">
  <title>Michael Jordan Tribute Page</title>
  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="jumbotron">
    </div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About MJ</a></li>
  <li><a href="#">Accomplishments</a></li>
  <li><a href="#">Statistics</a></li>
  <li><a href="#">Quotes</a></li>
</ul>
</div>
</nav>
<footer class="footer container-fluid text-center">
  <p>"Website created using Bootstrap 4 by Andrew"</p>
</footer>

</body>

And here is the css

.jumbotron{
  height: 350px;
  width: 100%;
  background-size: 100% 100%;
  background-image:url(mj.jpg);
  margin-bottom: 0px;
}

.footer{
  margin: 0px;
  background-color: grey;
  bottom: 0px;
  padding: 20px;
}

.text-center{
  font-size: 20px;
  font-style: italic;
  font-family: "Gill Sans", sans-serif;
}

Upvotes: 1

Views: 58

Answers (4)

Emeeus
Emeeus

Reputation: 5260

In my opinion, it's better not to change bootstrap own classes, make your owns classes or id's instead.

Also keep in mind where you are going to add css, it's better add css after bootstrap otherwise you could change bootstrap logic. This means you could generate unwanted behaviors.

Here just an example adding id's: https://jsfiddle.net/5c6kx9tu/5/

#myJumbotron{
  margin-bottom:0px;
  background-color: red;//this color it's just to see the problem clear
}

#myNavbar{
  background-color: green;//this color it's just to see the problem clear
  margin-top: 0px;
}

The best solution then, in my opinion, is to make another file included after bootstrap and make your own classes for the elements that you want to change.

Upvotes: 0

random_user_name
random_user_name

Reputation: 26180

I'd strongly recommend not modifying core bootstrap styles, but rather utilizing some helper classes.

If you're using Bootstrap 3 (which you are loading in your code), you'll need to write some helper classes, like I've done in this fiddle, and below:

CSS helper classes (you can add other - mt (for margin top), 5em (for .5 em), etc:

/* helper class, modeled after Bootstrap 4 helper classes */
.mb-0 {
  margin-bottom: 0 !important;
}

Then simply add those classes to your markup, like below:

<body>
    <div class="jumbotron mb-0">
    </div>
    <nav class="navbar navbar-default mb-0">
      <div class="container-fluid">
        <ul class="nav navbar-nav">
          <li><a href="#">Home</a></li>
          <li><a href="#">About MJ</a></li>
          <li><a href="#">Accomplishments</a></li>
          <li><a href="#">Statistics</a></li>
          <li><a href="#">Quotes</a></li>
        </ul>
      </div>
    </nav>
    <footer class="footer container-fluid text-center">
      <p>"Website created using Bootstrap 4 by Andrew"</p>
    </footer>
  </body>

Working example / fiddle: https://jsfiddle.net/cale_b/0gn7w3Lk/1/

If you're using Bootstrap 4, those helper classes already exist, and you can use them: https://v4-alpha.getbootstrap.com/utilities/spacing/

Upvotes: 1

Snipezzzx
Snipezzzx

Reputation: 26

To remove the whitespace between jumbotron and navbar, all you need to do is calling your stylesheet below the bootstrap stylesheet. And then, in your stylesheet, you need the following lines to remove the whitespace between navbar and footer:

.navbar {
    margin-bottom: 0px;
}

Upvotes: 0

RandymWebDev
RandymWebDev

Reputation: 18

If you add

.navbar {
margin: 0;
}

That should clear it up. Play around with that. Make sure you add that somewhere AFTER your include of the bootstrap style sheet, so it overrides the bootstrap css.

Upvotes: 0

Related Questions