How to showcase content on bootstrap across varying screen dimensions

When designing my website, I envisioned having three different options presented upon entering the site. Depending on the size of the screen, I wanted to display varying content.

For XL screens, I wanted all content to be visible, similar to the picture.

https://i.sstatic.net/8dGVH.png

For MD screens, I aimed to hide the pictures and display 2 rows. https://i.sstatic.net/zouNs.png

For XS screens, I wanted to show content in 2 columns. https://i.sstatic.net/oeqjs.png

I managed to achieve the desired layout for XL screens with the code 

<div class="col d-none d-xl-block d-xxl-none ">

However, I am unsure how to implement the other two options successfully. I tried the following code for both:

<div class="row">
            <div class="col-sm-3">

What am I missing in order to make it work?

htmlcssbootstrap-4bootstrap-5

Answer №1

To achieve the desired layout, you should follow this structure:

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4 col-xl-4  col-xxl-4">
      The Wire...
    </div>
    <div class="d-none d-sm-none d-md-none d-lg-block col-lg-4 col-xl-4 col-xxl-4">
      images
    </div>
    <div class="col-12 col-md-6 col-lg-4 col-xl-4  col-xxl-4">
      list
    </div>
  </div>
</div>

Furthermore, based on your description - you mentioned 2 rows in MD and 2 columns in XS - it seems it should actually be the opposite (as shown in your images).

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 /deep/ and the triple greater than symbol (>>>) within Angular 2

After researching the /deep/ and ::shadow selectors, I've come across conflicting information. In a discussion on Stack Overflow: What do /deep/ and ::shadow mean in a CSS selector? It was noted that Chrome has deprecated the /deep/ combinator and i ...

cssangularcss-selectors

Chrome has some issues with resizing the SVG Pattern element

Utilizing inline svgs, I have a svg circle filled with a pattern that should cover 100% of the container size. However, when the parent element is resized via JavaScript, the pattern no longer reflects the 100% width and height as expected. This issue seem ...

javascripthtmlcssgoogle-chromesvg

What is the best way to align icons in the center alongside text or paragraphs using react?

I'm struggling with centering my icons like <GrTools size="30px"/> next to my text. It's causing some alignment issues with my styled components. Here is my JavaScript: <div id='paragraph' className="container"> ...

htmlreactjscenterreact-icons

Guide on setting the BackColor of a table cell based on a database value dynamically

In the project I am currently working on, there is a request to change the background color of specific table cells based on their values. In order to achieve this, I am handling the RadGrid_ItemDataBound event and attempting to set the BackColor property ...

cssvb.netcellradgrid

Utilizing ng-class with Boolean values in AngularJS

On my page, I have a pair of buttons that control the visibility of elements using ng-hide and ng-show. <a ng-click="showimage=true" ng-class="{ 'activated': showimage}" class="button">Images</a> <a ng-click="showimage=false" ng-c ...

javascriptcssangularjs

Preserving data in input fields even after a page is refreshed

I've been struggling to keep the user-entered values in the additional input fields intact even after the web page is refreshed. If anyone has any suggestions or solutions, I would greatly appreciate your assistance. Currently, I have managed to retai ...

javascriptjqueryhtmlsession-storage

Utilizing jQuery/Ajax to send an ID parameter to a PHP script

This code is where the user interacts. <html> <head> <title></title> <script src="jquery-1.9.1.js"></script> <script src="jquery.form.js"></script> </head> <body> <?php include 'con ...

javascriptphpjqueryhtmlajax

Preventing background style from taking precedence over backgroundColor style in React's inline styling

What causes background to take precedence over backgroundColor in React inline-style? In this scenario, the lack of a specified green background-color results in the background gradient with transparency transitioning into white rather than green within t ...

javascriptcssreactjs

Using a nested table will override the "table-layout: fixed" property

I'm currently working on creating a tabular layout and I'm in need of the following: 2 columns with variable widths Columns that are equal in width Columns that are only as wide as necessary After some research, I discovered that by setting "t ...

htmlcsshtml-table

Customize the appearance of the bootstrap nav-bar by assigning unique background colors to each dropdown menu

I'm looking to set unique background colors for each dropdown in a Bootstrap nav-bar using CSS. .mynavbar .dropdown ul.dropdown-menu:nth-child(1) { background-color: #59b057; } .mynavbar .dropdown ul.dropdown-menu:nth-child(2) { background-col ...

htmltwitter-bootstrapcss

Storing information when an object is indexed in a for loop, to be retrieved later when

My JavaScript code includes an AJAX call that takes user input from a form and uses it to search for a JSON object. The matching objects are then displayed in a datalist successfully. Everything is working well so far, but now I want to extract specific f ...

javascripthtmljsonajax

What are the steps to add border styles to the top and bottom rows in a tanstack expandable react table?

In my project, I am utilizing the combination of Material UI and React Table. Recently, I was asked to add an expandable row, and I successfully implemented that feature. Once a user expands the row, we display additional table rows based on the data. If ...

cssreactjsmaterial-uicss-selectorsreact-table

Accessing a specific segment of HTML using Java

Attempting to navigate through a bunch of HTML, I'm aiming to isolate specific sections. I'm specifically looking to retrieve 'THISISTHEBITIWANT' from the following HTML code. <li class="aClass"> <a href="example/THISISTHEB ...

javahtmlstringreplace

Distinguishing each unique JavaScript property within an array of objects

I've been struggling with this problem for quite some time. I have an array of objects, focusing on the "00" object at the moment, and I am trying to group together the bestScore properties in a specific way: .. User Group apple .. User Group ba ...

javascriptjqueryhtml

Problem with traversing from parent to children elements using jQuery selectors

<form data-v-c4600f50="" novalidate="novalidate" class="v-form"> <div data-v-c4600f50="" class="pr-2" question="Top Secret4"> <div data-v-c4600f50="" f ...

javascripthtmljquerycss

Ionic directive ng-disabled not functioning as expected

Upon running the Ionic application, I noticed that the radio button is not being disabled even with the use of ng-hide.<input type="radio" ng-disabled="true"> ...

htmlangularjsionic-framework

Streaming RTMP video through a WebView

Currently, I am working on implementing rtmp streaming using WebView. To achieve this, I referred to the code provided on Stack Overflow under this link The easiest way to play an audio RTMP stream in Android, which was shared by a user named Club. After a ...

javascriptandroidhtml

Adding a div to a different webpage using jQuery

I am currently working on a small admin panel and I was curious if it is feasible to use jQuery to add a div box inside the index.php file after clicking a button in the panel? If this is possible, an example demonstrating how to do so would be greatly ap ...

phpjqueryhtmlpaneladdition

Is it possible to eliminate the border on an image input button?

Here is the code I've been working on: HTML: <!DOCTYPE html> ... <form> <input type="image" value=" " class="btnimage" /> </form> ... CSS: .btnimage { width: 80px; height: 25px; background:url('C:/Users ...

htmlcss

Unable to transfer card from the top position in the screen

Utilizing Tailwind (flowbite) for the frontend of my project, I encountered an issue where the Navbar was overlapping the Card. I attempted using mt-8 to resolve the problem, but it did not yield significant changes. What adjustments should I make to achi ...

cssnext.jstailwind-cssstyling