Limit Content to be contained within a Bootstrap Container/Div

How can I shrink the content inside a container without distorting images? When the screen size decreases, all the images and content inside start to lose their alignment and sizes begin to change. I am aware that this may make the content harder to see.

I am currently using Bootstrap 4 with HTML and CSS. The d-flex class is from Bootstrap and no-padding is used to remove padding from default columns.

View in Smaller Size View in Larger Size

<div class="container" style="min-width: 100%;">
                    <div class="row main-stage" id="main-stage" style="justify-content: center;">
                        <div class="col-12 d-flex no-padding text-center justify-content-center" style="background-color: #fff;">
                            <img src="/assets/img/banner/1200x200Banner.png" alt="" class="p-4" style="min-height: 200px;">
                        </div>
                        
                    </div>
                    <div class="row">
                        <div class="col-12 d-flex no-padding">
                            <div class="col-2" style="background-color: #fff;">
                                <img  src="/assets/img/banner/400x160Banner.png" alt=""
                                    style="min-height: 400px; max-height: 400px; min-width: 100%; border-top: solid 10px; border-bottom: solid 10px;">
                            </div>
                            <div class="col-8" style="background-color: #fff;">
                                <div class="row m-4">
                                    <div class="col-12 text-center">
                                        <img src="/assets/img/banner/200x100banner.png" alt="">
                                    </div>
                                </div>
                                <div class="row text-center">
                                    <div class="col-4">
                                        <img src="/assets/img/banner/100x180Banner.png" alt="" >
                                    </div>
                                    <div class="col-4 text-center">
                                        <img src="/assets/img/banner/200x100banner.png" alt="" >
                                    </div>
                                    <div class="col-4">
                                        <img src="/assets/img/banner/100x180Banner.png" alt="">
                                    </div>

                                </div>
                            </div>
                            <div class="col-2" style="background-color: #fff;">
                                <img class="" src="/assets/img/banner/400x160Banner.png" alt=""
                                    style="max-height: 400px; border-top: solid 10px; border-bottom: solid 10px;">
                            </div>

                        </div>
                       
                        

                    </div>

                </div>
htmlcssbootstrap-4

Answer №1

Give this code a try, it's a great solution to your specific request.

Test the code on codeply

Updates

I've made some adjustments to the code as nesting rows and containers is not ideal.

The key change for making a fluid layout is by adding the container-fluid tag at the beginning.

To achieve a smooth transition, be sure to add the "img-fluid" class to images, allowing components to adapt dynamically to different screen sizes.

Additionally, I have implemented flex concepts that were previously unresolved.

Instead of using flex in the code, consider creating an scss styles page to address these issues dynamically. Bootstrap 4 includes flex in its code but there are areas you can optimize using style pages. Check out the detailed explanation on this link

Best of luck!

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

Error encountered in Angular CLI: Attempting to access property 'value' of an undefined variable

I am encountering an issue while trying to retrieve the values of radio buttons and store them in a MySql database. The error message I receive is TypeError: Cannot read property 'value' of undefined. This project involves the use of Angular and ...

javascripthtmlangulartypescriptexpress

Aligning multiple spans vertically within a div of varying height (ui-select-multiple)

I am currently using AngularJS ui-select's Multiselect feature. If you want to see how my multiselect looks, check it out here: http://plnkr.co/edit/zJRUW8STsGlrJ38iVwhI?p=preview When arranging spans in multiple lines, achieving nice vertical align ...

htmlcssvertical-alignmentui-select

Is there a way to rearrange the tabs so that the first tab is at

Is there a way for me to align with the others without being stuck below #first_tab in the code? I'm having trouble figuring it out on this website: Your assistance would be greatly appreciated! Thank you in advance! CSS Code: #first_tab { ...

htmlcss

Determine the total number of active links on an HTML webpage using F#

Currently, I am working on developing a basic F# function that will be able to count the total number of links present in a given HTML website URL. I understand that this can potentially be achieved by counting the occurrences of the "<a" substrings, b ...

htmlwebweb-scrapingf#substring

"The Zorro table is filled with items of various types, although unfortunately, the Intellisense is not as accurate as it

Imagine a scenario where you have a basic table set up: <nz-table #table [nzData]="users"> <thead> <tr> <th>Id</th> <th>First Name</th> <th>Last Name</th> </tr> ...

htmlangulardatatableng-zorro-antd

What is the best way to code an HTML block with jQuery?

Could someone guide me on creating the following using jQuery: <div class="card"> <img src="images/cat6.jpg" alt="Avatar" style="width:100%"> <div class="container"> <h4><b>John Watson</b></h4> ...

jqueryhtml

Guide on incorporating the Chain Pattern alongside the Self Revealing Module Pattern within JavaScript

I have come across the following code snippet: filtersManager = (function ($) { var that = this; function initialize() { // some tasks return that; }; function execute() { // some tasks return that; ...

javascriptjqueryhtmlmodule-pattern

The text on the menu is not adjusting properly for small screens

Check out the jsFiddle link. The issue arises when the Result screen is set to the width of a mobile's screen. Instead of wrapping the text, it gets replaced by dots and cannot be scrolled to view the full content. Here is the code snippet: <a hr ...

jquerycssjquery-mobileoverflow

Insider's guide to showcasing code in vibrant colors using Python Django

Context: I am currently working on a Python Django web application and need to showcase code snippets in the browser with syntax highlighting. An example of the code snippet I want to display would be: if True: print("Hello World") I am look ...

pythonhtmlcssdjangocolors

A guide on traversing through nested HTML divs using jQuery

I am facing an issue with nested HTML div elements on my website. The data is being fetched from a JSON file and stored in a variable. For example, the 'obj' variable contains an array of objects with properties such as Name, Progress, Descripti ...

javascriptjqueryhtmlcss

Pick Control - Utilize jQuery to display options that haven't been chosen before

Seeking assistance with a table view that includes a button for dynamically adding new rows. Each row contains a select control. Using Select2 for styling purposes. How can I ensure that when adding a new row, the select options only display those not prev ...

javascriptjqueryhtml

The 8 x 8 grid I am constructing is functional, however, the issue lies in the fact that the first line only begins with a single # symbol

I am attempting to create an 8 x 8 grid. It's coming together, but the issue is that the first line only starts with one # sign. function print(msg) { console.log(msg); return msg; } let result = ""; for(let i=1; i<=8; i++) { result += ...

javascripthtmlcss

Align pictures in the middle of two divisions within a segment

This is the current code: HTML: <section class="sponsorSection"> <div class="sponsorImageRow"> <div class="sponsorImageColumn"> <img src="img/kvadrat_logo.png" class="sponsorpicture1"/> </div& ...

javascripthtmlcss

Manipulating text alignment and positioning in CSS

Can someone help me achieve this CSS result? img1 This is what I have so far: img2 I'm struggling to center the elements and add a line in CSS. Any advice? I thought about using margin: auto, but I'm not sure if that's the best approach ...

css

The ckeditor vanishes upon refreshing the div element

I have created two pages named openclosediv.php and content.php. The openclosediv.php page contains a list of records and a button that can show/hide the div, bringing in the content from content.php. However, I am facing an issue where the CKEditor in the ...

phpjavascriptjqueryhtmlckeditor

The setStyle() method in JavaFX is like CSS Selectors

Is it possible to bind CSS files to style JavaFX components and also change properties dynamically in code? I'm struggling with the setStyle() method as there's limited documentation available on how to use it effectively. Instead of modifying t ...

csslistviewjavafxstyling

Creating divs that adapt to different screen sizes without relying on flexbox

Currently, I am in the process of developing a chat interface where the viewport height is set to 100vh. The layout consists of a header/navbar, a "main content" section, and a footer housing the input field (you can view the code here) The way I have str ...

javascriptjqueryhtmlcssresponsive-design

The application of styling to a CSS class is unsuccessful when the class is dynamically added through Angular

My goal is to create a header that moves with the page and stays fixed once it reaches the top. I am using Angular and came across a solution on Stack Overflow which suggested binding a class toggle to the window scroll event to achieve this effect by addi ...

htmlcssangularjs

Using CSS to automatically convert a table into one column layout with labels from the thead section

Is it possible to automatically create the labels for data when converting a multi-columns table into one column using CSS and taking the information from the thead section? This resource discusses how to convert a multi-column table into a single column ...

htmlcss

Is a table cell's border considered as part of its content?

A discrepancy is observed in the rendering of a document on Firefox and Chrome browsers: <!DOCTYPE html> <html> <head> <title>Testing table rendering</title> <style> table { ...

htmlcssgoogle-chromefirefox