Issues with Organizing Bootstrap Card Layout

I'm in need of assistance with creating a responsive Bootstrap card grid.

My goal is to have a grid layout with 6 cards, initially displayed as 2 rows of 3 cards. As the screen size decreases, I want the layout to adjust accordingly to maintain readability and aesthetics, with the final layout being a single row of 1 card on very small screens.

Here is the structure of my HTML card grid:

<div class="services">
        <h2>Serviços</h2>
        <div class="cards">

          <div class="card">
            <i class="fa fa-taxi home_icons" aria-hidden="true"></i>
            <h3>Atendimento Preferencial</h3>
            <p>Lorem ipsum dolor sit amet.</p>
          </div>

          <div class="card">
            <i class="fas fa-calendar-alt home_icons"></i>
            <h3>Agendamentos</h3>
            <p>Aeroportos <br> Guarulhos, Viracopos, Congonhas</p>
          </div>

          <div class="card">
            <i class="fas fa-hands-helping home_icons"></i>
            <h3>Acompanhamentos</h3>
            <p>Lorem ipsum dolor sit amet.</p>
          </div>

          <div class="card">
            <i class="fas fa-language home_icons"></i>
            <h3>Tradução</h3>
            <p>Português <i class="fas fa-arrows-alt-h"></i> Francês </p>
          </div>

          <div class="card">
            <i class="fas fa-bus home_icons"></i>
            <h3>City Tour / Viagens</h3>
            <p>Interior e Litoral</p>
          </div>

          <div class="card">
            <i class="fas fa-dollar-sign home_icons"></i>
            <h3>Transfer a preço fixo</h3>
            <p>Lorem ipsum dolor sit amet.</p>
          </div>

        </div>
      </div>

Below is a snippet of the CSS code for styling the cards:

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 16px;
}

.card {
  box-shadow: 0 0px 5px rgba(0,0,0,0.3);
  width:250px;
  text-align: center;
  border-radius: 5px;
}

.card p {
  padding-bottom: 25px;
}

// Media queries for responsive design
@media (max-width: 575px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 576px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 992px) {
  .cards {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (min-width: 1200px) {
  .cards {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

It appears that the media queries are not functioning as expected, despite importing the CSS file correctly in my HTML document.

https://i.sstatic.net/yUlJ5.jpg

Answer №1

@LovlsGenesis Here is the solution for you - no need to use the @media screen, you can utilize bootstrap classes instead.

CSS

.card{
  min-height: 240px;
  margin: 5px;
}

.fa-taxi{
  font-size: 70px;
  margin: 20px;
}

.fa-calendar{
  font-size: 70px;
  margin: 20px;
}

.fa-handshake-o{
  font-size: 70px;
  margin: 20px;
}

.fa-globe{
  font-size: 70px;
  margin: 20px;
}

.fa-bus{
  font-size: 70px;
  margin: 20px;
}

.fa-usd{
  font-size: 70px;
  margin: 20px;
}

HTML

<br>
<h2>Services</h2>
<div class="row">
  <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
  <div class="card text-center">
            <i class="fa fa-taxi" aria-hidden="true"></i>
            <h3>Priority Service</h3>
            <p>Lorem ipsum dolor sit amet.</p>
          </div>
  </div>

  <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
  <div class="card text-center">
            <i class="fa fa-calendar"></i>
            <h3>Appointments</h3>
            <p>Airports <br> Guarulhos, Viracopos, Congonhas</p>
          </div>
  </div>

  <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
  <div class="card text-center">
            <i class="fa fa-handshake-o"></i>
            <h3>Accompaniments</h3>
            <p>Lorem ipsum dolor sit amet.</p>
          </div>
  </div>

  <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
  <div class="card text-center">
            <i class="fa fa-globe"></i>
            <h3>Translation</h3>
            <p>Portuguese <i class="fas fa-arrows-alt-h"></i> French </p>
          </div>
  </div>

  <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
  <div class="card text-center">
            <i class="fa fa-bus"></i>
            <h3>City Tour / Travels</h3>
            <p>Inland and Coastal</p>
          </div>
  </div>

  <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
  <div class="card text-center">
            <i class="fa fa-usd"></i>
            <h3>Fixed Price Transfers</h3>
            <p>Lorem ipsum dolor sit amet.</p>
          </div>
  </div>
</div>

You have the option to edit or view the code Here on JSFiddle

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

What is the way to determine the length of a list in a velocity template?

Is there a way to determine the size of a list in a velocity template? I am currently working with version 1.4 of Velocity. List<String> list = new ArrayList<String>(); ...

Tips on toggling the visibility of div elements with JavaScript

In my selection block, I have three categories of elements and associated Divs. The goal is to display the related divs when a category is selected, while keeping them hidden otherwise. Specifically, I want the husband_name and number_pregnancy divs to be ...

An absolutely positioned element will always move within its relative container

After extensive searching on Google and Stack Overflow, I finally found what seemed like the perfect solution. The logic behind it made sense and I understood it perfectly. But when I implemented it, my absolute positioned divs kept moving whenever I resiz ...

The Alert Component fails to display when the same Error is triggered for the second time

In the midst of developing a Website using Nuxt.js (Vue.js), I've encountered an issue with my custom Alert Component. I designed a contact form on the site to trigger a specialized notification when users input incorrect data or omit required fields ...

What could be causing issues with angularjs ng-include not functioning properly in Chrome at times?

<html ng-app="myApp1"> <head> <title>NG-Include</title> <script src="angular.js"></script> <script src="filter.js"></script> </head> <body> <div ng-controller="myController"> ...

Having issues with the background-image style not displaying correctly in the header of an

Trying to update the "background-image:" of a CSS class upon button click. JQuery: $(function() { $('button').on('click', function() { $('.masthead2').css('background-image', 'url("../img/whitehead ...

Is it permissible to use DEFER or ASYNC when including a stylesheet?

I am curious if script files are able to utilize the DEFER and ASYNC keywords on a resource include. Are these keywords also compatible with stylesheet (CSS) includes? The syntax I imagine would be: <link rel="stylesheet" type="text/css" href="./path/ ...

Floating division element above responsive divisions

element, I am in the process of developing a straightforward online card interface. In this interface, there will be a user profile picture displayed above some details about that user. However, to achieve this layout, the profile picture must appear hove ...

Border with curved edges

Having an issue with content boundaries while using CSS rounded corners in Firefox. Here is the code snippet: Code <html> <head> <style> #outter { width: 200px; margin: auto; text-align: cent ...

Obtain the breakpoint value from Bootstrap 5

We have recently updated our project from Bootstrap 4 to Bootstrap 5. I am trying to retrieve the value of a breakpoint in my TypeScript/JavaScript code, which used to work in Bootstrap 4 with: window .getComputedStyle(document.documentElement) .g ...

Tips for breaking out of the foundation row and aligning with the right edge of the viewport

I have a CodePen example showcasing the Zurb Foundation grid. I am looking for a way to make a div extend to the right edge of the viewport while keeping the left edge in line with the grid as the viewport is resized. <div class="row"> <div cla ...

Tips for incorporating inline styling into the body element

Can someone help me with adding inline style to the body element using jQuery? I want to set the background color to white (#FFFFFF). Your assistance would be highly appreciated. Thank you! ...

What is the correlation between using em font sizes and disrupting line-height?

I initially set my body element's font-size to 19px, and then started using em units for various elements. Unfortunately, I am experiencing irregularities with line-heights. For example, when I use a font-size of 0.6em, the line height becomes uneven ...

Why is it that the border size in Chrome browser always seems to change, despite my specific requests for a set size?

I need help understanding why the border size is not matching the size I set in my CSS rules. Here is a link to the fiddle and below is the HTML code: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>P inside B ...

Aligning divs, prevent duplicate HTML within multiple divs

Currently, I am attempting to troubleshoot a jsfiddle issue. The main problem lies in my desire for the first two divs (with class="fbox") to be aligned next to each other on the same level. Furthermore, I am looking to enable dragging the image into the ...

Ways to correctly import various CSS files for individual routes in a Vuejs application

Currently, I am in the process of developing a project using Vue.js and Laravel. This project will have distinct layouts for the admin/user panel and landing page, requiring different CSS files to be loaded for each route. At the moment, I am utilizing va ...

What could be causing the svg to not be visible inside the div?

I am struggling to display an SVG element within a div as it is not visible at all. Can someone help me make the SVG visible in the div? Here is a link to the code: http://codepen.io/helloworld/pen/HjkhK <div style="height:100px;background:yellow;"> ...

Is there a way to integrate the distanceTo function from Leaflet into my own custom library that I am planning to develop?

I am currently incorporating leaflet into my project and I have encountered the distanceTo method which calculates the distance between two coordinates. My goal is to create a separate JS file with a function named getDistance() where I can house the logic ...

Utilizing a Stylesheet for a Single Element

Is there a way to create a footer and include it using the PHP include function from an external file, but ensure that the stylesheet within it only affects the footer and not the entire page? I typically link stylesheets in the head tag, which applies t ...

What is the best way to automatically show scrollbars when a page loads using JavaScript?

How can I make the vertical scrollbar appear as soon as the page loads using javascript? I am currently using a jquery slide toggle animation that causes the vertical scrollbar to show up because it makes the page longer. However, when the scrollbar appear ...