Using the bootstrap container-fluid to create additional space on the right side

I've been trying to remove the right side padding in my container-fluid without success.

There seems to be extra space where the red lines are marked.

I have attempted various methods to fix this issue but I can't seem to identify where this excessive padding is coming from?

<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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5d3f3232292e292f3c2d1d68736d736f">[email protected]</a>/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>

https://i.sstatic.net/0OX94.png

What I'm aiming for: My goal is to eliminate those unnecessary spaces so that my image will align perfectly with the right corner of the screen.

Thank you.

htmlcssbootstrap-5

Answer №1

To make the necessary adjustment, simply include the pe-0 class in the parent element that currently has 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb8984849f989f998a9babdec5dbc5d9">[email protected]</a>/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>

For further information on padding within bootstrap, please visit the link provided.

Answer №2

To eliminate the right padding in a Bootstrap container, simply include the pe-0 class within the container-fluid element. Upon inspecting the container, you will notice that this default padding is provided by Bootstrap.

Answer №3

Your coding style seems to be a bit disorganized. It's recommended to adhere to standard coding conventions for better readability and maintainability.

Regarding your question, the issue lies with the default spacing of col-lg-6 class. To fix this, set both margin and padding to 0, and ensure the image width is set 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>

Answer №4

After analyzing the situation, it seems that I encountered a similar issue. By adjusting the overall section size to 98.8vw, I was able to eliminate the excess padding. However, the potential risks involved in this solution remain uncertain.

Answer №5

The padding is actually coming from the .row class, which adds padding on both sides of its direct children. To override this padding in bootstrap, simply include .pe-0 in the div surrounding 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 want to eliminate padding on all sides of the image, use .p-0 instead.

You can find a comprehensive list of built-in utility classes like these in the bootstrap documentation for layout utilities: https://getbootstrap.com/docs/4.3/layout/utilities-for-layout/

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

Display block disappearance persists even after being set to none

Presented below is my menu design: <div class="span2 main-menu-span"> <div class="well nav-collapse sidebar-nav"> <ul class="nav nav-tabs nav-stacked main-menu"> <li class="nav-header hidden-tablet"><span ...

htmlcss

Preventing Page Refresh when Button is Clicked in Angular

How can I prevent page reload when a button is clicked in Angular? I'm developing a quiz application in Angular where I fetch random questions and options from an API. When users select an option, the next question should appear without reloading the ...

javascripthtmlangularreload

Can Bootstrap be used to create distinct spacing between table rows in a DataTable?

How can I achieve the look of separate table rows as shown in the image provided? I am currently using DataTables and bootstrap 5. I am looking to create visually distinct rows where the background is visible in between each row. Click here to view the i ...

htmlcssdatatablesbootstrap-5

Ajax activates a slider

One element I have is a menu div, along with a content div Initially, when the slider (which is a jquery plugin) is placed in the index.php, everything appears to be working well, as shown in the image below However, my objective is to have each page&apo ...

jqueryhtmlajaxslider

The background image is failing to display, although other styles for the class or element are visible

Why won't the background image display, even though I have verified that the image path is correct and changing other properties like color or background color works just fine? Here is my CSS code snippet: .container { background-imag ...

htmlcssbackground-image

Rails 7 Bootstrap alert is refusing to close

I recently came across this informative guide at which helped me implement a Bootstrap alert on my Rails 7.0 application. The alert is being displayed successfully, but I encountered an issue where it doesn't dismiss when I click on the close button ...

ruby-on-railsbootstrap-5

A straightforward development and production build to incorporate HTTPS for a static website created with React and Express

Is there a straightforward method to create a static web page and Node backend where the Node server runs in HTTPS during development but not in production? How can the static web page point to https://localhost/foo in dev mode, and simply /foo in producti ...

htmlnode.jsexpresswebpackdevelopment-environment

Move an object in relation to the right boundary of the viewport

I have a div that starts off the screen due to this CSS code: transform: translateX(100%); Now, I am looking to bring this div back into view by a specific distance from the right side. Although I have tried using transform: translateX(-450px), it seems ...

csscss-transforms

How come jQuery is retaining the original DOM element classes even after I have modified them using jQuery?

Here is the code snippet I am working on: $(".drop-down-arrow-open i").click(function(){ console.log("The click function for .drop-down-arrow-open is triggered even when it is closed"); let thisParent = $(this).closest(".projects-container").find(".need ...

javascriptjqueryhtml

What is the best way to eliminate excessive margin-bottom on a floating image?

Is it possible to maintain the same margin at the right and bottom of an image when using <img> inside <p><img style="float:left">dummy text dummy text dummy text dummy text</p>? ...

htmlcssxhtml

Dragging objects on a map is done using jQuery and it causes them to bounce

Currently, I am working on implementing the JQuery Draggable feature. My idea is to create a map where I can attach image Divs to it dynamically using Jquery. So far, I have been successful in adding the Divs and making them draggable around the map effici ...

javascriptjqueryhtmldraggable

Identifying the moment when the body scroll reaches the top or bottom of an element

I have been experimenting with javascript and jquery to determine when the window scroll reaches the top of a specific element. Although I have been trying different methods, I have yet to see any successful outcomes: fiddle: https://jsfiddle.net/jzhang17 ...

javascriptjqueryhtmlcss

How can line breaks be displayed in JavaScript text output?

I need assistance with creating a scrolling series of text messages that are separated by linebreaks. This is the current code I have: <script type="text/javascript" src="xbMarquee.js"></script> <script type="text/javascript"> <!-- ...

jqueryhtmlline-breaks

The dropdown feature within a bootstrap button group is malfunctioning

As part of the web track in cs50, I am working on creating a webpage. My goal is to include options for navigating to the next or previous pages, as well as a dropdown menu with all the pages in between. However, when using Bootstrap's code, the dropd ...

htmlcssbootstrap-4cs50

What is the best method to choose a random color for the background when a button is pressed?

Does anyone know how to create a button that changes the background color of a webpage each time it is clicked? I've been having trouble with the javascript function in my code. I've tried multiple solutions but nothing seems to work. Could someo ...

javascripthtmlcss

Expand the accordion to reveal all the content

I'm facing an issue with my accordion where a scrollbar appears in every content section. To fix this, I tried setting overflow: hidden in the CSS: .ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; overflow: hidd ...

javascriptjqueryhtmlcssaccordion

How to Override Global CSS in a Freshly Created Angular Component

My CSS skills are a bit rusty and I need some assistance with a project I'm working on. The project includes multiple global CSS files that have properties defined for different tags, such as .btn. However, these global CSS files are causing conflicts ...

htmlcssangulartypescript

Learn how to display two different videos in a single HTML5 video player

Seeking a solution to play two different videos in one video element, I have found that only the first source plays. Is jQuery the answer for this problem? HTML Code: <video autoplay loop id="bbgVid"> <source src="style/mpVideos/mpv1.mp4" type ...

javascriptjqueryhtmlvideo

Requesting for Nav to be positioned directly below the header, in a fixed manner, with no overlapping

After successfully resolving the issue of my header overlapping content, which was thanks to your help, I encountered a new challenge. I was advised to group my navigation bar with my h1 header for a fixed position but doing so caused everything to go hayw ...

htmlcss

Full width display without any scrollbars

I need some help with adjusting the width of a section on my webpage to fit the browser size. Currently, I am using width: 100%, but this is causing scrollbars to appear. Unfortunately, I can't use overflow-x: hidden; as it will hide some of the conte ...

csslayoutwidthoverflow