Custom div table design that adapts to different screen sizes

After attempting to create a table using a bootstrap element without success, I resorted to making a div table instead.

Below is the image:

https://i.sstatic.net/44l6Z.png

Here is the code snippet:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row border-top bg-primary pt-3 pb-0 mt-5">
      <div class="col-12">
        <p class="text-white"><b>Lorem ipsum</b></p>
      </div>
    </div>
    
    (Code continues...)

I am now seeking to make this layout responsive. Any suggestions on implementing a horizontal scroll or other methods are welcome and appreciated!

htmlcsshtml-tablebootstrap-4responsive

Answer №1

In bootstrap, the col class will divide a row into the number of columns you specify. To ensure responsiveness, define the width of each element for different screen sizes using classes like col-sm-12 (full width on small devices), col-md-6 (two column grid for medium screens) and more. Remember, Bootstrap follows a mobile-first approach.

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

Arranging column contents neatly on small screens

Although there are similar answers available, I want to address those who are trying to prevent their columns from stacking on XS display. Despite having two columns, the content is still stacking at certain displays. This issue is occurring while using B ...

csstwitter-bootstrapbootstrap-4

Tips for positioning a div to the left once the minimum width has been reached?

<div id="container"> <div id="subsSection"> <div class="leftSection">ss</div> <div class="rightSection">ss</div> </div> </div> (1) My goal is to have the subsection div centered on the ...

htmlcss

Guide on transferring the td id value to a different page

document.getElementById('scdiv').innerHTML=Quantity <td id="scdiv"> </td> document.getElementById('quantitydiv').innerHTML=mrp <td id="quantitydiv"> </td> I am currently facing an issue where the code is being d ...

javascriptphpjquerycssajax

Browser crashes due to jQuery while loop issue

When using my jQuery code with a while loop to post data to a span ID, I am able to retrieve the span data but the post process crashes. while (ilkDeger < toplamDeger) { var yukle ="yukle"+ilkDeger ; var tekalan = &ap ...

phpjqueryhtmlajaxpost

There was a problem compiling the template and an error occurred in the mounted hook

I am encountering a slight issue with testing Vuejs and I am unsure how to resolve the error. Error1: "[Vue warn]: Error compiling template: Component template should contain only one root element. If you are using v-if on multiple elements, use v-e ...

htmlvue.jsvuejs2

Selenium extracts valuable content, specifically the text within the <h2> tag of a webpage,

I am currently working on a project that involves entering a postcode (which will eventually be a list) into a website and saving the obtained results to a CSV file using a loop to move on to the next. However, I am encountering difficulties when it comes ...

htmlpython-3.xselenium-webdriver

Outlook email rendering problem with HTML template

I'm having trouble with my HTML-Email template not displaying correctly in Outlook. When viewed in Gmail: https://i.sstatic.net/L8CYl.png But when viewed in Outlook desktop: https://i.sstatic.net/yONWP.png <table align="center" border="0" ...

htmlcssoutlookhtml-emailemail-templates

I am encountering an issue where the key is not located in the response array in PHP, causing my JavaScript chart to remain

Hey there! I'm currently working on a school project and could really use some assistance. The task at hand involves creating a web interface that can interact with an endpoint in order to: - Authenticate a registered user to retrieve an authenticati ...

javascriptphphtmlhighcharts

Incorporating SCSS directly in React component along with material-ui styling

I'm having trouble incorporating styles into my React component. I'd prefer to use SCSS instead of either using the withStyle function or importing a plain CSS file into a JS file. For instance, I would like to import my SCSS file into ButtonCom ...

javascriptcssreactjssassmaterial-ui

Modify the color of a hotspot area when the mouse is hovered over it

I have a task of dynamically generating HotSpots on an Image Map control. Below is the code snippet that accomplishes this: // Creating a RectangleHotSpot programmatically. RectangleHotSpot Rectangle1 = new RectangleHotSpot(); Rectangle1.Top = 50; Rectang ...

jqueryasp.netcssimagemap

A CSS pseudo-class similar to :empty that disregards hidden children

Are you familiar with the :empty pseudo-class? This pseudo-class targets elements that have no children at all. But is there a way to target elements that have no visible children (excluding those with display: none)? If such a pseudo-class doesn't e ...

csscss-selectorspseudo-class

Insert JavaScript into this HTML document

I am looking to integrate the "TimeCircles JavaScript library into my project, but I am facing some challenges in doing it correctly. I plan to include the necessary files at the following location: /js/count-down/timecircles.css and /js/count-down/timecir ...

javascriptjqueryhtml

Having trouble converting the raw HTML input into a .doc file using cloudconvert

I am looking to convert HTML text into a doc file. I attempted to use the CloudConvert API console at to create a request. In the Code Snippets > HTML form section, it provided me with the following form: <form action="https://api.cloudconvert.com/ ...

htmldocxdocconverterscloudconvert

What is the method for activating or deactivating pointer events for a particular section of an element?

Is it feasible to deactivate pointer events for only a portion of an element rather than the entire element? For instance, as shown in the image below.. https://i.sstatic.net/rnS7M.png Perhaps one could utilize another element to cover the specific area ...

htmlcss

Tips for utilizing jQuery to identify an image that is being hovered on?

Concept My goal is to create an effect where a user hovers over an image and a transparent overlay div appears on top of it. This overlay div starts with a height of 0px and should increase to half of the image height upon hover. The hover functionality ...

javascriptjqueryhtmlcss

"Utilizing jQuery to enable smooth scrolling of entire windows with every twist of the mouse, similar to the

Does anyone have tips on how to achieve a scrolling effect that covers 100% of the window, similar to what is seen on this website? My website currently has vertical scrolling, with each div set to 100% width and height. I have implemented an anchor syste ...

javascriptjquerycss

Guide onsetting up an Autocomplete textbox on a webpage using data from a database by utilizing a combination of Java servlet, jQuery, JSON objects, and an ajax request

Despite trying various methods, I am struggling to achieve this task. As a beginner in the realms of jQuery, JSON, and AJAX, I have written a servlet that connects to my database and fetches user IDs from a specific table. Additionally, I have designed a J ...

javajqueryhtmlajaxjson

I seem to be having trouble with my dropdown menu, can anyone help me figure out what I might be doing wrong

I'm new to web development and I'm trying to create a dropdown menu. The issue is that when I hover over a specific element, it takes up more space than expected. My goal is for it to appear below the "shop" element. I'm not sure where I&a ...

htmlcssdrop-down-menu

Customize the color of the arrow in Bootstrap

I would like to update the color of the arrow buttons. .carousel-control-prev-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f00' viewBox='0 0 8 8' ...

htmlcssbootstrap-4

Is it possible to retrieve stored colors from the Back End and incorporate them into an SCSS file?

Currently, I am in the process of restructuring my code to make it more clear and easier to maintain. I have a concept in mind, but I am struggling with how to implement it effectively. To enhance cleanliness and efficiency, I plan to create a separate _co ...

cssreactjssassless