Is it possible to utilize bootstrap sizing by considering the size of the containing div?

Setting the Scene

Imagine a scenario where two divs are placed side by side.

  • div1: 500px wide
  • div2: taking up the remaining width

The goal is to make the items in div2 responsive using Bootstrap so that classes like mt-sm-3 can be utilized for different screen sizes (xs, sm, lg, xl), adjusting the margin top accordingly.

However, it's important that the responsiveness is based on the width of the parent div rather than the browser window width.

The Burning Question

Can this be achieved with Bootstrap? If yes, how?

Pondering Options

  1. Create custom classes for div2 using JavaScript to dynamically add custom-[xs,sm,lg,xl] based on size. This workaround seems cumbersome and goes against the simplicity of using a popular CSS framework like Bootstrap.
  2. Insert an iframe within div2 containing Bootstrap styles. However, this solution may complicate matters for projects involving React/Redux.
cssbootstrap-4

Answer №1

Here is an example of the suggested structure:

<div class="d-flex">
    <div style="width:500px;"></div>
    <div class="w-100"></div>
</div>

Answer №2

In the end, I created my own unique solution. This solution involves constantly monitoring the size of the target div every 100ms and then assigning it a specific size category such as xs, sm, md, lg, or xl. It can also be customized to work with other sizing metrics. You can find some examples of this in my basic index.html file.

Check out my code on GitHub

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 container's :before pseudo-element features a sleek white border

I have been experimenting with using the :before and :after pseudo-elements to generate diagonal lines within a container. However, I am encountering an issue where these pseudo-elements appear to have a white bottom border, and I am unable to determine t ...

htmlcsslineselementdiagonal

Two adjacent div tags spanning the full width of the page, with differing widths (40% and 60%) that resize to 100% width and stack on top of each

I've been experimenting with a layout challenge and running into some obstacles. Two div tags are at the heart of the issue. Div A features an image with a default size of 768 x 400, while Div B displays an image at 1152 x 400. These images are meant ...

htmlcsscenter

Is it possible to have a hover box with no spacing in between?

I am currently designing a navigation bar and I want to implement a feature where hovering over each link will display the box/background color without any space in between of Home, About Us, etc. For reference, you can check out this example here: http:/ ...

htmlcsshovernavigationbar

Steps for Implementing a "Load More" Button on an HTML JSON Page

I'm currently engaged in a project that involves fetching product information from a JSON file and displaying it on an HTML page using JavaScript. While I've successfully implemented the fetch function, I now want to add a "Load More" function/bu ...

javascripthtmlcssjson

When the sidebar is set to position: fixed, the icons magically vanish

This CSS is specifically for the side navigation bar. .side-nav { // position: sticky; top: 0; left: 0; height: 100vh; z-index: 100; width: calc(3.5vw + 3.5vh); // position: fixed; &.content { height: 100%; display: flex; fl ...

csssass

Is the 3D cube spinning with a slight perspective glitch?

I've successfully created a spinning cube using html and css. However, I'm facing an issue where pressing the up and down arrow keys causes the cube to rotate in a larger space rather than around its center. I've attempted using margin: 0 a ...

htmlcss3d

Tips for Fixing CSS Issues

My HTML / CSS project on JS Fiddle is encountering a few issues jsfiddle ZyBZT. The footer with the class "footer" is not displaying at the bottom of the page. The background image specified by url('http://i.imgur.com/z5vCh.png') is not showing ...

htmlcss

Implementing MVC3 Razor Stylesheet within a designated section

I am currently working with MVC3 using Razor. I have set up my website with a standard structure, including a small backend section. Within this backend area, I would like to create a folder specifically for storing "content" such as stylesheets and JavaSc ...

cssasp.net-mvc-3razor

What is the best way to align the middle item of a flexbox using CSS?

I am attempting to present text divided into 3 divs - the middle div contains the highlighted portion of the text, while the first and last divs contain the text before and after the highlighted section. Both the first and last flex items have classes tha ...

cssflexboxoverflowbootstrap-5

The dropdown menu is currently activated, but not the individual items within it

Is there a way to make the dropdown menu active when I click on an item, specifically making the word Services active? How can this be achieved? <nav class="navbar navbar-light navbar-expand-xl"> <a class="navbar-brand" hre ...

htmlbootstrap-4dropdown

Is there a way to enable ad-block plugins to effectively hide an entire div from visitors, preventing the website from appearing incomplete?

I have set up a div element specifically for ads, giving it some padding and a border to make it stand out. Surprisingly, this approach is not counter-productive. However, considering the percentage of users who use adblock, I am concerned that they will ...

csshtmladsadblock

How to troubleshoot Javascript code that fails to identify if a color is white

What could be causing my code to malfunction? I am attempting to determine if the paragraph text color is white (as determined by CSS settings). If it is indeed white, I want to change it to black for better visibility. function adjustColor() { if (d ...

javascripthtmlcss

Collapsed Grid System

Is it possible to create a CSS grid system that meets the following requirements: The grid should have arbitrary height (with consistent width) and when a grid overflows, it should stack vertically underneath the preceding grid, regardless of other grid ...

htmlcsscss-grid

Issue with strange symbols appearing in Safari on Mac

Hey there! I have this website built with asp.net and I have a text-box for filling in quantities. Sometimes, I notice this strange icon that looks like a human appearing on the text box. It only seems to show up when using Mac Safari browser. Check out th ...

jqueryasp.nettwitter-bootstrapcsssafari

Click on a thumbnail to open the gallery

I am currently working on implementing a feature that will allow a gallery to open when a thumbnail is clicked. At the moment, the code I have looks like this: <div class="row"> <div class="col-lg-12"> <h1 class="page-h ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to ensure that images on a webpage adjust to a maximum width without distorting smaller images?

I'm working on my website blog and I need to create a specific area for images at the top of my articles. I want these images to have a maximum width so they don't exceed a certain size, but I also want smaller images to remain unaffected. Curren ...

phphtmlcssimage

Bootstrap 4 - Content positioned on the left side of the screen next to an image ... on mobile devices, the text appears below

How can I ensure in Bootstrap 4 (and possibly other versions) that the text appears to the left of the image on the screen, and that the image is displayed above the text on smartphones? Here is my source code: <div class="container"> <div cla ...

htmlcsswebbootstrap-4media-queries

How to use Bootstrap to center an SVG or div in the middle of the page

I've been struggling to center this box for a week now, but no matter what I try, it keeps ending up on the center left. I attempted to use CSS to position it absolutely, but that ended up messing with the responsive design. Here is my HTML: <body ...

htmlbootstrap-4

Protractor's isDisplayed method may return a false value for an element that is actually visible

UPDATE #4: Eureka!! I made a breakthrough by recursively navigating through the parent nodes and returning the same values as shown below. Surprisingly, one of the parent nodes - the inner mat-drawer-container - also returned false for isDisplayed, while ...

javascripthtmlcssprotractor

Error: When attempting to read the 'fn' property of an undefined object, a TypeError was caught at line 68 in util.js and line 6 in bootstrap.min

I am facing a problem with my application. Whenever I run it, I encounter this error on my console: Uncaught TypeError: Cannot read property 'fn' of undefined at util.js:68 at util.js:10 at bootstrap.min.js:6 at bootstrap.min.js: ...

asp.net-mvcasp.net-mvc-4bootstrap-4