Creating a responsive layout using CSS in a Bootstrap grid that automatically adjusts column sizes for different screen sizes - whether it's

What is the best way to adjust the md, xl, etc usage mix in the col class of Bootstrap in order to achieve the following responsive folding behavior?

Wide screen:

+---+---+----+----+
| A | B | C  | D  |
+---+---+----+----+
| 1 | 2 | 3  | 4  |
+---+---+----+----+
| a | b | c  | d  |
+---+---+----+----+

Narrower screen:

+----+----+
| A  | B  |
+----+----+
| 1  | 2  |
+----+----+
| a  | b  |
+----+----+
| C  | D  |
+----+----+
| 3  | 4  |
+----+----+
| c  | d  |
+----+----+

Smallest mobile screen:

+-----+
| A   |
+-----+
| 1   |
+-----+
| a   |
+-----+
| B   |
+-----+
| 2   |
+-----+
| b   |
+-----+
| C   |
+-----+
| 3   |
+-----+
| c   |
+-----+
| D   |
+-----+
| 4   |
+-----+
| d   |
+-----+
cssbootstrap-4

Answer №1

It seems like your content is organized into four columns (A1a, B2b, ...), each consisting of three rows. To structure this, you can wrap each group of rows within its own div column container. Utilizing div elements eliminates the need to specifically separate them into rows since divs automatically expand to occupy 100% of the available width. However, if necessary, you still have the option to differentiate them as rows.

By utilizing Bootstrap's column layout, you can designate four columns for larger screens, two for medium screens, and one for small screens which is the default setting requiring no specific class declaration.

The following code snippet worked successfully:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5b3934342f282f293a2b1b6e75687569">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-6">
      <div>A</div>
      <div>1</div>
      <div>a</div>
    </div>
    <div class="col-lg-3 col-md-6">
      <div>B</div>
      <div>2</div>
      <div>b</div>
    </div>
    <div class="col-lg-3 col-md-6">
      <div>C</div>
      <div>3</div>
      <div>c</div>
    </div>
    <div class="col-lg-3 col-md-6">
      <div>D</div>
      <div>4</div>
      <div>d</div>
    </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

Is it possible to assign a class to the parent element when a Bootstrap 4 dropdown menu is expanded?

Is there a way to include a class in the parent element when a Bootstrap Dropdown is open? Here is the HTML code: <div class="item-content"> <div class="block-handle"> <div class="dropdown"> <a cl ...

jquerybootstrap-4

<!--[if IE]> does not function properly on any web browser

Hello, I am experiencing a perplexing issue and despite searching extensively on Google, I have been unable to find a solution! I am trying to change the body background color to red only in Internet Explorer, but it is not working as expected. Here is t ...

htmlcssinternet-explorerif-statement

Design a personalized button with a hand-shaped image using CSS

I am aiming to design a unique custom button that resembles the shape of a hand featured in this image, with the intention of adding some functionality to it later. My attempts so far have involved using an SVG path created in GIMP within a button, but all ...

htmlcss

Adaptable layout - transitioning from a two-column design to a single-column layout

I'm facing an issue with two divs that are floated left to appear inline <div class==".container" style="width: 100%"> <div class="leftColumn" style="width: 50%; float:left"> test </div> <div class="rightColu ...

htmlcssresponsive-design

Contrast in spacing: comparing display block versus inline-block

Today, I stumbled upon something quite intriguing that has left me puzzled. Consider the following HTML: <div class="a"><div class="b"></div></div> And CSS: .a { background: blue; } .b { display:inline-block; height ...

htmlcsslayout

Utilizing a CSS/HTML div grid to mirror a 2D array in JavaScript

Currently, I am working on a personal project that involves creating a grid of divs in HTML corresponding to a 2D array in JavaScript. However, I am uncertain about the most effective way to accomplish this task. Specifically, what I aim to achieve is tha ...

javascriptjqueryhtmlcss

conceal elements created with JQuery within an AJAX function

Is it possible to use jQuery and the $.ajax() method to submit a form, displaying only the result while hiding other elements on the page? I am looking to add a conditional in the Ajax method that will show the result if successful, hiding certain elements ...

phpjqueryhtmlcssajax

How can the hover effect be disabled when the pseudo-element is being hovered over?

I need the hover effect (the background of the pseudo-element changing to green) to only show up when the button is being hovered over. Right now, it also triggers when hovering over the pseudo-element itself (green box). button { box-sizing: border ...

htmlcss

Tips for getting the sidebar to move down on mobile devices

When viewing my website on a mobile device, the sidebar appears above my products. I would like it to be positioned below my products. The sidebar is currently on the left side with content on the right. Is there a more effective way to create a sidebar ...

csstwitter-bootstrapbootstrap-4

When the checkbox is not selected, the content on the page will revert back to its original state

Is there a way to dynamically change content on a page when a checkbox is checked, and revert it back when the checkbox is unchecked? I don't want to manually set each element's value to default in JavaScript and CSS. <div class="switch&q ...

javascripthtmlcsscheckboxonchange

css, align top menu

Is it possible to achieve this using only CSS? Please take a look at my example here. Currently, when I hover over the menu, the submenu appears next to it. I would like to align all submenus' tops with the top of the second level menu. ---------- ...

htmlcssmenuhover

What is the best way to style these CSS elements within the stylesheet?

I'm currently working on customizing a navigation menu in DotNetNuke. Although my question primarily relates to CSS syntax. Can someone please provide guidance on how to style a class that resembles the following? <tr class="mi mi0-0 id58 first"& ...

css

Place form at the center of the Bootstrap Modal

My question is, how can I center the entire form, including the input fields and labels, within the modal? Here is also a helpful Fiddle: http://example.com, although the snippet provided should work as well. <script src="https://example.com/bootstr ...

javascriptjqueryhtmlcsstwitter-bootstrap

The Card Component from Core UI fails to appear in the Print Preview feature

I'm currently experimenting with the Card Component from the Core UI framework. However, I'm facing an issue where the color of the Card component and its associated icon do not appear in the Preview when trying to print the page. I attempted to ...

cssvue.jscore-ui

The clearfix feature is ineffective when using AngularJS

<ul class="dropdown-menu wm_search_div" ng-show="searchDivShow"> <li ng-repeat="user in searchUserList"> <a href="javascript:void(0);" class="wm_clearfix3"> <img ng-src="{{user.faceIcon}}" class="pull-left wm_se ...

javascripthtmlcssangularjs

What is the best way to apply the background color from a parent div to a span element?

Is there a way to make the background color of the Reset Password section span the full width of the outer div and header section? html: <div class="forgot-inner"> <!--Forgot-header--> <div class="forgot-hea ...

htmlcss

Style your ASP.NET page with CSS to create a dynamic layout filled with panels

I'm working on a division that contains panels, but currently they are organized vertically within the division. I'd like to have them arranged next to each other instead. For example: panel_1 panel_2 panel_3 panel_4 panel_5 panel_6 ...

asp.nethtmlcss

Unable to utilize static files in node.js and express

Attempting to utilize node.js and express for crafting a chat client has proven to be a bit challenging. Whenever I attempt to incorporate external CSS or JS files, I encounter GET errors. My current configuration in index.js is as follows: var express = ...

javascripthtmlcssnode.jsexpress

Enhancing speed and efficiency when zooming in on various elements using React

Issue: The zoom functionality in my React application becomes sluggish when I have over 20 components rendered. The app needs to handle zooming with thousands of components being rendered. Current zoom implementation: Currently, in my application, there ...

javascriptcssreactjsperformancezooming

Increase the height of a component when viewed on mobile devices

https://jsfiddle.net/7v0dyfo3/ This is the concept I am attempting to implement for a listing, albeit without proper styling. While it looks good on most screens, the issue arises with its resizing behavior. I aim for the episode-box div to adapt its heig ...

htmlcsstwitter-bootstrap-3