Issues with Bootstrap's "img-fluid" class functionality

I recently started the web development course by Colt Steele and ran into an issue while working on the "Museum of Candy project" (I made some modifications to it). The problem is that I am using a widescreen monitor, and when I expand my window, the image fails to cover the entire column even though I have specified the class as img-fluid. I expected the image to scale and cover the column completely. Is there anything I can do to correct this?

body {
  background-color: lightblue;
  font-family: Roboto, sans-serif;
}

.navbar-brand {
  font-size: 1.7rem;
  color: darkblue;
  font-weight: 600;
}

.nav-link {
  letter-spacing: 1.5px;
  font-size: 1.2rem;
  transition: font-size .2s;
}

.nav-link:hover {
  color: darkblue;
  font-size: 1.3rem;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="60020f0f14131412011020554e524e51">[email protected]</a>/dist/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

<nav class="navbar navbar-expand-md ">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">MUSEUM OF AIRPLANES</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon navbar-dark" ></span>
          </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" aria-current="page" href="#">HOME</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">ABOUT</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">TICKETS</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<section class="container-fluid px-0">
  <div class="row align-items-center">
    <div class="col-md-6">
      <h2 class="text-center">MUSEUM OF AIRPLANES</h2>
    </div>
    <div class="col-md-6"><img class="img-fluid mr-0" src="https://www.heraldweekly.com/wp-content/uploads/2021/10/138756/450px-Short_Skyvan_SC.7_G-BEOL_arrives_at_RIAT_Fairford_12July2018_arp.jpg.pro-cmg.jpg" alt="airplanepicture"></div>

  </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfbcb0adba9fedf1eeeef1e9">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ccaea3a3b8bfb8beadbc8cf9e2fee2fd">[email protected]</a>/dist/js/bootstrap.min.jst" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

javascripthtmlcssimagebootstrap-5

Answer №1

img-fluid is a bootstrap class that applies max-width:100% to an image, ensuring it doesn't exceed its original dimensions. For instance, with the image size being 800x548 in your example, if the image container is wider than the actual image, it will not stretch to fill up the entire space.

Answer №2

Furthermore, building on Cédric's response, I'd like to mention that you have the option of using the class w-100 (which applies width: 100%;) instead of img-fluid to attain your desired outcome.

body {
  background-color: lightblue;
  font-family: Roboto, sans-serif;
}

.navbar-brand {
  font-size: 1.7rem;
  color: darkblue;
  font-weight: 600;
}

.nav-link {
  letter-spacing: 1.5px;
  font-size: 1.2rem;
  transition: font-size .2s;
}

.nav-link:hover {
  color: darkblue;
  font-size: 1.3rem;
}
<!DOCTYPE html>
...

</html>

Answer №3

To achieve the desired result, simply set the margin-0 and padding-0 (m-0, p-0) on the parent container of the image.

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

Is it possible to select options in AngularJS based on certain criteria?

I created an AngularJS select menu that is currently functioning correctly: <select name="s1" id="s1" multiple="multiple" data-native-menu="false" data-role="none" ng-model="userlistSelect" ng-options="u.userId as u.fi ...

javascriptangularjs

Utilizing two distinct CSS frameworks within a single Rails application

At the moment, I have an application with its frontend built using Bootstrap 3 (leveraging the bootstrap-rails gem). Now, I am looking to incorporate the Materialize.css framework into the same app. After downloading the Materialize.css stylesheet, my conc ...

htmlcssruby-on-railstwitter-bootstrapasset-pipeline

What is the process for removing items from an array in JavaScript that share the same values?

If you have an array of objects structured like the following: "medios":[ { "Key":"1", "Text":"Cheque" }, { "Key":"2", "Text":"Tarjeta de Crédito" }, { "Key":"3", ...

javascriptarraysobject

Can HTML5 and JavaScript be used to clip a portion of a video and upload it directly to a server?

Currently, I am using Filereader to read a local video file (mp4) in order to display it in a video tag. However, I am looking to cut a specific part of the mp4 file (for example, from 5 to 10 seconds) and then upload it to a server. My current approach: ...

javascripthtmlvideoblobfilereader

The malfunctioning of my Ajax functionality is causing issues

Today, I delved into the world of Ajax. I took the time to practice and follow step-by-step instructions on how to use AJAX, but unfortunately, I encountered an issue. I couldn't pinpoint the problem as there were no warnings displayed in the console. ...

javascriptajax

Using absolute elements within a div that is positioned relative in HTML code

In the layout below: <div style="margin-top:0%" class="postcell"> <div id="postspantitle" > <span class="texts"><?php echo __('Başlık :', 'goldmem');?></span> </div> & ...

html

Is there a way to automatically populate an AngularJS input field?

Attempting to automate filling out a website using JavaScript. The script below: document.getElementsByClassName('form-control')[1].value = "MYNAME"; The input text changes, but upon clicking the submit button it displays as empty. Any as ...

javascriptangularjs

Guidance on calling a JavaScript function from a dynamically added control

The Master page includes a ScriptManager. Next, I have a Control with a ScriptManagerProxy and an UpdatePanel. Within the UpdatePanel, I dynamically insert another Control (which also has a ScriptManagerProxy) that needs to run some JavaScript code. In ...

c#javascriptjqueryasp.netscriptmanager

Troubleshooting Bootstrap's Margin Problem

Currently, I am delving into the basics of bootstrap and encountering some challenges with using margin-auto. Specifically, I am working on positioning a navbar by using ml-auto to separate it from the brand, pushing the navbar to the right side of the p ...

htmlcsstwitter-bootstrap

Is there a way to create a table that has varying columns for each row?

I am currently working with bootstrap4 and I am trying to create a table that has 3 columns in the first row and 4 columns in the following two rows. I want it to look like this: https://i.sstatic.net/nuI55.png Here is my existing table: <link href ...

htmlcssbootstrap-4html-table

Click to expand for answers to commonly asked questions

Having trouble setting up a FAQs page on my blog and can't seem to get the code right. Check out what I'm trying to do here: http://jsfiddle.net/qwL33/ Everything seems fine but when I click on the first question, both questions open up. Can som ...

javascripttoggleslidedowntoggleclass

What is the best way to access and verify data from an array that has been passed through props

I am working with a component that takes an array as a prop <Component runners={['1','2']}/> Inside this functional component, my goal is to generate an element for each value in the array. Here's my logic: const { runners ...

javascriptarraysreactjsobject

Tips for applying/styling "All Items Center" and "Space Between Items" in CSS and ReactJS

justify-content: space-evenly; seems to be working correctly, but the desired output is not achieved I am aiming for something like this: https://i.stack.imgur.com/iQoWK.png However, this is what I currently have: https://i.stack.imgur.com/1PxGR.png ...

cssreactjsflexboxjsx

What is the best way to update auto margins after resizing an element with Javascript?

I'm having an issue with a DIV on my webpage that is centered using margin-left and margin-right set to auto. When I try to resize the DIV, it no longer stays centered on the screen. <div id="content" style="margin-left:auto;margin-right:auto;widt ...

javascriptjquerycss

What causes MySQL connection to drop unexpectedly in a Node.js environment?

Currently, I am working on developing a Facebook chatbot using Node.js and have implemented a MySQL Database to store data. Everything seems to be working fine, but I have come across a query - should I be closing the database connection? I attempted to c ...

javascriptmysqlnode.js

Challenges with the direction of Telerik's GridNumericColumn

Currently, I have implemented a telerik RadGrid with the direction set to RTL. Within this grid, there is a telerik GridNumericColumn which is causing an issue. The problem lies in the way it displays numbers: 500- instead of -500 I am seeking adv ...

c#asp.nethtmlcsstelerik

Tips for detecting the existence of a different class within a div/ul through jquery or javascript?

This is how I have my unordered list, or "ul" element, styled. As you can observe, there are two classes defined for the ul <ul class="nav-second-level collapse"> </ul> There might be an additional class added to the same ul like so: <u ...

javascriptjqueryhtml

Decals in Three.js

Is it possible to apply a decal to a 3D OBJ model using three.js? var loader = new THREE.OBJMTLLoader(); loader.addEventListener( 'load', function ( event ) { object = event.content; scene.add(object); ...

javascript3dthree.jsdecal

A guide on incorporating unique font weights into Material UI

Looking to customize the Material theme by incorporating my own font and adjusting the font weights/sizes for the Typography components. I am attempting to set 100/200/300/400/500/600/700 as options for each specific typography variant, but it seems that o ...

javascriptreactjstypescriptmaterial-ui

Select various items simultaneously by pressing Ctrl and access them via form submission

Currently, I have a form with a list of days displayed. When a user clicks on a day, jQuery is used to populate a hidden field with the selected value. This allows me to reference the value in the post array. I now want to enhance this functionality by en ...

javascriptjqueryformspost