Dealing with unnecessary gaps separating div elements within bootstrap and HTML code

I am in the process of developing a responsive control panel using HTML, CSS, and Bootstrap. I have successfully created a navigation header, but there seems to be too much spacing between the header and the body content. How can I reduce this space or set the margin for my elements to zero?

To address this issue, I decided to keep the background black and aim to seamlessly connect the divs without any visible gaps.

<!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> Client Management
                <h3>
            </header>

            <div style="padding:30px">
              <!-- Forms and Tables -->

              <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>

csshtmltwitter-bootstrap

Answer №1

The margin settings can all be found in the bootstrap.css file that is linked to your page. There are a couple of ways you can customize these margins:

  • First option is to download the non-minified version of the css from here, locate the margins you want to adjust, and then link to the modified version instead;

  • Alternatively, you can override the default classes with the margins you desire by adding custom CSS rules directly into your HTML file or create another local CSS file to link to:

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

Answer №2

For Navigation Resolution:
To fix the navigation, you can consult the official Bootstrap guide. The Bootstrap team utilizes ".bs-docs-nav" to encapsulate the navigation and eliminate any margins.

Solution for column margins:
One way to remove the black space around columns is to enclose them in a "well" class. For example: 

 div class="row content well"

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve the username from the database using PHP and then showcase it on the webpage

I've been working on pulling the username from my database and displaying it on my webpage, but I'm running into some issues. Here's the current code I have, which should work, but for some reason the $username variable is showing up as unde ...

phphtmlmysql

PHP data is not displayed by Ajax

I seem to be encountering a bit of trouble. I am attempting to utilize ajax to retrieve data from a PHP server, which in turn fetches it from a MySQL database, and then display it within a specific HTML tag location. However, for some unknown reason, nothi ...

javascriptphphtmlmysqlajax

Is 'not set' in Google Analytics indicating the browser version?

I came across a similar question on Stack Overflow, but my situation is unique. After adding the Google Analytics script to my project (Angular4), I noticed that I am receiving all information except for browser information. Some browsers are showing &apo ...

javascripthtmlangularjsangulargoogle-analytics

Is there a way to automatically create a new line in a text area when the enter key is pressed?

What is the best way to create a textarea that expands in size when the user presses enter or ctrl+enter to add a new line? For instance, if I input text into the textarea on the first line, how can I ensure that it automatically expands to add a new line ...

html

Login Form with Semantic UI Dropdown

I'm currently working on incorporating a dropdown login form for a website using the Semantic UI framework. However, I am facing an issue where the form is placed within an item on the menu, causing the dropdown menu to disappear once clicked. Here is ...

htmldrop-down-menusemantic-ui

The issue of changing the body font size in MUI v5 with React Styleguidist, ScopedCSSBaseline, and createTheme style overrides remains unresolved

Recently, I successfully migrated two MUI-powered UIs from MUI v4 to v5. In the process, I had to override their body fontSize according to the MUI migration guide to maintain the v4 design default of Typography body2 font size. This adjustment has worked ...

cssreactjsmaterial-uithemes

Reviewing code for a simple form and box using HTML5 and CSS3

I have developed a compact form as part of a larger webpage, proceeding step by step according to the specified requirements. I am wondering if there could have been a more efficient way to code this. Perhaps streamlining the code or utilizing different c ...

htmlcssoptimization

What are some ways to create a larger-than-life mui button size?

The current MUI button supports size prop values as the following small medium large Although this feature is handy, I find myself wishing I could specify the height and width using the style prop to customize the size like <Button v ...

htmlcssreactjsbuttonmaterial-ui

Avoid having individual words centered on a single line of text

Currently, I'm in the process of developing a website using WooCommerce, WordPress, and Elementor. I've encountered an issue where only one word appears on each line and have tried various solutions such as hyphens, word-break, and line-break wit ...

javascripthtmljquerycsswordpress

Turn off link preview feature on Android messages

As a developer, I am looking for a way to disable or hide link previews on Android devices when someone receives a text message with a link to our website. I still want the URL address to be visible, but I prefer to keep the link previews on IOS devices. I ...

javascriptjqueryhtml

The fixed background attachment breaks when using translateX(0)

I'm facing an issue with a scrolling element that has a fixed background: .my-element { background: url(/foo.png) no-repeat right bottom; background-attachment: fixed; } Everything works perfectly, until I apply a translate transform (even a sl ...

cssbackground-attachment

Uncover the hidden message within the unique special character "ì"

My JSON file contains a specific character, such as ì; Here is the service I am using: $http({ url: jsonUrl, method: "GET" }).success(function (data) { // data is an array that contains a list of elements (f ...

htmljsonhtml-escape-characters

Loading input datalist in Firefox postponed

My goal is to implement an input field for a username that allows users to select from a wide range of names/usernames. I want them to be able to enter a partial string from the name or username. Instead of loading the entire list initially, I aim to load ...

javascripthtmljqueryformsautosuggest

"Creating a new element caused the inline-block display to malfunction

Can someone explain why the createElement function is not maintaining inline-block whitespace between elements? Example problem First rectangle shows normal html string concatenation: var htmlString = '<div class='inline-block'...>&l ...

javascriptjqueryhtmlcss

The luminosity of MeshBasicMaterial in Three.js

In my current setup with threejs, I am utilizing MeshBasicMaterial for lighting effects. Each element contains a simulated point light within. I have assigned a variable named color, defined as rgb(random value, random value, random value). I am looking ...

javascripthtmlcolorsthree.jsrgb

What is the best way to make a textview span its layout in an android app?

Is there a way to style text in a TextView layout itself without using any programming? I have about 20 XML files and no activity associated with them. I've tried using tags but it doesn't seem to work. android:text="Lets look how to make < ...

androidtextviewhtml

What is the best way to ensure my arrow text remains properly positioned when using fullpage.js?

Seeking guidance from the web development community. I am currently working on a client's website that utilizes fullpage.js and encountering a persistent issue. On slide1 of the website, I am struggling to display the correct text next to the arrows. ...

javascriptjqueryhtmlcssfullpage.js

Solutions for resolving tabpanel design issues

Although I have very little knowledge about web development, I was determined to create my own website. I ended up using a bootstrap 5 based template that allowed me to implement everything I wanted. However, I am encountering some persistent issues with ...

htmlcssbootstrap-5

Conceal image and substitute with a different image using JavaScript

My query pertains to JavaScript: how can I create an effect where clicking the jump-down button opens a text box and causes the button to change direction and rotate? I am considering using two photos - one hides when the jump-down button is clicked, and ...

javascripthtmlcss

Is there a way to adjust the jQuery cycle plugin to create a slideshow with two images instead of just one?

Picture a slideshow that resembles the one showcased in this link: http://malsup.com/jquery/cycle/div.html, but with only two images instead of three. Also envision it having two triggers, similar to the demo in the center of this page: http://jquery.mals ...

jqueryhtmlcssjquery-plugins