Expansive picture within a Bootstrap container

How can I create a wide image within a Bootstrap container? 

<div class="container-fluid">
    <div class="container">
        <img data-layout="wide" src="big-image.jpg" alt="Big image" class="embedded_image">
    </div>
</div>

I want the image to extend out of the container, from right to left. Unfortunately, I cannot add an extra class to the source image, so I need to achieve this effect using CSS on 

.embedded_image[data-layout="wide"]

I attempted the following CSS code:

margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
max-width: 1000%;
width: auto;
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

It is not recommended to nest Bootstrap containers, as it is considered bad practice and often unnecessary for achieving your desired page layout.

However, if you prefer to keep the containers as they are, here is a solution. To center an image within a container, you can enclose it in a parent div and apply justify-content: center to the parent element. Additionally, you may set the maximum width of the image to ensure it does not exceed the width of the container-fluid. Using object-fit: contain will maintain the aspect ratio of the image.

Please note that I have highlighted the containers with colored outlines for visual demonstration purposes.

.container-fluid {
  outline: solid blue 2px;
}

.container {
  outline: solid red 2px;
}

.image-container {
  display: flex;
  justify-content: center;
}

.embedded_image[data-layout="wide"] {
  object-fit: contain;
  max-width: 97vw;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container-fluid">
    <div class="container">
      <div class="image-container">
        <img data-layout="wide" src="https://place-hold.it/700x100/666" alt="Big image" class="embedded_image">
      </div>
      <br/>
      <div class="image-container">
        <img data-layout="wide" src="https://place-hold.it/300x100/666" alt="Big image" class="embedded_image">
      </div>
      <br/>
      <div class="image-container">
        <img data-layout="wide" src="https://place-hold.it/900x100/666" alt="Big image" class="embedded_image">
      </div>
    </div>
</div>

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

What are some ways to modify a Vue template without the need to recompile?

Is it feasible to modify a Vue template's HTML without the necessity of recompiling the Vue file? ...

htmlvue.jscompilation

Update the content of the document element by assigning it a lengthy string

I'm utilizing JQuery to dynamically assign content to a div element. The content has numerous lines with specific spacing, so this is the approach I am taking: document.getElementById('body').innerHTML = "Front-End Developer: A <br/> ...

javascriptjqueryhtmlinnerhtml

Connecting a secret parameter to a designated radio option within a form (PHP/MySQL/HTML)

I am currently building a PHP form that connects to a MySQL database. Each question in the form requires a simple yes or no answer. The challenge I'm facing is with submitting a hidden value when the user selects 'No' for a question. This ...

phphtmlmysqlforms

Issue with loading Glyphicons from Bootstrap in Laravel Mix

After creating a new Laravel application and adding the auth template, I attempted to include a button with the following code: <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-stop" aria-hidden="true"> ...

phptwitter-bootstraplaravelnpmglyphicons

Creating an interactive webpage with Javascript and HTML

I'm facing a challenge with my component setup, which is structured as follows: import { Component, VERSION } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ ...

javascripthtmlangular

I'm having trouble with the colors not displaying correctly on my NextJS Tailwind navbar

I've encountered an issue with my navbar where none of the specified colors are being displayed. The code snippet for the navbar is as follows: Codes: 'use client' import Head from 'next/head'; import Link from 'next/link&apo ...

javascriptcssreactjsnext.jstailwind-css

Issues with HTML text areas tags not being recognized after submitting a form occur specifically in Internet Explorer

I am encountering an issue with my form. I have a textarea field within the form, and on submit, I am trying to copy the content of a div containing a table into this textarea field. However, when I send this form and the email in IE, the values appear as ...

phpjqueryhtmlforms

Ways to create two distinct "on click" actions for a single image to execute two distinct tasks

Clicking on an image will open a slider showing all images before filtering. Once filtered, only the selected images will be displayed in the slider. <div class="gallery row" id="gallery" style="margin:0;"> <!-- Grid column --> <div ...

javascripthtmlcss

Discover automatically generated titles for dynamic hyperlinks

I am looking to generate dynamic links for a collection of documents with varying names, such as Test, Test2, and so on. I want the link text to display as "Document TestN," where N is the specific document number. Currently, I am able to create the links ...

javascriptjqueryhtml

Creating a dynamic image slider that smoothly glides across a webpage

I've been working on a carousel (image slider) for my website and I need some help. Specifically, I want to reposition the entire slider slightly to the left on the webpage. You can see the slider in action on this site: and I also created a jsfiddle ...

javascriptjqueryhtmlcsstwitter-bootstrap

The combination of Chromium, raw HTML pulled directly from a C# string, and Angular leads to issues when trying to implement routing

CefSharp: 1.25.0 (Chromium 25.0.1364.152-based) Angular: 1.3.0-beta16 UIRouter: 0.2.10 Currently, I am in the process of creating a C# application that will function as a standalone program using CefSharp Chromium, Angular, and UIRouter for the graphical ...

htmlangularjsrouteslocationchromium

What is the proper way to select the <ul> element within an FTL template?

Can someone provide guidance on how to target a <ul> container within a freemarker template using JavaScript? My goal is to display the content of this specific <ul> element in my FreeMarker template on the web page. Any suggestions on how I ...

javascriptcssfreemarker

Creating uniform-sized flex items with varying image sizes

When setting flex: 1 1 0 on flex items, it does not work as expected especially when the flex items contain images of varying sizes. In this scenario, the flex-item containing the image ends up becoming significantly wider than the others. Below is the H ...

htmlcssflexbox

Issue with vertical cell alignment in MUI x-data-grid persists following the latest update to version 7.2.0

After updating my MUI app to the latest npm packages version, specifically upgrading x-data-grid from 5.17.9 to 7.2.0, I encountered an issue. In my application, I utilize a grid where certain columns are populated using the renderCell property: const cel ...

cssreactjstypescriptmaterial-ui

Is it possible to connect to standard Bluetooth devices using the Chrome Bluetooth API on a webpage? (excluding BLE)

Currently, I am conducting research on how to establish connections with Bluetooth devices through a web page. My goal is for the webpage to display a list of paired devices and be able to connect to them (specifically bluetooth printers). While I have com ...

google-chromebluetoothhtml

Retrieving specific HTML data without the need to download the entire webpage

Is there a way to extract data from an HTML table on a webpage without downloading the entire HTML content? In my Delphi XE2 application, I am using TWebBrowser and TEmbeddedWB to load the webpage and then parse the Table element. However, due to the heav ...

htmldelphibrowserextractindy

Tips for referencing Google Maps initialization in individual files within a website application

After setting up my Google Maps API snippet: <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script> in the index.html file, I encountered the error: Uncaught InvalidValueEr ...

javascripthtmlangularjsgoogle-mapsgoogle-maps-api-3

Drop the prohibited cursor before dragging

https://i.sstatic.net/WIBWr.jpg Is there a way to change the cursor behavior during element drag using HTML5 default drag and drop with TypeScript? I have tried various methods like changing from ev.target.style.cursor to "grab" cursor, adjusting dropEffe ...

htmlangulardrag-and-dropdrag

When the mouse leaves, the input search will automatically change the text color to black

I'm having trouble developing a search input, as I am facing an issue and unable to find a solution. Currently, the search input is working fine; when I click on it, it expands. However, once expanded and I start typing, the text color turns white wh ...

htmlcss

How can I effectively showcase the content of a text file in HTML using Flask/Python?

Let's discuss the process of displaying large text/log files in HTML. There are various methods available, but for scalability purposes, I propose taking a log file containing space-separated data and converting it into an HTML table format. Here is ...

pythonhtmlflaskjinja2