Ways to eliminate space surrounding a div containing an image

When one column takes up col-md-4 and another takes up col-md-8, the second with an image does not fill the width completely, leaving gaps on the left and right sides. Can anyone provide advice on how to remove these gaps and make the image full size? Thank you. Here is a screenshot for reference: https://i.sstatic.net/YZr86.png

.upperDiv{
  height: 100px;
  width: 100%;
  background: red;
  margin-top: 20px;
  margin-bottom: 20px;
}

.fixed-content {
  width: 100%;
  height: 100px;
  object-fit: cover;
}
<div class="container">
  <div class="row upperDiv">
    <div class="col-md-4" style="background: #005AA1;">
      </div>
    <div class="col-md-8">
      <img src="assets/libled.jpg" class="fixed-content">
    </div>
  </div>
</div>

htmlcssangular

Answer №1

Bootstrap automatically adds padding to align your content. You can remove this padding by adding the p-0 (padding = 0px) class name.


<div class="container">
  <div class="row upperDiv">
    <div class="col-md-4 p-0" style="background: #005AA1;">
      </div>
    <div class="col-md-8 p-0">
      <img src="assets/libled.jpg" class="fixed-content">
    </div>
  </div>
</div>

Answer №2

Upon inspecting your HTML code, it appears that you are utilizing Bootstrap's grid system, as indicated by the presence of col-md-X classes. The spacing issue you are encountering is a result of the padding applied to the grid cells in order to create the gutter.

You have a couple of options to address this:

  1. Consider using the image as a background instead, as the padding is part of the element and will be covered by the picture.
  2. Remove the gutter altogether.

The first option is fairly straightforward, so let's focus on the second. You can explore the .no-gutter helper class provided by Bootstrap. Applying this class to a row will eliminate all gutters for the columns within it. However, this will also remove the gutter from the left column. Alternatively, you can create a custom class with 

padding-left:0 !important;padding-right:0 !important;
to specifically remove the gutter from a particular column.

Regardless of your choice, keep in mind that columns should not be relied upon for styling purposes alone. They are intended to structure your content layout. While I've suggested multiple solutions to your issue, using the .no-gutter class is the most optimal one. Other methods may result in unexpected visual consequences, such as uneven gutter widths or misalignment with adjacent columns.

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

The <select> list appears wider on Windows compared to Mac

Is there a way to achieve consistent width for a wide select list on different operating systems and browsers? I've noticed that the width of the select box varies between Windows and Mac OS when viewed in Chrome or other browsers. For example, if yo ...

htmlcsswindowsmacosgoogle-chrome

JavaScript data-interval for mobile browsers like opera mini

I am currently experiencing an issue with implementing the setInterval function on my website. Below is a snippet of the code where I am attempting to increment a count by 1 and display it on the screen: <div id="test"></div> <script> ...

javascripthtmlmobileopera-mini

Use the resizable function for widths greater than 1024px

I have a resizable function on my page: $(function() { $( "#droppable" ).droppable({ create: function( event, ui ) {$( this ).hide(0)} }); $( "#droppable" ).on( "dropover", function( event, ui ) { $( this ) $( this ).text('¿Eliminar?&apo ...

jqueryhtmlcss

The custom color override feature in Bootstrap is not being applied as expected

I attempted to incorporate a new theme color into Bootstrap's color scheme, but encountered difficulties in getting it to work. To guide me through the process, I referred to this YouTube tutorial as well as the official Bootstrap documentation. Des ...

csstwitter-bootstrapsass

Using PHP and AJAX to send a form

Currently, I am attempting to integrate ajax functionality into my form in order to submit it without refreshing the page. However, I have encountered an issue with the php echo command not functioning as expected. When I remove the ajax code, the form s ...

phpjavascripthtmlajax

What is a simple way to ensure that my image retains its square shape on a responsive design without having to use numerous media queries?

I've been searching for solutions to my issue, but none of them have worked for me so far. I am working on a form where users can edit or add images, and I want each image to be displayed as a square regardless of the device being used (desktop, mobil ...

cssimagebootstrap-4responsive

Encountering a hiccup while trying to start the project using npm

Attempting to kickstart a new project post npm modules installation. Upon entering npm start the following error is received: There is an error in your gulpfile: SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outs ...

angularionic-frameworknpm

The margins on the ejs file and html file are inconsistent, while the background color is displaying as gray instead of white

I've noticed that the margins of my page appear differently when comparing the HTML file in the browser to the EJS file. My setup involves Node/Express and Bootstrap 4, with the page initially built using HTML. I aimed for the content to stretch from ...

htmlcssnode.jsbootstrap-4ejs

Achieve full width for container using flexbox styling

In an attempt to develop a category dropdown menu with multiple columns based on the length of the <ul>, I am facing some challenges. For reference, you can view the fiddle that I have created here. The goal is to arrange each submenu item below th ...

htmlcssflexbox

Adjust the font size in CSS based on a specified range of values

When the screen size is small (mobile), the font size is fixed at 14px. On really large screens, the font size is set to 18px, ensuring it never goes below 14px or above 18px>. This is achieved using media queries.</p> <p>However, for the i ...

cssfont-size

Troubleshooting techniques for resolving CSS issues with the video.js package in ReactJS

When using video.js in react to build a video player, I encountered an issue with the npm package not providing its inbuilt CSS. How can I add the inbuilt CSS of video.js? Instead of the control bar, I am getting something different than what is shown in t ...

cssreactjs

Is there a way to create shared borders among Bootstrap columns?

Creating a Bootstrap container with two columns is my current task. The layout should display the columns side by side horizontally on larger screens, and stacked vertically on smaller screens with a 1px border surrounding each column, featuring rounded co ...

cssbootstrap-5screen

Tips for utilizing the data-target feature in Bootstrap?

<button id="btn-id" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-navbar-collapse-1"> <span class="navbar-toggler-icon"></span> <span c ...

htmlcssformsbootstrap-4

What is the best way to achieve a Clamp-To-Border effect on a Texture loaded onto an Image in the THREE.js?

My scene includes a plane with an image loaded onto the texture. I've found that there is no Clamp-To-Border option for textures, only Clamp-To-Edge, Repeat Wrapping, and Mirrored Wrapping. Below is an image displaying the default ClampToEdge effect. ...

javascripthtmlimage-processingthree.jsbase64

Change the direction of the arrow on the button to point downwards once the menu has slid

After hovering over a button, an arrow is added to it. Upon clicking the button, a content div slides out within its wrapper by utilizing jQuery.slideToggle(). Following the slide out of the div, I aim to rotate the arrow in the button by 180 degrees to i ...

javascriptjqueryhtmlcsscss-position

What is the best way to vertically align elements in HTML, CSS, and Bootstrap?

https://i.sstatic.net/rhWmI.png Vertical alignment is required for all the bold fields. Below is the code snippet I attempted: If there is overflow in text (non-bold), it should display as ... I made attempts with CSS and bootstrap. ...

htmlcssbootstrap-4

Is there a way to fill the remaining height of the parent with the middle item when sandwiched between two others using CSS?

I am facing a design challenge with a parent container that has 3 children arranged vertically. The top and bottom children are wide (600x200), while the middle child is tall (200x600). The parent container itself is much smaller (100x200) as I want to ens ...

htmlcss

What could be causing my Rails objects to appear in an array when implementing remote true?

On the homepage of my rails application, I am using AJAX with remote true link to display the names of different objects. However, there is an issue where the names appear followed by an array of the objects. In the partial view code, I have a helper metho ...

javascriptjqueryhtmlruby-on-railsajax

Struggling to activate the hide/show feature on mouseover

After exploring different methods and seeking guidance on this platform, I am still unable to achieve the desired outcome. My goal is to have the content in the "topb" section appear when hovering over a link with the class of "top" and disappear when the ...

javascripthtmlcss

What changes can I make to the script in order to display every element from a MySQL query using PHP, MySQL, JavaScript,

Enhanced Multiple Dropdown Selection Using Ajax In the following scenario, we have a webpage featuring a multiple dropdown selection that interacts with a MySQL database. By choosing options in the dropdowns labeled site, menu, and category (categ), a que ...

javascriptphphtmlmysqlajax