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>
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.
CodePudding user response：
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
CodePudding user response：
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.
CodePudding user response：
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>
CodePudding user response：
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.
CodePudding user response：
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/