What is the best way to eliminate empty spaces from the container?

click here check out this image too

Just getting the hang of Bootstrap. The first picture looks good, with the image as the background. But on the second picture, there are margins and a background color showing up. How can I get rid of those margins? Here's the code for the second one:

<div class="container-fluid bg-image w-100" style="background:rgb(201, 188, 188);">
                <div class="text-center display-3 pt-5">
                    <p>What We Do</p>
                </div>
                <p class="text-center pt-2" style="padding-right:20%; padding-left: 20%;">Lorem ipsum dolor sit amet consectetur 
                    adipisicing elit. A veniam totam eaque praesentium excepturi voluptas suscipit dicta, 
                    blanditiis repudiandae error! Quia dignissimos obcaecati vero illum optio ducimus 
                    iure assumenda earum hic soluta ratione voluptas laudantium quasi incidunt maxime, 
                    autem vel repellendus enim. Maiores enim assumenda fugiat dicta distinctio, a neque.</p>
                <div class="text-center pt-2 pb-2"><img src="./img/03.png" alt="" style="width: 50%;"></div>
                <p class="text-center pt-5 pb-5">Images from <span style="text-decoration: underline">Freepik</span></p>
            </div>

Answer №1

If you're looking to enhance your website's design, consider incorporating the bg-image class into your CSS styling.

{
  padding : 0 !important;
  margin : 0 !important;
}

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

How can I ensure that my content stays fixed at the bottom of a scrolling div in Material UI React?

I have developed a React JS component using Material UI that includes a chat input feature. However, I am facing an issue where the width of the chat input is always half the screen size on desktop or mobile devices. When I try to change the width to 100%, ...

How can I display real-time streams from multiple IP cameras on an HTML page using Flask and Python?

I am currently dealing with a collection of cameras and the corresponding URLs in RTSP format. I managed to create a simple script that extracts the camera URL from the camera_config JSON file, but now I'm facing the challenge of embedding these video ...

Difficulty in pinpointing hyperlinks within a styled list

My current challenge involves customizing the color of links within the <li> elements by applying specific classes to the <li> tag. The structure of my HTML is as follows: <div id="sidebar_tall"> <ul> <li class="active_item"> ...

What is the best way to choose a range of nodes with dynamic limitations without relying on static positions?

<li></li> <th> <li></li> <strong>"Jeff"<strong> <li></li> <a>"Mary"<a> <li></li> <th> <li></li> <strong>"Rich"<strong> <li></li&g ...

Displaying data from a PostgreSQL database to users based on their login username in Flask

I am struggling with displaying specific data from a database table based on a user-entered username. The goal is for a user to enter their ID and access a page showcasing their corresponding data from the table. While I can show the username, I'm fac ...

Is all of the CSS stored in one or multiple files?

Will the number of CSS files on my website impact its performance? I understand the necessity of having a separate file for print styles, but I'm wondering about the other CSS files. Is it better to have all my styles in one file or split them into mu ...

Negative margin causes content to conceal itself

I'm facing an issue with using a negative margin for positioning a label. The label is not showing up as expected. Specifically, I need to place a search box on a blue background but when applying a negative margin, the search box does not appear prop ...

What is the best way to customize the look of the v-calendar component in Vue.js?

I've recently started a project that involves Vue.js, and I needed to create a datepicker for it. After some research, I opted to utilize the v-calendar package. The implementation of the component went smoothly and functioned as expected right out o ...

Is there a way to position my input at the bottom of its parent element?

Is there a way to position this input element at the bottom and center of its parent div? https://i.sstatic.net/gs1yP.jpg ...

Eliminate any trace of Bootstrap 4 design elements on the .card-header

I'm facing some difficulties in removing all the default styling of Bootstrap 4 from the .card component. It seems like this issue might not be directly related to Bootstrap since I am also experiencing it in Edge browser. Could someone please assist ...

Looking to spice up your jQuery modal dialog with unique and varied styles?

Can anyone explain why the grid displayed in our jQuery modal dialog (jqGrid) appears with different styles, specifically font size, compared to the grid on our main screen? I would appreciate any insights or suggestions. ...

Can I specify which modal or component will appear when I click on a component?

Working on a small Angular 5 project, I have a simple component that represents a food product shown below: [![enter image description here][1]][1] This component is nested within my main component. When this component is clicked, a quantity component/m ...

Imitate a keypress within a hidden web browser component using C#

Currently, I am engaged in a project that requires me to navigate a webpage and gather information about products, prices, etc. using the webbrowser object in .NET 3.5. The challenge arises because the page contains fields with an ajax suggest script, mak ...

I am looking to implement a feature in my quiz application where a green tick mark appears next to the question number for the correct answer and a red cross mark for the wrong answer

My HTML code here retrieves questions from a database and displays them based on the question number. <h4>{{indexOfelement+1}}</h4>&nbsp;&nbsp; In my CSS, I need to style the questions as follows: How can I achieve this? Each question ...

What is the best way to alter the header in Django when a user is authenticated?

In my project, I have two headers: header.html and headersuccess.html. When a user is logged in, I need to change the header from header.html to headersuccess.html. How can I implement that? Here is an excerpt from my views.py file where I render loginsuc ...

Creating an HTML report in Oracle SQL*Plus with alternating row colors

When using Oracle sqlplus, I can easily convert query output into an HTML report by setting "markup html on". This is a simple way to publish a database report online. However, I do miss one thing - alternating colors for every other row. This feature is ...

What could be causing the width of a table row (tr) in a table element to not function properly, while the height is functioning as expected?

My code is as follows: .table1 { background-color: gray; display: flex; justify-content: ; align-items: ; height: 400px; margin-left: 40px; padding-left: ; } .table1 tr { background-color: blue; height: 50px; width: 50px; } <tabl ...

Position the div to the right of a left navigation bar instead of beneath it using Bootstrap 5

After using the code snippet from , I'm struggling to align content to the right of the navigation bar. It seems like a simple issue related to changes in Bootstrap 5 that I can't seem to figure out. <div class="d-flex flex-column vh-100 ...

Accessing a JSON value in SCSS for localization

I have a JSON file containing all the values that I want to use for internalization in my app. On the HTML side, I am able to retrieve the values, but on the CSS side, I am using a "before" pseudo-element. In my HTML, I am using the class "menu-input" li ...

Is the button not aligned properly with the email input field?

<div class="subscribe__form--action--btn"> <form action="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32545b5e5b5746545C5B5356477F54585850"> </a>" meth ...