I am looking for a way to create responsive boxes specifically for lg, md, and sm modes in Bootstrap 5

I need my boxes to be col-12 in col-sm and col-6 in col-md. Can someone please advise me on what steps I should take? If there is a tutorial addressing this issue, kindly share the link with me. Thank you.

<div class="content container-fluid col-lg-12 col-md-12 my-2 col-sm-12">
    <div class="row">
      <div class="col-lg-3 col-sm-12 col-md-6 p-3">
        <div class="boxs pb-2">
          <img src="./images/images (1).jpeg" alt="">
          <a>example1</a>
        </div>
      </div>
      <div class="col-lg-3 col-sm-12 col-md-6 p-3">
        <div class="boxs pb-2">
          <img src="./images/images (2).jpeg" alt="">
          <a>example2</a>
        </div>
      </div>
      <div class="col-lg-3 col-sm-12 col-md-6 p-3">
        <div class="boxs pb-2">
          <img src="./images/images (3).jpeg" alt="">
          <a>example3</a>
        </div>
      </div>
      <div class="col-lg-3 col-sm-12 col-md-6  p-3">
        <div class="boxs pb-2">
          <img src="./images/images.jpeg" alt="">
          <a>example4</a>
        </div>
      </div>
    </div>
  </div>
htmlcssresponsive-designbootstrap-5col

Answer №1

Bootstrap prioritizes mobile devices, so using col-12 ensures compatibility from smartphones to desktops. To maintain consistency, col-sm-12 will always equate to col-12 from small (576px) to large screens. It's best practice to start with a specific column size and then add more classes in order of size (sm>md>lg>xl), like this:

<div class="row">
    <div class="col-12 col-md-6 col-lg-3">
        <img src="..." alt="...">
    </div>
</div>

Regarding the "boxs" class, could you provide the CSS for it? Understanding your styling would help tackle the issue. Also, for your first div named "content," you can simplify by just using col-12 instead of including all size prefixes (sm, md, lg) for a single size of 12.

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

Guide on interpreting unordered lists and returning the outcome to Java

The xhtml-file provided below showcases a structure for content creation: <ui:composition xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" temp ...

javajavascripthtmljsf

The way in which the DOM responds to adding or deleting elements from its structure

My typical method for displaying a popup involves adding an empty div tag and a button to the webpage: <div id="popupDiv"></div> <input type="button" id="popupButton" /> I then use jQuery to handle a button click event, make an ajax cal ...

javascriptjqueryhtmldom

Explore the versatile Bootstrap Table for class

Recently, I created a table with the following structure: <table id="table" class="table table-bordered table-hover"> <thead> <tr> <th data-field="id" class="hidden">ID</th> <th data-fie ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-4

The link tag is failing to load the external CSS file

Starting a fresh project using Angular and encountering an issue. When attempting to load an external CSS file with <link>, it fails to work. However, using an internal style with @import does work! Not working with : <link rel="stylesheet" type= ...

htmlcssangularjsnginx

Currently, I am in the process of constructing a DSpace repository on an Ubuntu 16.04

I have successfully set up a DSpace repository on Ubuntu 16.04 LTS by following the installation instructions provided in this manual. After deploying the webapps, I encountered an issue when trying to add new items. Upon clicking the search link, I recei ...

csssolrubuntu-16.04dspace

What is causing my `<nav>` buttons to be left-aligned?

The attempt to center the buttons in the viewport using text-align:center for nav, ul, and li has proved ineffective. The alternative of nav {text-align: left;} was no more successful. CSS Snippets: #container { width: 100%; background-color: bla ...

htmlcss

Using regular expressions to search for HTML tags in PHP may result in empty tags being overlooked

I have a question about using regular expressions to remove hidden tags along with the ending tag. It appears to be working, but there is one issue I am facing. After removing the elements, it leaves behind "<>" for all the found elements. Here is t ...

phphtmlregexforms

Filtering input that is compatible with Firefox

Attempting to restrict certain special characters (excluding "_" and "-") from being used in a text input field has been a bit of a challenge. I initially tried using regex filtering by pattern, but it didn't work as expected. Then I turned to dynami ...

javascriptjqueryhtmlfirefox

Retrieving information from a JSON file and dynamically displaying it on an HTML page using JavaScript

I've been working on pulling data from a JSON file to display on my website. Following this helpful guide at: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON, but unfortunately, I'm facing an issue where nothing is showing ...

javascriptjqueryhtmlarraysjson

Steps for generating an HTML button when an Angular function evaluates to true

I am working on a table in HTML that uses ng-repeat to display data. Here is the code snippet for this table: <tbody> <tr dir-paginate="x in serverData | filter:filterData | filter:filterData | itemsPerPage: itemPerPageValue | order ...

htmlangularjs

Empowering your website with Bootstrap 5: Dynamic Burger Menu Button

Hello everyone! I am new to web programming and I am currently working on creating a responsive navbar with a burger button that opens a dropdown menu instead of the usual menu. The button is showing up and the dropdown items appear to be underneath, but f ...

navbardropdownbootstrap-5

Troubleshooting CSS Text Display on HTML5 Video for Mobile Devices

I am currently working on positioning text and a button over an HTML5 video without using media queries to address mobile display issues. The problem arises when using the car-image-overlay class from Bootstrap 4 to show the div containing the text over th ...

csshtmltwitter-bootstrapbootstrap-4

Is it possible to activate the nearby dropdown based on the user's selection?

On my html webpage, I have a form that consists of three dropdown menus each with different options: The first dropdown (A) includes choices from 1 to 6, as well as 'not set'. The second dropdown (B) allows selections from 1 to 7, and also has ...

javascriptjqueryhtmldrop-down-menu

Effortlessly retrieving the id attribute from an HTML tag using jQuery

Currently, I am encountering an issue with a code snippet that is designed to extract the value from an HTML tag. While it successfully retrieves a single word like 'desk', it fails when attempting to do so for an ID consisting of two or more wor ...

javascriptjqueryhtmltags

MUI Gradient Tracked Button

Take a look at this Codepen example I created. It showcases a hover effect where the gradient follows the mouse cursor. In order to achieve this effect, I have defined two CSS variables - --x and --y, to keep track of the mouse position on the button. The ...

javascriptcssreactjstypescriptmaterial-ui

Issue with table sorting functionality following relocation of code across pages

I had a working code that I was transferring from one webpage to another along with the CSS and JS files, but now it's not functioning properly. <head> <link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}assets/css/style.css"> ...

javascriptjqueryhtmlcssdjango

Ways to change the role link in child elements inherited from the parent in terms of Accessibility

How can I create a tooltip with dynamically added tooltip content div requiring a role link for the aria label to be appended as needed? The initial HTML of the tooltip before expansion is: <div class="tooltip" tabindex="0" aria-expa ...

javascripthtmlaccessibilitywai-arianvda

Creating Radial Fades with CSS3

Seeking guidance on creating a background similar to the one shown here using just CSS. I believe it can be done, but I struggle with CSS3. The goal is for the background to be compatible with all modern browsers, not overly concerned about support for br ...

css

Capturing the action phase in Liferay to change the cursor to 'waiting' mode

I'm currently working on a large Liferay project and have encountered a specific issue: Whenever something in the system is loading or processing, I need to change the cursor to a waiting GIF. While this is simple when using Ajax, there are many inst ...

javajavascriptjquerycssliferay

Ways to implement CSS on a parent element by manipulating its child element

Hello, I am looking to apply CSS to a parent element based on its child. <li> <div> <label> <b style="display: none;">Name and Date of Event*: </b> </label> </div> </li> ...

javascriptjqueryhtmlcss