Trouble with Bootstrap columns displaying on smaller devices

I designed a grid with 3 columns that exhibits issues, specifically that the columns shrink too much on smaller screens and distort the content. Is there a way to introduce a break-point at around 1000px so that all content shifts into a single column?

Another concern is when transitioning to mobile size where the last two columns vanish instead of stacking below the first column as expected.

How do I rectify these problems and what steps did I err in during development?

VIEW DEMO

Code Snippet

<div class="container-fluid"
        style="overflow-x:hidden;padding-left:0;display:flex; height: 98vh; margin-right:0px; margin-left:0px">
    <div class="col-md-6 col-sm-12 customcol">
        <div class="card card1">
            <div class="card-body">
                <p class="card-text">1asdas</p>
            </div>
        </div>
        <div class="divh" style="justify-content: flex-start; display: flex">
            <div class="card card2">
                <div class="card-body">
                    <p class="card-text">2aasasddsd</p>
                </div>
            </div>
            <div class="card card2">
                <div class="card-body">
                    <p class="card-text">3asd</p>
                </div>
            </div>
        </div>
        <div class="divh" style="justify-content: flex-start; display: flex">
            <div class="card card2">
                <div class="card-body">
                    <p class="card-text">4asdasd</p>
                </div>
            </div>
            <div class="card card2">
                <div class="card-body">
                    <p class="card-text">5asda</p>
                </div>
            </div>
        </div>
        <div class="divh" style="justify-content: flex-start; display: flex">
            <div class="card card4" style="height:100%">
                <div class="card-body">
                    <p class="card-text">6asda</p>
                </div>
            </div>
            <div class="card card4" style="height:100%">
                <div class="card-body">
                    <p class="card-text">7asd</p>
                </div>
            </div>
            <div class="card card4" style="height:100%">
                <div class="card-body">
                    <p class="card-text">8asdasd</p>
                </div>
            </div>
            <div class="card card4" style="height:100%">
                <div class="card-body">
                    <p class="card-text">9asdsad</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-sm-12 customcol">
        <div class="card card1">
            <div class="card-body">
                <p class="card-text">10asd</p>
            </div>
        </div>
        <div class="card card1">
            <div class="card-body">
                <p class="card-text">11asdas</p>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-sm-12 customcol">
        <div class="card cardall">
            <div class="card-body">
                <p class="card-text">12asd</p>
            </div>
        </div>
    </div>
</div>

Issue Illustration

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

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

The problem lies in your usage of col without including row.

According to the official documentation from Bootstrap, whenever you use a column, it must have a row as its parent.

.card{
  margin-top: 16px;
  margin-left: 16px;

}

.card-body{
    padding:4px;
}

.card1{
height: calc(50% - 16px)
}

.divh{
height: calc(16.7% - 16px);
    margin-top: 16px;
}

.card2{
width: calc(50% - 16px);
margin-top:0px;
height:100%;
}

.card4{
width: calc(25% - 16px);
margin-top:0px;
height:100%;
}

.cardall{
  height: calc(100% - 16px)

}

.customcol{
  padding-left: 0;
  padding-right: 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid" style="padding-left:0; height: 98vh;">
<div class="row">
  <div class="col-md-4 col-sm-12 customcol">
<div class="card card1">
  <div class="card-body">
    <p class="card-text">Content 1</p>
  </div>
</div>
<div class="divh" style="justify-content: flex-start; display: flex">
  <div class="card card2" >
  <div class="card-body">
    <p class="card-text">Content 2</p>
  </div>
</div>
<div class="card card2">
  <div class="card-body">
    <p class="card-text">Content 3</p>
  </div>
</div>
</div>
<div class="divh" style="justify-content: flex-start; display: flex">
  <div class="card card2">
  <div class="card-body">
    <p class="card-text">Content 4</p>
  </div>
</div>
<div class="card card2">
  <div class="card-body">
    <p class="card-text">Content 5</p>
  </div>
</div>
</div>
<div class="divh" style="justify-content: flex-start; display: flex">
  <div class="card card4" style="height:100%">
  <div class="card-body">
    <p class="card-text">Content 6</p>
  </div>
</div>
<div class="card card4" style="height:100%">
  <div class="card-body">
    <p class="card-text">Content 7</p>
  </div>
</div>
<div class="card card4" style="height:100%">
  <div class="card-body">
    <p class="card-text">Content 8</p>
  </div>
</div>
<div class="card card4" style="height:100%">
  <div class="card-body">
    <p class="card-text">Content 9</p>
  </div>
</div>
</div>
  </div>
  <div class="col-md-4 col-sm-12 customcol">
<div class="card card1">
  <div class="card-body">
    <p class="card-text">Content 10</p>
  </div>
</div>
<div class="card card1">
  <div class="card-body">
    <p class="card-text">Content 11</p>
  </div>
</div>

  </div>
  <div class="col-md-4 col-sm-12 customcol">
  <div class="card cardall">
  <div class="card-body">
    <p class="card-text">Content 12</p>
  </div>
</div>
  </div>
</div>

Answer №2

.card{
  margin-top: 16px;
  margin-left: 16px;

}

.card-body{
    padding:4px;
}

.card1{
height: calc(50% - 16px)
}

.divh{
height: calc(16.7% - 16px);
    margin-top: 16px;
}

.card2{
width: calc(50% - 16px);
margin-top:0px;
height:100%;
}

.card4{
width: calc(25% - 16px);
margin-top:0px;
height:100%;
}

.cardall{
  height: calc(100% - 16px)

}

.customcol{
  padding-left: 0;
  padding-right: 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid" style="padding-left:0; height: 98vh;">
<div class="row">
  <div class="col-md-4 col-sm-12 customcol">
<div class="card card1">
  <div class="card-body">
    <p class="card-text">1asdas</p>
  </div>
</div>
<div class="divh" style="justify-content: flex-start; display: flex">
  <div class="card card2" >
  <div class="card-body">
    <p class="card-text">2aasasddsd</p>
  </div>
</div>
<div class="card card2">
  <div class="card-body">
    <p class="card-text">3asd</p>
  </div>
</div>
</div>
<div class="divh" style="justify-content: flex-start; display: flex">
  <div class="card card2">
  <div class="card-body">
    <p class="card-text">4asdasd</p>
  </div>
</div>
<div class="card card2">
  <div class="card-body">
    <p class="card-text">5asda</p>
  </div>
</div>
</div>
<div class="divh" style="justify-content: flex-start; display: flex">
  <div class="card card4" style="height:100%">
  <div class="card-body">
    <p class="card-text">6asda</p>
  </div>
</div>
<div class="card card4" style="height:100%">
  <div class="card-body">
    <p class="card-text">7asd</p>
  </div>
</div>
<div class="card card4" style="height:100%">
  <div class="card-body">
    <p class="card-text">8asdasd</p>
  </div>
</div>
<div class="card card4" style="height:100%">
  <div class="card-body">
    <p class="card-text">9asdsad</p>
  </div>
</div>
</div>
  </div>
  <div class="col-md-4 col-sm-12 customcol">
<div class="card card1">
  <div class="card-body">
    <p class="card-text">10asd</p>
  </div>
</div>
<div class="card card1">
  <div class="card-body">
    <p class="card-text">11asdas</p>
  </div>
</div>

  </div>
  <div class="col-md-4 col-sm-12 customcol">
  <div class="card cardall">
  <div class="card-body">
    <p class="card-text">12asd</p>
  </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

Guidelines for accessing a specific object or index from a dropdown list filled with objects stored in an array

Here is a question for beginners. Please be kind. I have created a select field in an HTML component using Angular, populated from an array of objects. My goal is to retrieve the selection using a method. However, I am facing an issue where I cannot use ...

javascripthtmlangular

When the class changes, V-for re-renders every component

Currently, I am in the process of changing classes for images based on their index using the moveIndex method and key events. While this works smoothly on computers, it seems to take significantly longer when implemented on TVs. The process runs smoothly w ...

javascripthtmlarraysperformancevue.js

Is it possible for me to reply to packets that are transmitted to a website?

I'm currently working on a Python program that sends a 'hello' packet to the server and I'm wondering if I can get the server to respond based on that. Here's the code snippet I'm using to send the packet: import requests hL = ...

javascriptpythonhtmlpython-3.x

Tips for embedding HTML code within {{ }} in Django templates

I'm curious about how to incorporate HTML within {{ }}: {{ article.tags.all|join:", " }} This code snippet returns tags separated by commas, for example: sports, cricket, nature, etc. What I would like to achieve is: {{ <span class="label"&g ...

pythonhtmldjangomodel

jQuery tooltip box not functioning correctly

When the mouse enters on li a, the tooltip box (class .show_tooltip) is appearing on the left. I want each tooltip box to display just above or to the left of the link that the mouse is on. The links need to stay on the right as they are now, so please do ...

javascriptjquerycss

"Enhancing user input with a blend of material design and bootstrap-

I'm currently developing a Vue web application and utilizing bootstrap-4 as my CSS framework. I'm aiming to achieve input fields that resemble material design. However, Bootstrap offers only the older style of input fields with borders on all sid ...

csstwitter-bootstrapmaterial-designvue.jsbootstrap-4

Displaying the age figure in JSX code with a red and bold formatting

I have a webpage with a button labeled "Increase Age". Every time this button is clicked, the person's age increases. How can I ensure that once the age surpasses 10, it is displayed in bold text on a red background? This should be implemented below t ...

javascriptcssreactjsconditional-statementsfont-size

How can CSS be used to prevent line breaks between elements in a web page?

div#banner>img { float: left; background-color: #4b634b; height: 265px; width: 80%; } ul { float: left; background-color: #769976; width: 162px; } <body> <div id="wrapper"> <header> <nav> <ul ...

csshtml

Steps to open and configure a Mobile-Angular modal from another controller

Is it possible to use a modal in Angular JS for mobile devices without compromising the layout? I'm having trouble setting up the controller for my modal inside my main controller and passing parameters. Should I consider using ui-bootstrap for this p ...

javascriptangularjstwitter-bootstrapangular-ui-bootstrapmobile-angular-ui

Is there a way to attach a CSS class to a BoundField in order to locate it using jQuery?

I need to assign a specific class name to certain BoundFields within the GridView control. This way, after the GridView has been populated with data and displayed, I would like to have something similar to the following: <td class="Tag1">Some data c ...

jqueryasp.netcssgridview

Look for specific content within a div tag and display that div at the top of the page

<div class="search-container"> <input type="text" class="input-medium search-query" placeholder="Search"> <button type="button" class="btn">Search</button> </div> <div class="panel panel-default"> ...

jqueryhtml

Utilizing the Download Attribute in HTML 5 with iPhone Devices

Is there a way to download and view files such as PDFs, Word docs, and JPGs on an Ionic progressive web app without leaving the current page? I've tried using the html5-Download attribute on Android, but it doesn't work properly on iPhone. Any su ...

angularhtmlionic2

Creating a dynamic image gallery with varying image dimensions using JavaScript and Bootstrap

Struggling with aligning an image gallery featuring images of varying sizes? I don't want to set the size programmatically as it may not look good on different screens. The additional challenge is dealing with white spaces between images and not knowi ...

javascripthtmlcsstwitter-bootstrapimage-gallery

Looking to update the background color of a div every 3 seconds?

Every 3 seconds, I need to change the background color of each div. To do this, I attempted to modify the values in the color array every 3 seconds. For example, the value at index 0 (which is "red") would move to index 1, then the value at index 1 would ...

javascriptjqueryhtmlcss

The process of binding two variables in the same select element

Here is the code snippet that I am working with: <div class="form-group "> <label for="field_type"><b>Type</b></label> <div class="input-icon right"> <select required class="form-control" ...

javascripthtmlangularjs

Optimal viewing experience with organized sections in full-screen layouts

There are numerous ways to make a div cover the entire screen with a full-screen image in the background. However, most of them involve using min-height:100% and background-size:cover properties. This can sometimes cause other sections like the footer or h ...

htmlcss

Troubleshooting: jQuery animation for background-color doesn't function in Internet Explorer

I've been working on a website and I'm trying to create a navigation bar similar to the one found at . My goal is to have the navbar transition from transparent to a colored background as the user scrolls down the page. For this project, I am ut ...

javascriptjqueryhtmlcssjquery-animate

Explore a Variety of Albums with our Bootstrap LightBox Gallery

I'd like to incorporate this code into my gallery website, but I'm encountering a couple of issues. Firstly, when one album's slides finish, I want it to loop back to the first image. Additionally, there seems to be an intermittent problem w ...

javascripthtmltwitter-bootstrapbootstrap-4

HTML Scroll Blocking

Recently, I have been working on designing the mobile version of a website. However, I noticed that when I try to scroll quickly on my phone, the scrolling gets interrupted and I have to wait for it to catch up. I am using the fullpage.js library in this ...

htmlcssscroll

Using jQuery to create a Select All Checkbox that toggles a specific class

I have come across similar examples in the past, but I have been unable to make it work as intended. The examples I found only use standard checkboxes. I attempted to customize the checkbox using a sprite sheet by applying a class, but I am struggling to a ...

javascriptjqueryhtmlcsscheckbox