CODEWITHSUNDEEP
htmlcssbootstrap-4
Ayubhai Shah
Ayubhai Shah

Reputation: 97

Space left in bootstrap

The HTML of the website

<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row" >
<div class="col-md-3"><div class="float-left" style="background-color:grey;">
<h2 style="background-color:yellow;">Notifications</h2>
<div>You have a new follow </div>
<div>Your previous request was approved</div>
<div></div>
</div>
</div>
<div class="col-md-9">Hiiiii</div>
</div>
</div>
<script src="jquery.slim.min.js"></script>
<script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>

The output leaves a space as such on the left:

enter image description here

I have tried to replace the padding and tried various float options, but none of them seem to work. Any solutions?

Upvotes: 0

Views: 1102

Answers (2)

Awesh Vishwakarma
Awesh Vishwakarma

Reputation: 85

If i got correctly, you are trying to remove spacing from this portion see the arrow in the image If this is the case, you can simply use bootstrap's css class "container-fluid" instead of "container".

The "container" class leaves paddings/spaces to left and right whereas, the "container-fluid" class utilizes full width of the screen.

Here is the full code--

<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<head>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3">
                <div class="float-left" style="background-color:grey;">
                    <h2 style="background-color:yellow;">Notifications</h2>
                    <div>You have a new follow </div>
                    <div>Your previous request was approved</div>
                    <div></div>
                </div>
            </div>
            <div class="col-md-9">Hiiiii</div>
        </div>
    </div>
    <script src="jquery.slim.min.js"></script>
    <script src="popper.min.js"></script>
    <script src="bootstrap.min.js"></script>
</body>

</html>

Please note, i have used bootstrap cdn.

Upvotes: 1

cloned
cloned

Reputation: 6742

You are using .container class, this is to create a centered container.

If you don't want this use .container-fluid class as detailed in the documentation:

Use .container-fluid for a full width container, spanning the entire width of the viewport.

If you don't want to use a container, then don't use a container at all. 

.navbar-pink {
background-color: pink
}

.title-yellow {
background-color: yellow
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<header class="navbar navbar-expand navbar-pink"> 
<h1> NAVBAR </h1>
</header>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-3">
      <h2 class="title-yellow">Notifications</h2>
      <div>You have a new follow </div>
      <div>Your previous request was approved</div>
    </div>
    <div class="col-md-9">Hiiiii</div>
  </div>
</div>

Upvotes: 2

Related Questions