CODEWITHSUNDEEP
htmlcssbootstrap-5
SushantUniversity
SushantUniversity

Reputation: 30

Right side Space in bootstrap container-fluid

I want to end right side padding in my container-fluid but I'm not able to achieve this.

As you can see free space which where red lines are draws.

I tried many different ways to resolve this problem but don't know from where it's getting this amount of padding?

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Airtel Internet Services">
  
    <title>Airtel | Internet Services</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="index.css">
   
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 
    
  </head>
  <style>


  </style>
  <body>
     

    <!-- Introducing Airtel black -->
    <style>
      .container-fluid{
        width:100%!important;
      }
      </style>


    <div class="container-fluid" style="background-color:#101010;">
      <div class="row">


    <div class="col-lg-6">
    <div style="padding-top:100px;">
      <center>
        <img src="https://assets.airtel.in/static-assets/homes/img/black-logo.png" style="width:160px;"><br><br><br>
     <span style="font-size:2rem;color:white;">
     Introducing Airtel Black</span><br><br>
    <span style="color:white; font-size:20px;">Mobile. DTH. Fiber. Combine any two or more services in one plan.</span><br><br>
    <button style="background-color:#4D0D0A;width:220px;color:white;border:none;border-radius:50px;padding:17px;font-size:19px;">JOIN NOW</button>

    </center>
    </div>
    </div>
    <div class="col-lg-6">
      <img src="https://assets.airtel.in/static-assets/homes/img/main-img_new.jpg" style="width:600px;float:right;">
    </div>
    </div>
    </div>

    <div class="container-fluid" style="background-color:#2A2A2A;color:white;">
      <div class="row">
    <div class="container" style="padding-top:40px;">

    <span style="font-size:30px;">Airtel Black benefits</span>

    </div>


      </div>
    </div>

   
  </body>
</html>

enter image description here

What I want: I want to end those spaces completely so that, my image will stick at the right corner of the display.

Thank you.

Upvotes: 0

Views: 2044

Answers (5)

marumar
marumar

Reputation: 161

The padding is being added by the .row class, which applies padding on either side of all direct children. The simplest way to override the padding using bootstrap is to add .pe-0 to the div wrapping the image:

<div class="col-lg-6 pe-0">
      <img src="https://assets.airtel.in/static-assets/homes/img/main-img_new.jpg" style="width:600px;float:right;">
</div>

If you'd like to remove the padding on all sides of the image use .p-0 instead.

The bootstrap documentation contains a list of all built in utility classes, which are made for use cases like yours: https://getbootstrap.com/docs/4.3/layout/utilities-for-layout/

Upvotes: 0

איש נחמד
איש נחמד

Reputation: 411

Just add the pe-0 class to the parent element currently marked with the col-lg-6 class:

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Airtel Internet Services">
  
    <title>Airtel | Internet Services</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="index.css">
   
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 
    
  </head>
  <style>


  </style>
  <body>
     

    <!-- Introducing Airtel black -->
    <style>
      .container-fluid{
        width:100%!important;
      }
      </style>


    <div class="container-fluid" style="background-color:#101010;">
      <div class="row">


    <div class="col-lg-6">
    <div style="padding-top:100px;">
      <center>
        <img src="https://assets.airtel.in/static-assets/homes/img/black-logo.png" style="width:160px;"><br><br><br>
     <span style="font-size:2rem;color:white;">
     Introducing Airtel Black</span><br><br>
    <span style="color:white; font-size:20px;">Mobile. DTH. Fiber. Combine any two or more services in one plan.</span><br><br>
    <button style="background-color:#4D0D0A;width:220px;color:white;border:none;border-radius:50px;padding:17px;font-size:19px;">JOIN NOW</button>

    </center>
    </div>
    </div>
    <div class="col-lg-6 pe-0">
      <img src="https://assets.airtel.in/static-assets/homes/img/main-img_new.jpg" style="width:600px;float:right;">
    </div>
    </div>
    </div>

    <div class="container-fluid" style="background-color:#2A2A2A;color:white;">
      <div class="row">
    <div class="container" style="padding-top:40px;">

    <span style="font-size:30px;">Airtel Black benefits</span>

    </div>


      </div>
    </div>

   
  </body>
</html>

Learn more about padding in bootstrap

Upvotes: 1

Venesa Okuna
Venesa Okuna

Reputation: 1

If I've understood you correctly I could say I had the same problem.. I solved it by reducing the overall section size to 98.8vw and the extra padding disappeared. I'm not sure about the risks though.

Upvotes: 0

Unknown Beginner
Unknown Beginner

Reputation: 193

Your style of writing code is messed. Please use standard style while writing code.

For you question answer is that the col-lg-6 is taking default spacing so make the margin and padding 0 then it will work. And also make the image width to 100%:

<div class="container-fluid">
    <div class="row">
    <div class="col-lg-6 m-0 p-0">
        <img src="https://assets.airtel.in/static-assets/homes/img/main-img_new.jpg" alt="hello"
       style="width:100%;"/>
  </div>
  <div class="col-lg-6 m-0 p-0">
    <img src="https://assets.airtel.in/static-assets/homes/img/main-img_new.jpg" alt="hello"
   style="width:100%;"/>
  </div>
  </div>
</div>

Upvotes: 0

Siddharth Bhansali
Siddharth Bhansali

Reputation: 2482

Adding a pe-0 to the container-fluid class should remove all the right padding. If you inspect the container, you'll see that it's coming from Bootstrap itself.

Upvotes: 0

Related Questions