Is there a way to prevent Bootstrap 4's grid system from splitting column content when resizing the browser window?

Just delving into Bootstrap's grid system for the first time here, so bear with me if this sounds silly.

My goal is to create a 3 column page that is responsive, featuring an image and a Spotify player in each column.

Everything looks good on a full window: 3 columns display

and even on a small window: 1 column display

However, when it reduces to 2 columns, the 3rd column's content gets split: 2 columns display

This is the code I have at the moment:

      <div class="container">
        <div class="row">
          <div class="col text-center">
            <img src="images/capa_marrow.jpg" height="300" width="300">
            <iframe src="https://open.spotify.com/embed/album/20zacwBmt9ay2EcAYb8CLc" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
          </div>
          <div class="col text-center">
            <img src="images/capa_difraction.jpg" height="300" width="300">
            <iframe src="https://open.spotify.com/embed/album/4sbQLJP8qPaiQXNqTYAYSp" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
          </div>
          <div class="col text-center">
            <img src="images/capa_chromatic.jpg" height="300" width="300">
            <iframe src="https://open.spotify.com/embed/album/4X9FVjDibj5yWgZYVwOVRj" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
          </div>
        </div>
      </div>

How do I ensure that the image always appears above the Spotify player, even in a 2-column display?

htmlcssbootstrap-4

Answer №1

If you're facing this issue, there are several solutions you can consider. One effective approach would be to utilize flexbox. Simply add d-flex flex-column to each of the col divs.

The reason for this problem is that both iframe and img are set to display: inline by default, which causes them to appear side by side if there's enough space. In scenarios where you have a 3-column or 1-column layout, there might not be enough room to vertically stack the img over the iframe. However, with a 2-column layout, the third column may have ample space to display them side by side.

To further visualize this, try changing your container to container-fluid and widen your screen significantly (beyond the width of your computer screen).

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 is the best way to assign a default value in mat-select when using an ngFor loop?

Is there a different approach to setting a default value in mat-select within an *ngFor loop? I'm having trouble accessing the element in the array from the loop as desired. .ts file: persons: Person[] = .. //consist of Person with name and age .htm ...

htmlangulartypescriptangular-material

Managing the order of rows in Bootstrap specifically for mobile devices

Take a look at this simple HTML snippet on this fiddle that illustrates a specific layout on wide desktop screens: Here is the code responsible for rendering the above layout: <div class="container"> <div class="row"> <div class="col-md-4" ...

htmlcsstwitter-bootstrap

Tips for adding a CSS class to an HTML element on-the-fly

As a newcomer to JavaScript and AngularJS, my question may be considered naive by some. I am currently working on a tutorial project involving AngularJS. Here is the HTML code snippet I am dealing with: <link href="http://netdna.bootstrapcdn.com/boo ...

javascripthtmlcssangularjs

What is the best way to incorporate progressive JPEG images onto a website?

I am currently working on a website called winni.in that is built using Java, Html, and Javascript. I would like to incorporate progressive image rendering upon page load, but I lack the necessary knowledge. I have come across and explored the following re ...

javascriptjqueryhtmlcssjpeg

Adjusting the text color based on the dynamically set background color

If I have a calendar where each entry has a unique background color assigned to it (one color per user), including both light and dark colors that users can choose from, how can I set the text color to match the background style? Where should I begin wit ...

phpjqueryhtmlcss

Tips for presenting a label and its value on separate lines while also displaying additional nested label-value pairs:

I have a specific request in mind, https://i.sstatic.net/aK5nG.png But the result I am seeing is different, https://i.sstatic.net/ajvhF.png Here's the code snippet, I'm utilizing bulma framework but encountering some challenges... <sectio ...

htmlcssbulma

Link PayPal payments to the individual making the payment

On my website, I offer in-game features that can be purchased through a miniature store with PayPal buy now buttons. I'm looking for the best and most secure method to automatically deliver these in-game bonuses to users after they have completed thei ...

phphtmlpaypal

What is the best way to locate an element using text in xpath?

Having an issue with this HTML source code: <td class="specs_title"> Processortype <a href="#" class="info-link"> <img src="x.jpg" title="" height="16" alt="" width="16" /> <span class="info-popup"> <span class="hd">Processor ...

phphtmltextxpathfind

Steps for moving data from a JavaScript variable to a Python file within a Django project

I have created a unique recipe generator website that displays each ingredient as an image within a div. When the div is clicked, it changes color. My goal is to compile the ids of all selected divs into one array when the submit button is clicked. I have ...

javascriptpythonhtmljquerydjango

Experimenting with @media queries to dynamically resize images for various devices such as phones, tablets, and desktop

I'm struggling with making the background images on my website responsive. I have already added media queries to my page, but they seem ineffective and I am unsure of what else to try. Below are the HTML and CSS codes for the three images. Any suggest ...

htmlcssbootstrap-4media-queries

Strange symbols were stored in the database after saving the textarea value

After submitting a form, text entered into a text area is being saved to my database. However, in one instance, certain characters such as • are appearing in the field. For example: • Text When retrieving the data from the database using Jav ...

javascriptjqueryhtmldatabasecharacter-encoding

Are there any tools you rely on for speeding up the process of developing html/css?

Have you heard of zen-coding? It's a script that generates markup based on a css-esque selector like this: div#foo > p*6 This code would generate: <div id="foo"> <p></p> <p></p> <p></p> & ...

htmlcssemmet

Having trouble with Angular's ng-class performance when dealing with a large number of elements in the

I've encountered a performance issue while working on a complex angular page. To demonstrate the problem, I've created a fiddle that can be viewed here. The main cause of the performance problem lies in the ng-class statement which includes a fu ...

javascripthtmlangularjs

Use ng-class in a P tag to assess a variety of expressions

Is there a way to apply ng-class to automatically evaluate negative values within a < p > tag? <p <strong>LW$:</strong> {{d.lw_metric}} <strong>LW:</strong> {{d.lw_metric_percentage}} <strong>L4W:</strong> {{ ...

javascriptcssangularjsng-class

Modify the color of the H1 tag exclusively within specific classes

Struggling with a formatting issue here. I'm looking to customize the colors of h1, h2, h3... when they are inside specific classes. It's mostly working as intended, however, the problem arises when the headings outside of those classes don' ...

htmlcss

Reasons why Custom CSS won't function simultaneously with Bootstrap 5

I recently designed a dashboard using bootstrap 5. While working on this project, I found myself in need of a custom CSS style in addition to the default bootstrap styles. However, I encountered an issue where my custom CSS would not apply properly unles ...

htmljquery-uicss-selectorsbootstrap-modalbootstrap-5

Looking to center the numbers in my ordered list within a border box - any tips on how to achieve this?

I'm attempting to create a numbered order list with a circular border around it. The goal is to have the number of the list item centered within the circular border and the entire circle centered within the paragraph. Currently, both the number and th ...

htmlcss

"Implementing a Modular CSS Approach and Uniform Styling Across Your App

How can we handle the scenario of implementing specific styling for h1 tags within a modular CSS approach? In the past, this would have been achieved through inheritance in a single stylesheet. For example: .h1 { font-size: 3rem; /* more styles */ } .h2 { ...

cssreactjscss-modulesreact-css-modules

Transmitting the User's Geographic Location and IP Address Securely in a Hidden Input Field

I'm looking to enhance my HTML form by retrieving the user's IP address and country when they submit the form. How can I achieve this in a way that hides the information from the user? Are there any specific elements or code additions I need to ...

javascripthtml

JQuery encountered a HTTP 404 error, signaling that the server was unable to locate anything that matched the requested URI

I am currently learning front-end development on my own and encountered an issue with implementing jQuery. You can find all the files for my site here: The problem I am facing is that there should be blog posts displayed between the header and navigation ...

javascriptjqueryhtml