Fluidity of Containers on Mobile Devices

I currently have a list structured like this:

https://i.sstatic.net/ei4Xt.png

In order to display more details about each list item, I've added a hidden div that can be toggled open like so:

https://i.sstatic.net/61k5Z.png

While this works fine on larger screens, on mobile devices the info div ends up being pushed far below. Is there a way to make the info div expand to 100% width (similar to a Container-Fluid) underneath the item on mobile, like in this example:

https://i.sstatic.net/NaMwU.png

If this is achievable, what are the necessary keywords or could you provide an example? Thank you in advance.

htmltwitter-bootstrapcssbootstrap-4

Answer №1

In my demonstration, I have set up a scenario where you will be required to establish two locations containing identical div contents - one designated for mobile devices (.mobile-content) and the other for desktops (.desktop-content).

The method of formatting involves ensuring that when the mobile version is visible, the desktop equivalent remains hidden, and vice versa. To toggle element visibility, you can utilize Bootstrap 4 classes like .d-x-none and .d-x-block.

All that remains is incorporating the clicking functionality when interacting with the circles......

For instance (best viewed in full-page mode):

.main-box {
 text-align: center;
}

.circle{
  flex-basis: 33%;
}

.circle img{
  background: pink;
  border-radius: 50%;
  max-width: 100%;
}

.mobile-content{
  flex-basis: 100%;

}

.desktop-content{
  text-align: center;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<div class="main-box container-fluid d-flex justify-content-center flex-wrap flex-lg-nowrap">
  
  <div class="circle px-2"><img src="https://dummyimage.com/200x200/4d204d/ffffff" /></div>
  <div class="circle px-2"><img src="https://dummyimage.com/200x200/4d204d/ffffff" /></div>
  <div class="circle px-2"><img src="https://dummyimage.com/200x200/4d204d/ffffff" /></div>
  <div class="mobile-content p-2 d-lg-none">
    <p>description goes here</p>
  </div>
  <div class="circle px-2"><img src="https://dummyimage.com/200x200/4d204d/ffffff" /></div>
  <div class="circle px-2"><img src="https://dummyimage.com/200x200/4d204d/ffffff" /></div>
  
</div>


 <div class="desktop-content p-4 d-none d-lg-block">
    <p>description goes here</p>
  </div>

Answer №2

To achieve equal columns in all devices using Bootstrap 4, follow this structure:

<div class="row">
<div class="col">
      1 of n
    </div>
    <div class="col">
      1 of n
    </div>
    <div class="col">
      1 of n
    </div>
       .....
      <div class="col">
      n of n
    </div>
</div>

#circle {
width: 50px;
height: 50px;
background: red;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
        <div class="col" id="circle">
          
        </div>
        <div class="col" id="circle">
          
        </div>
         <div class="col" id="circle">
          
        </div>
         <div class="col" id="circle">
          
        </div>
         <div class="col" id="circle">
          
        </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

Issue with "unterminated <a> tag"?

Can someone please explain to me why I am getting an error message stating that "the <a> tag was not closed before the </h1> tag" in the code snippet below? <a href="http://sap/univertical/mysite5/default.htm"><span class="style4"> ...

htmlexpression

javascriptif the number is a whole number and evenly divisible

I am currently developing a script that tracks the distance traveled by some dogs in meters. It is basically just a gif running in a loop. What I want to achieve now is to display an image every 50 meters for a duration of 3 seconds. Here's my attempt ...

javascripthtml

Aligning container divs at the center in various screen resolutions

I recently constructed a portfolio website using Bootstrap and Isotope JS. In my layout, I have a container div which works perfectly when viewed on a desktop browser - displaying 3 divs in one line. However, the issue arises when the resolution changes an ...

javascripthtmlcsstwitter-bootstrapjquery-isotope

I am looking for a way to batch upload several images from an HTML page to a nodejs server, where I can then rename and

Exploring the world of nodejs, I am seeking guidance on updating multiple images from HTML to node js. Specifically, how can I rename each image differently and save them to a directory? Alternatively, is there another solution that would better suit my ne ...

htmlnode.js

Adding elements to a roster

Can anyone assist me with appending data from a csv file to an unordered HTML list? The csv file I have contains both single and grouped data for the list, as seen below: Test Group Name A,Test Link Name 1,Test URL 1 Test Group Name A,Test Link Name 2,Tes ...

javascriptjqueryhtml

Guide to positioning an anchor tag in the middle of a container, ensuring the anchor fills the entire space of the container

I'm currently working on making an anchor element expand to cover 100% of its parent element, allowing the entire area to be clickable while also centering the text both vertically and horizontally within the parent. I need some guidance on what CSS c ...

htmlcss

"Delve into the art of utilizing negative space between elements with

Looking to implement hover detection between rows in a grid container, rather than on individual items. The number of items in the container and per row may vary. https://i.sstatic.net/yBgKI.png It's important to note that the item count in the cont ...

javascriptjqueryhtmlcsshover

Tips for implementing validation in JavaScript

I'm brand new to learning Javascript. Recently, I created a template for a login page and it's working perfectly fine. However, I am struggling with setting up validation and navigation. My goal is to redirect the user to another page if their us ...

javascripthtmlauthentication

How deep can nesting go within a CSS rule?

When working with stylesheets, the majority of CSS rules follow a structured format: selector { property_1 : value_1; . . . property_n : value_n; } Each selector typically has only one {} block attached to it (without any sub {} blocks ...

csssyntax

Guide on creating a div container that spans the full width of the HTML page with a horizontal scrollbar

I'm facing an issue where the div container is not extending over the entire HTML page with a horizontal scroll bar. Here's a visual representation of my problem: Image Despite using MathJax to display math formulas, the div container does not ...

htmlcssscrollbarcontainersmathjax

The issue of duplicate CSS arising during the compilation of SASS into a single CSS file with G

Just getting started with Stack Overflow and Gulp (using version 3.9.1). My goal is to compile all of my scss files into a single css file for my website. Here's what I have in my gulpfile so far: var gulp = require('gulp'); var sass = requ ...

csssassgulpgulp-sassgulp-concat

Changing the Div heights in Material UI with grid layout customization

I have a project that requires me to implement material-ui. Is there a way I can adjust the width and height of the div containing the "Sign In With" text (as shown in the first image) to bring the buttons closer to the text? Transformation from this: ht ...

javascriptcssreactjsmaterial-uistyled-components

downloading responsive design

Using media queries to define backgrounds with separate images based on browser size: @media (min-width:1440px){div.container{background:URL('bg1440.png');}} @media (min-width:960px){div.container{background:URL('bg960.png');}} @media ...

htmlcssmedia-queries

Unable to access accounts due to malfunctioning login feature in PHP

Hey there, I'm facing a bit of an issue with this code. It works perfectly on my local WAMP server, but when I uploaded it to a GoDaddy-hosted server, it stopped working. Surprisingly, it worked on another server from a different hosting company. I&ap ...

phphtmlauthenticationserver

After my data rows are filled, I add jQuery and CSS striping animations to enhance their appearance

Before any click, they have this appearance: Clicking on Sales in the business section reveals a drop-down select box. If I click on "Sales" and modify the text area, it will transition to grey. While the grey rows change accordingly, the black rows shoul ...

jquerycssjquery-animate

Ways to incorporate an image into an SVG file

This SVG image that I have created presents a unique design. <svg width="250px" height="250px" viewBox="0 0 250 250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <def> </def ...

htmlcsssvg

Utilizing absolute positioning with a rotated div element

The situation I am facing involves a parent div and child div. The child div is positioned absolutely with respect to the parent div and has been rotated by an angle of 90 degrees. Due to the fact that the origin is located at the center of the child div ( ...

javascriptjquerycssgeometrytransform

Issue with the background opacity not being properly applied at the bottom of the div

One challenge I am facing is creating a clickable image with text at the bottom and a semi-transparent background behind it, which is a common design element on many websites. I have everything working except for a small portion of the image showing below ...

htmlcssopacity

Ways to trigger javascript following each ajax or complete request

I have a jQuery function that attaches a click event to specific elements, as shown below. $(".alert-message .close").click(function(e) { $(this).parent().fadeTo(200, 0, function() { $(this).slideUp(300); }); e.preventDefault(); }) ...

javascriptjqueryasp.nettwitter-bootstrap

Monitor the incoming POST request

Is there a way to monitor incoming post requests in a form? I have the following form: <form method='post'> <input type='text' name'test' /> <input type='submit' name'submit' /> </for ...

phphtmlforms