Bootstrap - Image is not fully covering the width of the container

Having some trouble with Bootstrap and getting this image to cover the full width of my container. Any ideas?

Appreciate the help!

Here's the code snippet:

Hey everyone,

I've been working on a new project using Bootstrap, but I'm having difficulty making an image cover the entire width of my container. Any suggestions would be greatly appreciated. Here's the CSS code snippet I'm using:

:root {
    --DarkerGray: #1b1d1d;
    --Gray: #3F4545;
    --MediumGray: #464a4a;
    --DarkBlue: #123B79;
    --LightBlue: #18A5A7;
    --LightGray: #D9D9D9;
    --LighterGray: #eceaea;
    --White: white;
    --OrangeSelect: rgb(255, 166, 0);
}
html, body {
    user-select: none;
}
.navbar {
    background-color: var(--DarkBlue);
}

.nav-item {
    cursor: pointer;
    font-weight: 550;

}
.dropdown-item {
    cursor: pointer;

    font-weight: 550;
}

.dropdown-item:hover {
    background-color: var(--OrangeSelect);
}


#containerIMG {
    width: 100%;
    height: 500px;
    object-fit: cover;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<img src="https://t.ctcdn.com.br/essK16aBUDd_65hp5umT3aMn_i8=/400x400/smart/filters:format(webp)/i606944.png" id="containerIMG"></div>

htmlcsstwitter-bootstrap

Answer №1

To remove the padding from the .container-fluid class, simply add p-0 to the class in your HTML code.

:root {
    --DarkerGray: #1b1d1d;
    --Gray: #3F4545;
    --MediumGray: #464a4a;
    --DarkBlue: #123B79;
    --LightBlue: #18A5A7;
    --LightGray: #D9D9D9;
    --LighterGray: #eceaea;
    --White: white;
    --OrangeSelect: rgb(255, 166, 0);
}
html, body {
    user-select: none;
}
.navbar {
    background-color: var(--DarkBlue);
}

.nav-item {
    cursor: pointer;
    font-weight: 550;

}
.dropdown-item {
    cursor: pointer;

    font-weight: 550;
}

.dropdown-item:hover {
    background-color: var(--OrangeSelect);
}


#containerIMG {
    width: 100%;
    height: 500px;
    object-fit: cover;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<body>  
    <nav class="navbar navbar-expand-lg navbar-dark ">
        <a class="navbar-brand" href="#">
        
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      MENU
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                      <a class="dropdown-item" href="#"> DISHES </a>
                      <a class="dropdown-item" href="#"> SNACKS </a>   
                      <a class="dropdown-item" href="#"> SOUPS </a>     
                  </li>
                   <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      DRINKS
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                      <a class="dropdown-item" href="#"> WATERS </a>
                      <a class="dropdown-item" href="#"> JUICES </a>
                      <a class="dropdown-item" href="#"> SODAS </a>
                      <a class="dropdown-item" href="#"> BEERS </a>
                      <a class="dropdown-item" href="#"> WINES </a>
                      <a class="dropdown-item" href="#"> APPETIZERS </a>
                      <a class="dropdown-item" href="#"> COCKTAILS </a>    
                  </li>
              <li class="nav-item">
                <a class="nav-link text-white">RESERVE TABLE <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link text-white"> SEARCH </a>
              </li>
              <li class="nav-item">
                <a class="nav-link text-white"> MY ACCOUNT </a>
              </li>
              <li class="nav-item">
                <a class="nav-link text-white"> MY ORDERS</a>
              </li>
            </ul>   
          </div>
      </nav>
      <div class="container-fluid p-0 bg-dark">
        <img src="https://t.ctcdn.com.br/essK16aBUDd_65hp5umT3aMn_i8=/400x400/smart/filters:format(webp)/i606944.png" id="containerIMG">
      </div
      </body>

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

`Unable to activate Bootstrap navbar-toggle by clicking`

I've been struggling to get the bootstrap navbar-toggle to function properly on my websites. Despite numerous attempts, I still can't seem to make it work. Clicking on the 'hamburger' icon doesn't trigger any response. Could someo ...

htmltwitter-bootstrapnavbartogglebutton

Collapsing borders in JavaFX 8

Hey there! I'm having a little issue with JavaFX 8 components. I'm trying to make them sit next to each other with borders, but it's not quite working out. Is there a way to make them blend together and share one border? import javafx.geome ...

javacssuser-interfacejavafx

What is the recommended way to adjust the width of a paper-textarea element in Polymer 1.0?

Is there a way to adjust the width of a paper-textarea? I have tried using CSS selectors within Polymer 1.0 style tags, but it does not seem to be effective. The paper-textarea element is made up of paper-input-container. I attempted the following approach ...

csscss-selectorspolymer-1.0paper-elements

how to remove product listing from main category in magento

Can anyone help me figure out how to disable the product listing in Magento (version 1.4) Top Categories? I'm open to any ideas or tips on how to best accomplish this task. Thank you! ...

phpmysqlhtmlxmlmagento

Is there a way to print the entire Bootstrap modal even if the content in the modal body is scrolled beyond visibility?

An issue arises when a user needs to scroll down to see all of the content in the modal body. When printing the modal, only the visible part is printed rather than the entire content. Various code snippets from different sources have been tried with no suc ...

javascriptjquerytwitter-bootstrapprintingbootstrap-modal

What is the best way to iterate through and keep track of components within an Angular 2

Inquiring about counting components within my angular2 project. I have a total of 15 components - is there a way to loop through all of them or simply display their count? Preferably without involving them in the main app.components.html. ...

javascripthtmlangular

`To position an element within a div without affecting its layout, use absolute positioning``

Is it possible to add an element to a div that is aligned to the right but still sits on top of the other element within the div? Here are some images to illustrate the issue: https://i.sstatic.net/dW7ev.png The problem arises when you try to center the ...

htmlcssbootstrap-5

Surprising spacing found between CSS header elements

As I am in the process of redesigning a website, I have encountered an issue with certain elements in the header section. Specifically, the header consists of a logo, some text, and a navigation bar. There seems to be a thick gap between the bottom of the ...

htmlcss

Sending a value to a text box using json data transmission

I am having trouble accessing data from a js file and fetching the value to an html text box. Despite trying, I'm unable to get the desired result. Below are the contents of samle.js file and jsonhtml.html file: { "var1": "1", "var2": "2" } <scri ...

javascriptjqueryhtmljson

How to display a specific HTML section to a select group of individuals using PHP

I have created a section in HTML that I only want to be visible to individuals whose if($Admin >= 1) condition is met based on my database. However, I am uncertain about how to implement this. This is the current state of my HTML code. !-- ADM SECTIO ...

phphtmlcss

Tips for swapping out a sticky element as you scroll

Context As I work on developing a blog website, I aim to integrate a sticky element that dynamically updates according to the current year and month as users scroll through the content. This would provide a visual indication of the timeline for the listed ...

javascriptcssstickyintersection-observerhtml-heading

Cease the continuous reloading of a particular div while navigating

Currently, I am designing my personal website and have integrated a music player. However, a major issue that I am encountering is that whenever I navigate to another page, the music stops playing and restarts from the beginning. This interruption is quite ...

htmlpersistentaudio-player

Generate a custom image using a pre-existing background image and text using JavaScript, then save it as a JPEG file in

Managing multiple fanpages on Facebook can be quite a task, especially when it comes to posting images with funny text. I have different backgrounds for each page, which means I have to save each image individually with the text. To streamline this process ...

javascriptphpjqueryhtmlphp-gd

Having difficulty with printing a particular div

I need help with printing a specific div containing checkboxes using jQuery. The checkboxes are initially checked based on data from a database, but when I try to print the div, the checkboxes remain unchecked in the print view. Below is the code snippet ...

javascripthtmlcsscheckboxprinting

Pass a variable between popup.js and background.js in a Chrome Extension

Despite finding some answers to similar questions, none of them provide a complete solution. The information in the answers lacks necessary documents that were not included in the original question. My goal is to create a scaffold for Chrome extensions wh ...

javascripthtmlgoogle-chromegoogle-chrome-extension

The enigmatic "margin-30" element within adaptable layout design

Recently, I decided to challenge myself by learning pure CSS and moving away from relying on Bootstrap for my layouts. The only aspect of Bootstrap I really used was the container class, so I created a basic project to experiment with pure CSS. In this pro ...

htmlcssbootstrap-4

I am attempting to build a party planning website but I am encountering an issue where the output is not generating properly. Whenever I click on the submit button, the information I input

I am struggling to create a party planner website and encountering issues with the output. Whenever I click on the submit button, the form just clears out without any feedback or result. Here is what the expected output should be: Validate event date 1: ...

javascripthtml

jQuery, trigger a function when the document has finished loading

I have created the following code in an attempt to display a message to only Internet Explorer users visiting the page: <script src="jquery.reject.js"></script> <script> $(document).ready(function() { $.reject({ reject: { a ...

javascriptjqueryhtml

When the window is scrolled to 50%, I would like to load some additional data

Looking to load data when the browser scrollbar reaches 50%... In jQuery, I created the following function: $(window).on('scroll', function () { alert("scrolling"); if ($(window).scrollTop() + $(window).innerHeight() > ...

javascriptjqueryhtml

Tips for updating the border color of a div upon clicking it

Currently working on a project using react/typescript and facing an issue with changing the border color and width of a div upon clicking it: <div className="showroom-card " onClick={() => setSelection({ showroom: &ap ...

javascriptcssreactjstypescriptuse-state