best way to eliminate extra space from bootstrap container rows columns and div elements

I am currently working with Bootstrap and I am encountering some empty space on the left and right of my div. Instead of filling up the entire screen, it seems to only be taking up 99%.

MY CODE:

#social-links {
  background-color : #242424;
  /* border        : .5px solid white; */
  text-align       : center;
  color            : white;
  margin-bottom    : -16px;
  margin-top       : -9px;
  margin-left      : 0px;
  }
#social-links a {
  color   : white;
  display : block;
  width   : 100%;
  padding : 2px;
  }
#social-links a:hover {
  transition       : 3s;
  background-color : white;
  color            : black;
  text-align       : center;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="24464b4b50575056455464100a110a17">[email protected]</a>/dist/css/bootstrap.min.css">

<div class="container-fluid border p-0 m-0 no-border">

<div class="row p-0 m-0">
    <div class="col-4 p-0 mx-0 " id="social-links">
      <a href="#">Discord</a>
    </div>
    <div class="col-4 p-0 mx-0 " id="social-links">
      <a href="#">Instagram</a>
    </div>
    <div class="col-4 p-0 mx-0 " id="social-links">
      <a href="#">Twitter</a>
    </div>
  </div>
</div>

https://i.sstatic.net/FQwM4.jpg

htmlcssbootstrap-4

Answer №1

The visible empty space is caused by the default margin applied to the body element.

Additionally, using an ID multiple times is not correct since an ID should be unique to a single HTML element. I have changed social-links to a class.

.social-links {
  background-color: #242424;
  /* border: .5px solid white; */
  text-align: center;
  color: white;
  margin-bottom: -16px;
  margin-top: -9px;
  margin-left: 0px;
}

.social-links a {
  color: white;
  display: block;
  width: 100%;
  margin: auto;
  padding: 2px;
}

.social-links a:hover {
  transition: 3s;
  background-color: white;
  color: black;
  text-align: center;
}

body {
  margin: 0;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e88a87879c9b9c9c899898dc1d7dedee2868ccddcdd">[email protected]</a>/dist/css/bootstrap.min.css">

<div class="container-fluid border p-0 m-0 no-border">
  <div class="row p-0 m-0">
    <div class="col-4 p-0 mx-0 social-links"><a href="#">Discord</a>
    </div>
    <div class="col-4 p-0 mx-0 social-links"><a href="#">Instagram</a>
    </div>
    <div class="col-4 p-0 mx-0 social-links"><a href="#">Twitter</a>
    </div>
  </div>
</div>

To fix this issue, include body { margin: 0;} to eliminate the default margin from affecting the layout of the body element.

Answer №2

After analyzing the issue, I discovered that there was a problem with the row class's margin and padding settings. CONFIRMED RESOLUTION:

Discord Instagram Twitter

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

Adjust the parent's height to match the height of its content (CSS)

Could anyone assist me in figuring out how to adjust the height (red border) to fit the content (green border)? https://i.sstatic.net/l1p9q.png I'm struggling to determine which property to use, I'm aiming for this outcome but haven't had ...

htmlcss

Rule for restoring scroll position upon reloading web pages in browsers

When it comes to websites that handle data asynchronously, the behavior of scroll position restoration upon browser refresh can vary. Sometimes the scroll position is preserved, while other times it is not. For example, when reloading after scrolling down ...

javascripthtml

Adding a three-dimensional perspective to an HTML5 canvas without utilizing CSS3 or WebGL

Here is a canvas I am working with: http://jsbin.com/soserubafe Here is the JavaScript code associated with it: var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var w = canvas.width; var h = canvas.height; var cw=canvas. ...

javascriptcsshtmlcanvas3d

The functionality of jQuery field validation is impaired when interacting with Chrome's autofill feature

Despite adding the autocomplete="off" attribute to both the form and inputs using html5, I'm still unable to prevent Chrome autofill from interfering with the form submission process. In addition to this issue, I have implemented a basic jQuery field ...

jqueryhtmlgoogle-chrome

What is the best way to trigger a jQuery animation when a section becomes visible using Fullpage.js?

Within my website, I've incorporated Fullpage.js and am interested in triggering jQuery animate functions as users scroll to specific sections. Although I tested methods like mouseenter, mouseover, and mouseleave from the prior section, they did not d ...

jqueryhtmlcssfullpage.js

Cross-domain scripting with JavaScript

I currently manage 2 subdomains securityservices.example.com workstations.example.com All workstations are associated with the workstations.example.com One of the workstations, known as WS789012 on the domain, is fully qualified as: WS789012.workst ...

javascripthtmlajax

Using HTML to load an image is not possible, as it can only be done using CSS

I am currently dealing with a CSS issue in my project. Here is the code snippet from my stylesheet: .Img{ background: url('../assets/Trump.png'); } Now, let's take a look at the corresponding HTML code: <div class="Img"> However, ...

htmlcsswebpackvue.js

Transforming the text to be "unreadable"

I find myself in a rather odd predicament where I must display my name and contact details on a webpage. Although I am comfortable with sharing this information, I would prefer that it remain unreadable to robots or other unauthorized sources. Essentially ...

javascripthtmlcssweb

What is the best way to emphasize each div while utilizing jquery in this specific scenario?

Seeking a simple way to highlight every div using jQuery, but facing the challenge of having over one thousand items each with a unique ID that needs to be highlighted individually. Each item is represented by a div and must remain independent for user del ...

phpjqueryhtmlcss

Leveraging the css child selector within Ruby's Selenium-Webdriver to locate multiple elements

I prefer to minimize the usage of XPath in webdriver when locating elements, but still want the ability to access child elements from previously identified ones. For example: Consider the following HTML structure: <div id="myelement"> <table ...

cssrubyseleniumwebdriver

Can a hyperlink exist without a specified href attribute?

One scenario could be when I receive this specific code from a third-party source <a class="cs_import">Add contacts from your Address Book</a> Curiously, the link "Add contacts from your Address Book" does not redirect to any page as expected ...

javascripthtmlcss

The labels in production are getting cut off when creating a view in ASP .NET MVC

Upon viewing a Create View on my PC, I noticed that the main form and labels are adequately spaced: https://i.sstatic.net/1Q2bC.png However, once the website is deployed to IIS and accessed on the same PC with the same browser, everything appears cramped ...

cssasp.net-mvc

Using jQuery to animate two images simultaneously in opposite directions

Trying to make two images animate using a single function. The issue is that one image needs to animate the left attribute while the other needs to animate the right. Here's what I have so far: $(document).ready(function(){ v ...

jquerycsspositioningjquery-animate

What is the best method to display an asterisk (*) in red while using React and Material UI

In my form, I want to indicate required fields with a red star (*). Is there a way to display the star in red color? Also, why does the border turn blue when I click on an input field? Here is the code and screenshot for reference: https://codesandbox.io/ ...

javascriptcssreactjsmaterial-designmaterial-ui

Mastering the Art of Effortless Content Manipulation with Jquery's

Click here to access the example JSFiddle. I experimented with drag and drop functionality by successfully dragging the word "hello" into a specific div tag. Now, I am wondering how to extend this capability to multiple div tags. How can we achieve dropp ...

jqueryhtmlcss

Having trouble with the alignment in navbar using Bootstrap 4 mr-auto?

After browsing through similar questions on this platform, I still couldn't find a solution that works for me, as I am a beginner in web development. I am trying to align the contact link in my navbar to the right, but the "mr-auto" class and other me ...

htmlbootstrap-4navbar

Creating a form in PHP/HTML with a variety of selectable options

Here is my PHP and HTML code: $damt2 = isset($_POST['damt2']) ? $_POST['damt2'] : 200; $dateinfo2 = json_decode(file_get_contents($_SESSION['base_path'] . 'dl.dict'), true); arsort($dateinfo2); // Sort an array in r ...

phphtml

Exploring the Functionality of POST in AJAX Requests

I'm facing an issue where the data is not displaying on my page even though I am using a Github URL and Ajax POST. Can anyone help me identify what needs to be fixed in the code below? <div id="content"> </div> window.onload = ...

htmljqueryjsonajax

Tips for resolving the Bootstrap 4 carousel glitch

Hello, I am currently working on implementing a multi-item Carousel that moves one item at a time with each click. However, in my case, clicking the right arrow results in the entire slide changing. To help you understand better, I have provided a link to ...

htmlcssbootstrap-4

The Ion-button seems to be malfunctioning

I am interested in using special buttons for my ionic 1 project, specifically the ion-button feature outlined on this page: Ionic Buttons. I attempted to create a Round Button and an Outline + Round Button: <h2 class="sub-header" style="color:#4 ...

javascriptcssbuttonionic-framework