Achieving a full-width image display in Bootstrap: A guide

I've been struggling to find a solution to stretch an image across a div using CSS and Bootstrap. I attempted to make both the div and parent container fluid, but no matter what I try, there always seems to be some white space on the left and right sides of the image.

Here is the HTML code:

 <div class="container-fluid">
    <div class="row color-block-top"></div>
    <div class="row-fluid block">
      <img src="Images/family-beach.jpg" alt="Family on the beach" class="beach">
    </div>
    <div class="row color-block-top"></div>
  </div>

And the corresponding CSS:

.color-block-top {
  background-color: rgb(36,54,138);
  padding: 1vh;
  min-width: 20em;
}

.block {
  display: block;
  margin-left: auto;
  margin-right: auto;
  object-fit: fill;
  width: 100%;
}

.beach {
  margin: 0;
  min-width: 100%;
  height: 500px;
  object-fit: cover;
  overflow: hidden;
}
htmlcssbootstrap-5

Answer №1

Utilize the Bootstrap grid system correctly by nesting col within row, and then apply spacing utility classes, such as px-0, to a container-fluid to eliminate its default padding.

To eliminate gutters, utilize gutters utility classes by adding gx-0 to the row elements.

.color-block-top {
  background-color: rgb(36, 54, 138);
  height: 5vh
}
.beach {
  object-fit: cover;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@latest/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container-fluid px-0">
  <div class="row gx-0 color-block-top"></div>
  <div class="row gx-0">
    <div class="col">
      <img src="https://picsum.photos/500" alt="Family on the beach" class="beach w-100 h-100 ">
    </div>
  </div>
  <div class="row gx-0  color-block-top"></div>
</div>

Answer №2

While working with bootstrap snippets and docs library, you may find that you don't need to create many custom styling classes. However, it's perfectly acceptable to create a special class to handle your grid layout if needed. It seems like you've probably already figured this out, but it's always good to clarify!

To customize your layout, you can add a custom style class in the head section of your HTML document. This can be useful for setting specific heights that aren't included in bootstrap's default options, saving you from adding multiple class names to individual divs in your HTML.

Here's an example of how to add a custom height class:

    <head>

    </head>

       <style>

       .h-60 {
          height: 60%
       }

       </style>


      <body>

Another option is to set the height class to "height: inherit" when the parent element's size is specified. If the parent has an absolute height value (e.g. height: 50px), using "height: inherit" or "height: 100%" will apply the same height to the child element.

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 do I make an element stay in place between two other elements?

Trying to make an element "float" between two other elements using the `position : sticky` attribute. Not achieving the desired effect and unable to determine why. The goal is for the `copy` to float between the bottom of `upper` and the top of `lower`. ...

htmlcss

Creating a React.js component and setting an initial value within it

Recently delved into the world of React.js and currently attempting to create a reusable header that can switch between two states: one for when the user is logged in, and another for when the user is not logged in. // Header.js var Header = React.createC ...

javascripthtmlreactjs

Ways to remove unwanted line breaks following PHP code within HTML documents

Currently working on building my blog, and I'm facing some challenges with the post div. It seems like every element within is automatically getting line breaks. Despite trying to float them or adjust padding, it's not giving me the desired layou ...

phphtmlcssline-breaks

Incorporate JavaScript strings into HTML dynamically

I am facing some challenges with single quotes while trying to append HTML with a JavaScript string. So far, I have managed to successfully append the element: $("<a class='action-button' id='pl65197buy' value='buy now'&g ...

javascriptjqueryhtml

Difficulty with Horizontal Mousewheel Scrolling

Struggling to implement a horizontal scrolling feature (via mousewheel) for both containers in the code below. I want this feature to be easily applied to any future container creations as well. <body> <style> #container { display: flex ...

javascripthtmlcssweb

The Cordova advanced HTTP POST request functionality is not functioning as expected

I'm currently in the process of connecting my backend to a cordova application, and at this early stage of development, I'm attempting to test it in the browser. Unfortunately, I'm facing an issue with the post request not working, as well a ...

androidhtmlnode.jsapicordova

Please refrain from initiating the next action until the previous action has been completed

As a beginner, I am currently working on a photo viewer project using JavaScript and jQuery. My main issue arises when clicking on the arrow to view the next picture. I want the current picture to fade out smoothly before the new one fades in. However, th ...

javascriptjqueryhtmlcsscallback

Issue with dropdown not toggling open when using focus and focusout events

I am facing an issue with two dropdowns having the same class, referred to as "dropdown" in this scenario. I created a fiddle using jQuery to manipulate these dropdowns: $('.dropdown').focus(function () { //Code to manipulate this dropdown }) ...

javascripthtmljqueryjquery-events

Tips on how to remove the first column from a jQuery hover effect

Currently, I have a function that enables hover events on a table. Right now, it excludes the header row but I also need it to exclude the first column. Any suggestions on how to do this? $(".GridViewStyle > tbody > tr:not(:has(table, th))") ...

javascriptjqueryhtml

Utilizing jQuery to add a class to an element when a different one is hovered above

I'm currently working on implementing effects on the edges of a webpage that will be triggered when a central div is hovered over. The main tool I'm using for this task is jQuery. Despite my efforts to diagnose the issue by using alerts in my Ja ...

javascriptjqueryhtmlcss

Tips for Ensuring Consistent Logo Appearance Across Various Browsers

The text I added to a website appears perfectly aligned on Chrome and Explorer, but on Safari, it's positioned below the logo. How can I resolve this issue without affecting the view in other browsers? The desired layout should show as "LOGO | TEXT," ...

htmlcss

Looking to create a centered 'ul' using Bootstrap

I am looking to center the list with a specific width. body { background-color: rgb(26, 40, 114); } h1 { color: white; text-shadow: 7px 7px 10px black; } li { list-style: none; border-radius: 5px; border: 2px solid white; background-colo ...

htmlcsswebbootstrap-4

JavaScript-powered dynamic dropdown form

I need help creating a dynamic drop-down form using JavaScript. The idea is to allow users to select the type of question they want to ask and then provide the necessary information based on their selection. For example, if they choose "Multiple Choice", t ...

javascripthtmlcssformscascadingdropdown

"Encountering a Challenge: Cannot Assign Array to ngFor Directive in Ionic App, Displaying

I have encountered an issue while fetching product categories using API. The problem lies in the fact that the categories are being retrieved as an object instead of an Array which is required for *ngFor to work in Ionic. Any assistance on how to define th ...

htmlangularionic-frameworkionic3

Creating a fixed footer within a div that is absolutely positioned using CSS

I am looking to implement a sticky footer within an absolutely positioned div element. My initial approach was to position the footer div absolutely as well - within an additional relatively positioned "page" div (which would contain the main content of t ...

htmlcss

Applying Tailwind styles to dynamically inserted child nodes within a parent div

Currently, I am in the process of transitioning my website stacktips.com from using Bootstrap to Tailwind CSS. While initially, it seemed like a simple task and I was able to replace all the static HTML with tailwind classes successfully. However, now I ha ...

javascriptcsstailwind-csstailwind-elements

What could be causing my "onChange" function to not work as expected?

export function UpdateData(props){ return( <div> <div className='updateForm'> <form> <div className="form-group"> <label>Your ID:& ...

javascripthtmlreactjs

The color of the letters from the user textbox input changes every second

My task is to create a page where the user enters text into a textbox. When the user clicks the enter button, the text appears below the textbox and each letter changes color every second. I am struggling with referencing this jQuery function $(function() ...

javascripthtmljquery

Utilizing Sessions Across Several PHP Forms

Hey there! I've got a query for you. When you kick off your PHP code with session_start(), do you need to keep adding the prior variables on subsequent form pages? I'm contemplating using the session() function for my GYM Sign UP Webpage. The f ...

phphtmlforms

Extraction of data post logging into the webpage (modem authentication page)

I am currently working on a project that involves extracting data from a specific webpage. However, in order to access the data I need, I first have to log in to the website. After trying out different scripts and searching for solutions online, I managed ...

phphtml