Split the cards into 2 columns vertically on smaller screens, positioning the header above both columns

I am having issues with my cards breaking incorrectly on wide screens. I would like to display 4 larger cards followed by 2 columns of smaller cards, all with the correct header above them.

Here is the link to my jsfiddle:

jsfiddle.net/ad5qa/41tbgk75/

I am struggling to figure out how to organize them into columns.

<div class="container m-3">
   <div class="row row-cols-1 row-cols-sm-2 g-4  text-center">
     <div class="col mb-2">
       <div class="card h-100">
         <div class="card-text">
           <h5 class="card-title">Preparation</h5>
         </div>
       </div>
     </div>
     <div class="col mb-2">
       <div class="card h-100">
         <div class="card-text">
           <h5 class="card-title">Post</h5>
         </div>
       </div>
     </div>
   </div>
   <div class="row row-cols-1 row-cols-sm-4 g-4  text-center">
     <div class="col">
       <div class="card h-100">
         <i class="bi bi-wrench-adjustable card-icon"></i>
        
       </div>
     </div>
     <div class="col">
       <div class="card h-100">
         <i class="bi bi-shield-lock card-icon"></i>
       
       </div>
     </div>
     <div class="col">
       <div class="card h-100">
         <i class="bi bi-heart-pulse card-icon "></i>
      
       </div>
     </div>
     <div class="col">
       <div class="card h-100">
         <i class="bi bi-fingerprint card-icon"></i>
       
       </div>
     </div>
   </div>
</div>

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

col can be ambiguous in terms of creating a responsive Bootstrap layout. It is recommended to substitute col with col-lg-3 for larger screens to maintain a four-in-a-row structure, and then use col-md-6 and col-sm-6 for medium and smaller screens to achieve rows of two as desired.

.card-icon {
  font-size: 40px;
  text-align: center;
  color: #e45e24;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d4f4242595e595f4c5d00444e42435e6d1c0315031c">[email protected]</a>/font/bootstrap-icons.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5f3d30302b2c2b2d3e2f1f6b716c716e">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.min.js"></script>
<html>

<head>
</head>

<body>
  <div class="d-flex justify-content-center">
    <div class="container m-3">
      <div class="row row-cols-1 row-cols-sm-2 g-4  text-center">
        <div class="col mb-2">
          <div class="card h-100">
            <div class="card-text">
              <h5 class="card-title">Preparation</h5>
            </div>
          </div>
        </div>
        <div class="col mb-2">
          <div class="card h-100">
            <div class="card-text">
              <h5 class="card-title">Post</h5>
            </div>
          </div>
        </div>
      </div>
      <div class="row row-cols-1 row-cols-sm-4 g-4 text-center">
        <div class="col-sm-6 col-lg-3 col-md-6">
          <div class="card h-100">
            <i class="bi bi-wrench-adjustable card-icon"></i>
            <div class="card-body">
              <h5 class="card-title">Title</h5>
              <div class="card-text">
                <ul class="subdescription">
                  <li>one</li>
                  <li>two</li>
                  <li>three</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3 col-md-6">
          <div class="card h-100">
            <i class="bi bi-shield-lock card-icon"></i>
            <div class="card-body">
              <h5 class="card-title">Title</h5>
              <div class="card-text">
                <ul class="subdescription">
                  <li>one</li>
                  <li>two</li>
                  <li>three</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3 col-md-6">
          <div class="card h-100">
            <i class="bi bi-heart-pulse card-icon "></i>
            <div class="card-body">
              <h5 class="card-title">Title</h5>
              <div class="card-text">
                <ul class="subdescription">
                  <li>one</li>
                  <li>two</li>
                  <li>three</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3 col-md-6">
          <div class="card h-100">
            <i class="bi bi-fingerprint  card-icon"></i>
            <div class="card-body">
              <h5 class="card-title">Title</h5>
              <div class="card-text">
                <ul class="subdescription">
                  <li>one</li>
                  <li>two</li>
                  <li>three</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Answer №2

If you're looking to create a layout with a parent grid featuring 2 columns that stack into one on smaller screens, here's how you can do it. Each of the parent columns should contain a nested row with 2 columns of equal width (.col-6) at every screen size. You can achieve this by using a parent grid row with the classes .row.row-cols-1.row-cols-sm-2 and 2 .col elements, or simply a .row with 2 .col-12.col-sm-6 elements.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95f7fafae1e6e1e7f4e5d5a0bba4bba6">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container p-3">
  <div class="row row-cols-1 row-cols-sm-2 g-4  text-center">
    <div class="col">
      <div class="card mb-2">
        <div class="card-text">
          <h5 class="card-title">One</h5>
        </div>
      </div>
      <div class="row">
        <div class="col-6">
          <div class="card">
            1
          </div>
        </div>
        <div class="col-6">
          <div class="card">
            2
          </div>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card mb-2">
        <div class="card-text">
          <h5 class="card-title">Two</h5>
        </div>
      </div>
      <div class="row">
        <div class="col-6">
          <div class="card">
            3
          </div>
        </div>
        <div class="col-6">
          <div class="card">
            4
          </div>
        </div>
      </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

Achieving unique proportions with HTML5 video resizing

On my page, I plan to showcase a video specifically for desktop browsers. I have devised some code to determine whether the video is in landscape or portrait orientation. The challenge lies in deciding what to do based on this orientation: If the video is ...

javascriptjquerycss

Having difficulty getting mask-image to function properly in Safari browser

My table row is styled with the following CSS code: .table-row-mask { mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); } <table><tr class="table-row-mask"><td>Test</td></tr></table> This ...

htmlcss

What is the most effective way to inform the user when the nodeJS server can be accessed through socketIO?

I have developed a web app that indicates to the user when the server is online for data submission. Although the current code functions properly for single-user interaction, I am facing an issue where one user's connection or disconnection directly i ...

javascriptnode.jshtmlsocket.io

Intrigued by the prospect of making HTML elements vanish or smoothly glide along with the content without obstructing it

I'm a beginner in coding and I want to make my website impressive. Right now, I have an HTML embedded element called "On this Page" that I would like to disappear when the user scrolls down the page. I've managed to position the element on the ...

htmlcss

When I submit my form in Django, the data does not get added to the database

My current project involves creating a contact page for a website using Django. The goal is for clients to enter their information, which should then be submitted to the database. Even though the form is submitting without errors and the project runs smoot ...

pythonhtmldjangodjango-forms

There seems to be a glitch with the Flask flash messaging feature, as

My Flask application includes login and register routes where I aim to display flash messages when username passwords are not matched. Specifically, this issue arises in my index and login routes: @app.route('/') @login_required def index(): ...

pythonhtmlflaskwebflash-message

Guidelines for creating a uniform table border with varying border thicknesses

I have created a crossword puzzle generator that arranges words by rows and fills each cell with one letter. The keywords are distinguished by a wider border and a gray background, as shown in this image. Here is the general structure of my code: #cross ...

css

Manipulating a specific element within an ng-repeat in AngularJS without affecting the others

I'm currently working on developing a basic single page application to monitor people's movements. While I've made good progress, I've encountered an issue with the click function in the child elements of each person div. When I try to ...

javascripthtmlangularjs

Can you explain the distinction between using inline-block and inline-table display properties?

It appears that these display selectors are indistinguishable based on my assessment. According to the Mozilla CSS documentation: inline-table: The inline-table value doesn't have a direct HTML equivalent. It functions like a <table> HTML elem ...

htmlcss

Having troubles with PHP retrieving images from my server directory over here

My current code is designed to retrieve an image from my server and display it on my HTML page. However, the images are stored in an encrypted format using MD5 and do not have corresponding names in the table. To fetch the image, I am using the primary key ...

phphtmlmysql

What is the best way to eliminate excess padding or margin within an absolute block?

I am working on a project where I want to replicate an illustration similar to this one However, I am encountering an issue with the padding or margin. Here is what I have attempted so far: http://jsfiddle.net/kl94/RZPRS/2/ .circles { background-colo ...

htmlcss

Is it deemed as an anti-pattern to establish directives for styling?

Currently, I am in the midst of developing a specialized component UI library for a specific project I'm involved in. This library will consist of unique stylized components with elements that are reused throughout. As I work on this project, I find ...

cssangularangular-directive

Unique option preservation on customized HTML select menus - Maintain original selection

Currently, I am attempting to replicate a custom HTML select based on the example provided by W3 Schools. You can view the demo through this link: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_custom_select The issue I am encountering is that ...

javascripthtmlselect

Changing the background color of the dropdown button in Vue Bootstrap: A step-by-step guide

I've been struggling to modify the background color of a dropdown button, but no method seems to work. I've attempted changing it by using ID, removing its class and applying a new one, and even using !important to override the styles, but the ba ...

javascriptcssvue.jsnuxt.jsbootstrap-vue

Modify visibility or enable state of a text box according to a checkbox in PHP

Currently, I am utilizing PHP to exhibit a vertical list of numbered checkboxes, with one checkbox for each day in a specific month. Next to every checkbox, there is a text box where users can input optional notes for the selected day. To ensure that users ...

javascriptphpjquerycsscheckbox

What is the best way to specify the CSS :hover state within a jQuery selector?

I am trying to change the background color of a div element when hovered using jQuery, but for some reason the following code is not working as expected: $(".myclass:hover div").css("background-color","red"); Can someone provide guidance on how to achiev ...

javascriptjqueryhtmlcss

Creating a sleek navigation menu using Bootstrap 4

Currently tackling the Vertical Navigation bar which can be found at this location: Codeply This is my code snippet: <html> <body> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" > ...

cssbootstrap-4

Please ensure there is space reserved for the header above the content

Currently, I am working on creating a webpage with a unique banner design. My goal is for the content to scroll from the bottom and remain fixed directly under the upper portion of the banner. Initially, my idea was to have the content box take up the siz ...

javascripthtmlcss

embedding HTML code directly into an iframe

Can HTML be directly inserted into an iframe within my HTML template? Would the following code be considered valid? <iframe> <html> <head> </head> <body> <p>Hello world</p> </body> ...

htmliframe

The recent update to Bootstrap v5 caused a complete disruption in the CSS of our application

My Angular app was originally on Angular 14 and used Bootstrap with SCSS compiled to node-sass/SASS package. It also utilized ng-bootstrap v11 and Bootstrap v4.3.1 for CSS styles. As part of a general upgrade, I needed to update the Angular version to 15. ...

cssangularbootstrap-4sassbootstrap-5