Troubleshooting Bootstrap 4: The .col class is experiencing issues with functionality

Why is the .col-6 class malfunctioning on screen sizes below 575px, causing the cards to appear distorted? How can this issue be resolved?

To see the problem, click on Run code snippet->Full Page and resize the screen width to below 575px:

.divCard{
  float:left;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row mx-md-2">
    <div class="card-group col-lg-8">

      <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
        <article class="card">
          <a href="#">
            <img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg">
          </a>
       </article>
      </div>

      <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
        <article class="card">
          <a href="#">
            <img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg"></a>
        </article>
      </div>

      <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
        <article class="card">
          <a href="#">
            <img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg">
         </a>
       </article>
      </div>

    </div>

    <div class="col-12 col-lg-4" style="background-color: red"></div>
  </div>
</div>

csstwitter-bootstrapbootstrap-4

Answer №1

Place the col-lg-8 class content within a row class to resolve the default margin issue.

You can use the following code:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row mx-md-2">
    <div class="card-group col-lg-8">
      <div class="row">
        <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
          <article class="card">
            <a href="#">
              <img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg">
            </a>
          </article>
        </div>

        <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
          <article class="card">
            <a href="#">
              <img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg">
            </a>
          </article>
        </div>

        <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
          <article class="card">
            <a href="#">
              <img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg">
            </a>
          </article>
        </div>
      </div>
    </div>

    <div class="col-12 col-lg-4" style="background-color: red; height:200px"></div>
  </div>
</div>

Answer №2

I have identified some errors and will provide a simplified version to demonstrate where the issue lies.

Bootstrap requires the following structure in your layout: container → row → col → row → col and so on.

However, your layout is structured as container → row → col → col, which I believe is causing the problem.

Adding borders can be beneficial for visualizing the layout and understanding its behavior more easily.

This adjustment should address the issues you are facing.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="70121f1f04030402110030445e465e40">[email protected]</a>/dist/css/bootstrap.min.css">
        
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-8">
      <div class="row">

        <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 border">
          <article class="card w-100">1</article>
        </div>

        <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 border">
          <article class="card w-100">2</article>
        </div>

        <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 border">
          <article class="card w-100">3</article>
        </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

IE11 alternative for the CSS property "unset"

I have a div fixed to a specific location on my webpage using the following CSS properties: width: 320px; height: 160px; position: fixed; right: 15px; bottom: 15px; top: unset; z-index: -1; While the div displays correctly in other browsers, in Internet ...

csshtmlinternet-explorer-11

What is the process for validating the CSS background-image URL using Javascript?

The concept here is to verify the URL of the CSS element's id (.boot). If the URL matches, which it does, then it should display "hello world." However, despite everything seeming correct, the expected behavior is not occurring, and the reason behind ...

javascriptcssif-statementbackground-image

Bootstrap 4 tabbing feature: initial tab not displayed upon loading the page

I'm having an issue with tabbable panes on my website. When the page first loads, the first pane remains empty until I switch to the second one and then go back to the first. The content only shows up after this cycle and I suspect it might be a JavaS ...

bootstrap-4twitter-bootstrap-4pane

Apply CSS styles when the text exceeds the size of the textbox

Is there a way to create a textbox that scrolls on hover only if the text is longer than the textbox itself? Check out my attempt here: https://jsfiddle.net/SynapticError/wqh4ts3n/35/ The text should scroll on hover if it's longer than the textbox. ...

javascriptcss

Getting Your Content Centered Horizontally with Fixed Positioning in CSS

I would like the div to be centered horizontally with a fixed position, but it doesn't seem to work in my code. Can someone help me troubleshoot? Check out the demo here. HTML: <div id="fancybox-thumbs" class="bottom" style="width: 675px;"> ...

htmlcss

How can I retrieve the height of a dynamically generated div in Angular and pass it to a sibling component?

My setup consists of a single parent component and 2 child components structured as follows: Parent-component.html <child-component-1 [id]="id"></child-component-1> <child-component-2></child-component-2> The child-compo ...

javascriptangulartypescripttwitter-bootstrapng-bootstrap

The ability to scroll horizontally for individual items within a larger container div

JSFIDDLE: http://jsfiddle.net/7zk1bbs2/ If you take a look at the JSFiddle project, you'll notice that the icons are placed inside an orange box. However, there is a vertical scroll needed to browse through them and I am attempting to enable horizont ...

htmlcssscroll

Tips for handling external CSS dependencies in a Create React App project

Working on a web application using CRA 3.4.1 along with a component library called PrimeReact 4.1.2. My custom CSS is processed through the PostCSS setup in CRA, which adds prefixed versions for properties like display: flex to ensure IE10 support in the ...

cssreactjscreate-react-appreact-scripts

Is there a way to automatically scroll through a webpage?

I am looking to have a gif displayed on my website upon loading, and once the animation finishes I want the page to automatically scroll up without requiring any button clicks, revealing my main site. It is important that the gif loads automatically ever ...

javascriptjqueryhtmlcssanimation

"Enhanced Bootstrap 4 table featuring a single column that stands out in size compared

I have set up a Bootstrap4 table with multiple columns, but I need one of them to be larger in order to accommodate more text. I want to specify the minimum width for this larger column and let Bootstrap4 adjust the sizes of the other columns accordingly. ...

cssbootstrap-4

The error message is causing all blocks to change width. What steps can be taken to correct this issue

When the error message pops up, it causes the login form width to change. A shorter message makes it narrow while a longer message widens it. How can this be resolved without setting a fixed width? I am using FormHelperText element to show the error messa ...

htmlcssmaterial-ui

Clicking on a select box causes the scrollbar area to vanish, shifting all the page content to the right

I have successfully implemented overflow-y: scroll; to keep the scrollbar space always reserved and prevent content from shifting when the scrollbar appears. However, I noticed that when I click on a select element, this scrollbar space is lost. How can I ...

cssreactjssassmaterial-uireact-hooks

having difficulty configuring gwt-button's corners to be rounded

Hey there, I'm having an issue with a button in my GUI that I created using GWT. I'm trying to round the corners of the button, but using border-radius doesn't seem to have any effect on its appearance. The style sheet I'm using is "co ...

javahtmlcssgwtstylesheet

Enhancing Bootstrap with VueJS for better component ordering

I've been struggling with Vue components in Bootstrap lately. I am attempting to create collapsible Bootstrap content in Vue, and here is the current code: HTML <div class="col-sm main-content" id="main-content"> <p&g ...

javascripthtmlvue.jsbootstrap-4

Tips for creating two lines of text within one line using CSS

My explanation skills are not the best. I have the words "Tasty Burger" stacked on top of each other, but I want them to be on a single line. .footer-container { margin: 25px 0; display: flex; gap: 3rem; align-items: center; justif ...

htmlcssflexbox

Issue with Datepicker functionality within the <th> element is causing it to malfunction

Currently, I am attempting to utilize the Bootstrap datepicker, but I am facing an issue when trying to implement it within a table, specifically inside a th element. Below is the structure of my table: <table id="table" class="table table-bord ...

htmlcsstwitter-bootstrap

Utilizing Jquery UI Slider for Multi-Handle Functionality

I have implemented a slider event from jQuery UI to create a customized grid with additional handlers embedded within the slider. However, when I select columns in the dropdown menu, the slider event option values and handles fail to change accordingly. ...

phpjqueryhtmlcss

Component rendering based on conditions is not working properly when using Next.js, especially on the initial load

While utilizing Ant Design and a Custom Stylesheet, I have encountered an issue where the style appears broken upon first load. However, if I navigate to another page and return to the original broken page, it displays correctly. This problem only occurs d ...

cssreactjsnext.jsantd

Tips for automatically collapsing the Bootstrap 4 Sidebar on smaller devices

I am currently working on some code and have successfully hidden the sidebar using a collapse button. However, I am looking to make it collapse only for small devices, similar to how the bootstrap navbar functions. <link href="https://stackpath.boots ...

htmlcssbootstrap-4responsivesidebar

Preventing image rotation in an Angular 4 application: Strategies and Solutions

My Angular application allows users to choose a profile picture. During testing, I discovered that when I upload images from an iPhone in portrait mode, they appear rotated in my app. However, when the photos are taken in landscape mode, they display corre ...

javascripthtmlioscssangular