Is there a way to use Bootstrap4 flexbox to create responsive images?

I'm currently working on the "Top Categories" section of my website and I'm facing issues with making the image cards responsive. Despite using flexbox classes from Bootstrap 4, I am unable to achieve the desired responsiveness. Can anyone help me figure out what I may be missing?

Here is the CODEPEN

Below is the code:

index.html

.Top-Categories {
  width: 267px;
  height: 29px;
  padding-bottom: 24px;
  font-family: arial;
  font-size: 24px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: #4a4a4a;
}

.Top-Categories-Img-Card {
  width: 1104px;
  margin-left: 205px;
  margin-right: 205px;
}

.Top-Categories-Img {
  width: 159px;
  height: 238px;
}

.Top-Categories-Label {
  width: 93px;
  height: 15px;
  padding-left: 0px;
  font-family: arial;
  font-size: 12px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: #4a4a4a;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<section class="Top-Categories-Img-Card">
  <h3 class="Top-Categories">Top Categories</h3>
  <div class="row">
    <div class="col-sm-12 col-md-2">
      <div class="">
        <img class="card-img-top Top-Categories-Img" src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" alt="Card image">
        <div class="card-body">
          <a href="#" class="Top-Categories-Label">Fun & Recreation</a>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-2">
      <div class="">
        <img class="card-img-top Top-Categories-Img" src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" alt="Card image">
        <div class="card-body">
          <a href="#" class="Top-Categories-Label">Education & Skill Development</a>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-2">
      <div class="">
        <img class="card-img-top Top-Categories-Img" src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" alt="Card image">
        <div class="card-body">
          <a href="#" class="Top-Categories-Label">Informative & Motivational</a>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-2">
      <div class="">
        <img class="card-img-top Top-Categories-Img" src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" alt="Card image">
        <div class="card-body">
          <a href="#" class="Top-Categories-Label">Health & Fitness</a>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-2">
      <div class="">
        <img class="card-img-top Top-Categories-Img" src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" alt="Card image">
        <div class="card-body">
          <a href="#" class="Top-Categories-Label">Kids & Teens</a>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-2">
      <div class="">
        <img class="card-img-top Top-Categories-Img" src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" alt="Card image">
        <div class="card-body">
          <a href="#" class="Top-Categories-Label">Home Maintenance</a>
        </div>
      </div>
    </div>
  </div>
</section>

htmlcssbootstrap-4

Answer №1

Your excessive custom CSS tweaks are causing issues with Bootstrap framework.

To resolve this issue, follow these steps:

  1. Apply the container class to the <section>

  2. Delete all your custom CSS modifications

After completing these steps, everything should function properly again. You can gradually reintroduce custom CSS rules to identify where they conflict with Bootstrap.

Furthermore, you only need to specify classes like col-md-2 instead of col-sm-12 col-md-2. This is because for screens smaller than medium (md), it will automatically default to full width like col-sm-12.

Answer №2

If you're seeking a solution to create responsive images within a grid layout, Bootstrap 4's official documentation has all the information you need. https://getbootstrap.com/

<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-sm">
      <img src="http://placehold.it/720x480" class="img-fluid" alt="Responsive image">
    </div>
    <div class="col-sm">
      <img src="http://placehold.it/720x480" class="img-fluid" alt="Responsive image">
    </div>
    <div class="col-sm">
      <img src="http://placehold.it/720x480" class="img-fluid" alt="Responsive image">
    </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

Utilizing a mathematical equation stored in JSON within a JavaScript environment

I'm in the process of creating a conversion calculator and I want to save the formulas and references in JSON format. Unfortunately, I'm uncertain on how to interpret the variable as a mathematical operation. JSON var JSON = { "conversio ...

javascripthtmljson

Duplicate multiple "li" elements using jQuery and place them in a designated position within the ul element, rather than at the end

I am currently working on developing a dynamic pagination bar. This pagination bar will dynamically clone the "li" elements based on a number received from an external webservice. Here is the structure of my pagination element: <ul class="pagination"& ...

javascriptjqueryhtmlcss

How can I enable the "Open in a new tab" functionality while utilizing ng-click?

I've encountered an issue with my HTML table where each row is supposed to link to a different page, providing more detailed information. However, because I am using angularjs and utilizing ng-click on the rows, I am unable to right-click and select & ...

htmlangularjsangularjs-ng-click

Tips for personalizing your Magento 2 theme

As someone new to Magento 2 and front-end development with a basic knowledge of HTML and CSS, I am eager to customize the blank theme in Magento 2 to gain a deeper understanding of how things work. However, despite reading through the documentation, I am u ...

cssxmlmagento2

What is the best method to retrieve duplicate fields from a database in HTML5?

this.db.transaction(function (tx) { tx.executeSql('SELECT tsk.*, cont.firstName, cont.lastName ,cont1.firstName, cont1.lastName, list.listId FROM tbl_tasks tsk, tbl_contacts cont,tbl_contactequests cont1, tbl_lists list WHE ...

sqlitehtmlenyo

Effortless sliding panel that appears on hover and vanishes when mouse is moved away

I am in the process of creating a menu for my website that utilizes linkbuttons which trigger additional linkbuttons to slide down upon hover. The desired effect is a smooth sliding panel that appears when hovering over the linkbutton, and disappears when ...

javascriptjqueryhtmlcss

Achieving a seamless scrolling effect using CSS

I recently completed the design of a basic website that includes both mobile and desktop versions. However, I am looking to incorporate some animation into the site to enhance its appearance. One specific feature is a "go up" link at the bottom of the mob ...

htmlcss

Struggling to align h2 in div using bootstrap

Hello everyone! Can anyone help me figure out what I'm doing incorrectly? <div class="col-4" style=""> <h2 class="text-center vertical-center">Insert text here</h2> </div> I've attempted ...

cssbootstrap-4bootstrap-5

Tips for placing a background image within a button

Here is the CSS code I am currently using: .physButton:before { content: " "; display: inline-block; background: url("../theImages/ste.png") no-repeat; height: 38px; line-height: 38px; vertical-align: middle; width: 52px; / ...

htmlcss

Centralized and secure masthead

Currently, I am focusing on showcasing my portfolio at www.bbellmedia.com/mywork The specific requirement I have is to center the text 'Bryan Bell' and ensure that it remains fixed even when the user scrolls. Can anyone suggest the most effecti ...

htmlcsspositioning

What is the best way to spin a div HTML layer?

I'm trying to modify a Div layer that looks like this: ... <style type="text/css"> <!-- #newImg { position:absolute; left:180px; top:99px; width:704px; height:387px; z-index:1; background-image:url(../Pictures/rep ...

javascriptcsshtml

JQuery Searchbar Failing to Hide Divs as Intended

I'm currently facing an issue with my <user-panel> elements, which are dynamically created using ng-repeat. Each of these elements contains child divs with the class user-panel-name. I've been attempting to use the text within these name di ...

jqueryhtmlangular

Conceal an element within the initial row of the table

Below is the table structure: <table id="mytable"> <tr> <td>name</td> <td> <a id="button1" class="button">link</a> </td> </tr> <tr> <td>name2</td> ...

jqueryhtmlcss

What could be causing selenium to struggle in locating specific text on a webpage

In my webpage, I have a "tree menu" that can be opened by clicking on a button. Once the tree menu is open, I need to follow certain steps and click on different titles. For example, I would click on "19,20", then "may", and finally "2". At the top of the ...

pythonhtmlseleniumtestingxpath

How can I use Jquery to loop through each combobox on the page and delete those with a specific class name?

I am currently dealing with a page that contains multiple combo-boxes. Each combo-box has a default option set as empty, which is given the class name 'hide'. This functionality seems to work perfectly in Chrome and Firefox, as the hidden options ...

javascriptjqueryhtml

A method designed to accept an acronym as an argument and output the corresponding full name text

Having trouble with my current task - I've got an HTML file and external JS file, and I need a function that takes an element from the 'cities' array as input and returns a string to be used in populating a table. I've set up a functio ...

javascripthtml

Using div elements with a data attribute labeled as title in order to implement an accordion feature

Here is the structure I am working with to display titles before the corresponding div with data-attribute. I am aiming to achieve this layout: 1st Title 2nd Title 3rd Title 4th Title When "1st Title" is clicked, the layout should transform into: 1s ...

jqueryhtmlcssaccordion

Transferring an HTML file to a destination stream

Currently, I'm in the process of constructing a proxy server. One of the tasks I'm tackling involves blocking specific URLs. I have developed a simple HTML page that is supposed to display whenever a blocked URL is requested, but unfortunately, ...

javahtmlproxyserver

Guide to incorporating external CSS and JavaScript into an Angular 2 project with Express.js and Node.js

As a newcomer to Angular2 and NodeJs, I am eager to learn how to integrate external CSS and JS in an Angular2 and Nodejs express app. Specifically, I am looking to integrate a bootstrap admin theme into my Nodejs application. The screenshots below provide ...

javascriptcssnode.jsangularexpress

Tips for showing the data from a JSON object with numerous arrays in Angular HTML

I managed to create a JSON object by parsing CSV file fields using the papa Parse library. Now, my goal is to showcase this data on an HTML page. However, I'm struggling with how to extract the arrays from the JSON object and transfer them into a vari ...

javascripthtmljsonangulartypescript