CODEWITHSUNDEEP
csshtmltwitter-bootstrap
Bruno Silva
Bruno Silva

Reputation: 147

Unwanted spaces between divs in bootstrap and HTML

I am creating a responsive control panel with HTML, CSS and Bootstrap, I created a nav header but it gives a large spacing with the rest of the body, how do I remove the space that exists between these divs? or how do I make my elements have margin 0?

I left the body in black, so the idea would be to join the divs and remove the black between them.

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <title>Sibcom - Layout</title>
  <meta charset="utf-8">

  <!-- ===== Arquivos css -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


</head>

<body style="background:black;">
  <div>
    <!-- ===== Página -->
    <header class=".cred">
      <nav class=" navbar navbar-default navbar-static-top navtopo">
        <div class="container">
          <div class="navbar-header">

            <!-- Collapsed Hamburger -->
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
								<span class="sr-only">Toggle Navigation</span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
							</button>

            <!-- Branding Image -->
            <a href="#" class="navbar-brand">

              <div class="logo-grande"> <span>System Testing </span>

            </a>

            </div>

            <div class="collapse navbar-collapse" id="app-navbar-collapse">
              <!-- Left Side Of Navbar -->
              <ul class="nav navbar-nav">
                <!--&nbsp; -->
              </ul>

              <!-- Right Side Of Navbar -->
              <ul class="nav navbar-nav navbar-right">

                <li><a href="">Perfil</a></li>
                <li><a href="">Logout</a></li>
              </ul>

            </div>
          </div>
      </nav>
    </header>

    <!-- ===== Corpo -->
    <div class="container-fluid text-center ">

      <!-- ===== Content -->
      <div class="row content ">

        <!-- ===== Menu vertical -->
        <div class="col-sm-2 sidenav " style="text-align:left;background:#DCDCDC;">
          <div>
            <h4>Bruno </h4>
            <h5>Analist</h5>
          </div>

          <hr>

          <p><a href="#">Home</a></p>
          <p><a href="#">Create</a></p>
          <p><a href="#">Os</a></p>
          <p><a href="#">E</a></p>
        </div>


        <div class="col-sm-10">

          <header class="sombra" style="background:white;color:black;padding:10px;text-align:left;">
            <h5> Home / Client /
              <h5>
          </header>

          <br>
          <div style="background:white;color:black;text-align:left;">

            <header class="sombra" style="padding:10px">
              <h3> Gerenciamento de Clientes
                <h3>
            </header>

            <div style="padding:30px">
              <!-- Formularios e Tabelas -->

              <form>

              </form>

              <!-- Formularios e Tabelas Fim -->
            </div>



          </div>


        </div>

      </div>
      <!-- ===== Content Fim -->

    </div>

    <footer class="container-fluid text-center navbar-fixed-bottom" style="background:blue;">
      <p>Sibcom 2018</p>
    </footer>

    </div>
</body>

</html>

Upvotes: 1

Views: 88

Answers (2)

Mukesh Rathore
Mukesh Rathore

Reputation: 262

Solution for Navigation:
if you refer to official guide of bootstrap. Bootstrap team has used ".bs-docs-nav" to wrap it around navigation which removes margin.

Solution for col margins:
Try wrapping cols in "well". it will removes black part. e.g : 

 div class="row content well"

Upvotes: 0

witte
witte

Reputation: 11

All these margins are in the bootstrap.css file that you're linking to in your page, so you could either:

  • Download the non-minified css from https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css, search for the margins you want to change and link to the altered version instead;

  • Overwrite in your html file (or another local css that you'll link to) the classes with the margins you want to change:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
    nav.navtopo
    {
        margin-bottom: 0px;
    }
    /* etc */
</style>

Upvotes: 1

Related Questions