Unable to change Gutters to 0 in the .container-fluid class in Bootstrap 5.2

I have gone through all the answers related to my question, but I couldn't find a solution for it. Below is the HTML code with Bootstrap 5.2 that I am working on:

<section id="title">
     <div class="container-fluid">

       <!-- Nav Bar -->

       <nav class="navbar navbar-expand-lg navbar-dark">
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
           <a class="navbar-brand">Lindog</a>
           <ul class="navbar-nav ms-auto">
             <li class="nav-item">
               <a class="nav-link" href="">Contact </a>
             </li>
             <li class="nav-item">
               <a class="nav-link" href="">Pricing</a>
             </li>
             <li class="nav-item">
               <a class="nav-link" href="">Download</a>
             </li>
           </ul>
         </div>
       </nav>


       <!-- Title -->



       <div class="row">
         <div class="col-lg-6">
           <h1>Meet new and interesting dogs nearby.</h1>
           <button type="button">Download</button>
           <button type="button">Download</button>
         </div>
         <div class="col-lg-6">
           <img src="images/iphone6.png" alt="iphone-mockup">
         </div>
       </div>
     </div>
   </section>

I am trying to add padding around the .container-fluid with 5% from the top, 15% from the left and right, and 5% from the bottom. Here is the CSS code I wrote for this:

.container-fluid{
  padding: 5% 15%;
}

However, when I inspect my site in Chrome, I see that the section above overrides my CSS code:

container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-right: auto;
    margin-left: auto;
}

I want to remove the following lines from the above code:

        padding-right: calc(var(--bs-gutter-x) * .5);
        padding-left: calc(var(--bs-gutter-x) * .5);

I tried using mx-0 in the row class, but it didn't work as expected.

Answer №1

Apply the "g-0" class alongside container-fluid

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

What are some ways to utilize the <span> tag to apply distinct styles to specific characters within text compared to

Imagine I have a string like <p>hi my name is john</p>. I know that I can use the span element to target specific characters and apply different styles using CSS. But what if I want to style "name" and "john" differently from each other and the ...

Trouble encountered when attempting to override styles in Material UI's TableRow

I am attempting to customize Material UI's default styles in order to create a margin between each TableRow. Despite my efforts, it appears that the override is not being reflected in the user interface. ...

Utilizing Wordpress for Effective Internal Linking

Looking to set up a Table of Content on a custom Wordpress template, I decided to hardcode the headings for internal sections in advance. However, I'm facing an issue where it doesn't scroll to the intended section in Wordpress. Take a look at th ...

CrispyForms: FormHelper - Easily move the </form> tag to a different location and manage multiple forms from a single model

When utilizing FormHelper and invoking the Form using {% crispy form %}, it generates a Form wrapped within <form> tags. However, my Template is structured into two columns. The first column displays the dynamically generated {% crispy form %}. The ...

Step-by-step guide on using variables to apply CSS

In our table consisting of 6 rows and 2 columns, the second column displays a Font Awesome circle followed by various values in the database field (such as Outstanding, Very Good, Good, Needs Improvement, and Adequate). I am looking to dynamically change ...

Clicking on the mail icon will open the mail with the associated mail id

https://i.sstatic.net/6TLpN.pngWhen the mail icon is clicked, the mail will open with this email address. I am currently working on a project where clicking the mail icon will redirect to the mail signup page with the corresponding email address. In the ...

What is the best way to resize an image for mobile site optimization?

I've been struggling with resizing an image by its width for different mobile devices even after trying to search on Google. Here's what I have attempted: CSS: img.test { width: 100%; height: auto; } HTML: <html> <head> ...

Adjusting data points on a radar chart.js through user interaction

I have a radar map generated using chart.js, along with some input fields where users can enter values that I want to reflect in the graph. I am exploring ways to update the chart dynamically as the user types in the values. One option is to have the char ...

Difficulty aligning two images in one div using HTML and CSS

Having trouble with HTML and CSS. I have a div containing 2 images - one for background and the other for an avatar image that I can't seem to center. I've tried using margin:0 auto; and display:block; but it's not working. Current HTML pag ...

Addressing a jquery.ajax relative path problem

I am a newcomer to this topic and I have been researching extensively online for more information. I would like some further insight into the following issue: I am attempting to retrieve a JSON file located one level down from the directory where `index.h ...

Choose your options effortlessly with CSS or JavaScript dropdown menus

As a novice web developer, I am contemplating whether dropdown menus are more suitable to be coded in CSS or JavaScript. What are the advantages and disadvantages of each approach? ...

Searching for a particular string, selector, or XPath on numerous web pages using the "inspect element" browser tool - what is the best approach?

Hey everyone, I hope you're all having a fantastic day. I'm wondering, is there a way to search for an element across multiple web pages simultaneously, rather than just one page at a time? The goal is to locate a specific string or code (like ...

Combining a Python backend with an HTML/CSS/JS user interface for desktop applications: the perfect synergy?

Is it possible to seamlessly combine Python code with HTML/CSS/JS to develop desktop applications? For instance, I want to create a function in Python that displays "Hello World!" and design a visually appealing user interface using HTML/CSS/JS. How can I ...

Ways to execute a JavaScript function upon a button click instead of during the page load completion

I searched on Google but couldn't find the answer, so I'm asking here for help. In the attached screenshot located at the end, when the user clicks on the download button, some backend actions are performed such as file transfer. Once the proces ...

Is there a way to eliminate the underline in TextField components in Material-UI?

Is there a way to remove the underline from a material-ui TextField without using InputBase? I would prefer to stick with the TextField API, but have not been able to find a solution in the documentation. ...

Angular child component displaying of table data is not looping properly

Currently, I am using Angular 13 along with Bootstrap 3 to develop an application that consists of two main components: form-component (dedicated to inputting user details) and list-component (designed to showcase all data in a table format). Within the HT ...

Ensure that CSS is integrated correctly

I have a main Django template that incorporates another template for the navigation bar. I currently have separate CSS files for both the main page and the navbar. My query is: what is the correct method to include the CSS from the navbar in the main p ...

Attempting to transmit multiple variables

Can anyone provide assistance with passing multiple variables from one page to another? I am able to pass a single variable, but I need to send more than one by clicking a link. Below is a snippet of my code containing the rows I want to transmit to the ne ...

Guide on how to modify the CSS styling of a particular <td> element when its parent contains a specific class

.webgrid-table td, th { border: 1px solid #98bf21; padding: 3px 7px 2px; } I am facing an issue where the style defined above is being applied to all td elements. However, I want to exclude the styling for a td that is within a tr element with the ...

Guide on incorporating an external HTML file into an ASP.NET webpage

Is there a way to incorporate an external HTML file into a ASP.NET web page? In PHP, we typically use the include function for this purpose. I am looking for a similar solution in ASP.NET as well. My goal is to have a shared header HTML file that can be ...