Applying class to target specific screen size in Bootstrap

I've been utilizing bootstrap for my project.

My objective is to assign multiple classes based on screen size, such as sm-col and xs.col.

For example, let's say I have a text id

<div id="text" class="xs-format lg-format ..."></div>

style = 
.sm-format{
 column-count: 3;
}

.xs-format{
 column-count: 1;
}

.lg-format{
 column-count: 5;
}

The desired outcome is to display the text in 1 column on xs screens, in 3 columns on sm screens, and in 5 columns on lg screens.

Any suggestions?

Best Regards, n00n

csstwitter-bootstrapbootstrap-4column-count

Answer №1

If you're interested, Bootstrap offers the option of utilizing card columns. However, keep in mind that to achieve more than 3 columns on larger screens, modifications to the media queries will be necessary.

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

Tips for positioning text on the left and right sides of a div in HTML styling

I am struggling with positioning two pieces of text within a div. Despite having some styling already in place, the text is currently displaying one after the other on the left-hand side. I want to position one piece of text to the left and another to the ...

javascripthtmlcssreactjs

Default to collapsing all items in ng-bootstrap

Two components are involved here: Entity management and company. Currently, when I click on entity management, the company section will be hidden. But what I actually want is for the company to be collapsed by default. Then, when I click on entity manage ...

bootstrap-4ng-bootstrap

CSS: Achieving vertical centering without specifying a fixed height using line-height. Is it possible?

Using line-height to vertically center text within an inline-element is a technique I often employ. Here's a demo I created: body, section { width: 100%; } section { background-color: lightGrey; } #wrap { margin: 30px auto; width: 100%; ...

htmlcss

Tips for creating a cursor follower that mirrors the position and size of another div when hovering over it

I am trying to create a cursor element that follows the mouse X and Y position. When this cursor hovers over a text element in the menu, I want it to change in size and position. The size of the cursor should match the width and height of the text being h ...

javascripthtmljquerycss

What is the best way to target the final child element of a specific CSS class?

I am working with an HTML table and my goal is to remove the border-bottom from the last row, excluding the row with class .table-bottom: <table cellpadding="0" cellspacing="0" style="width:752px;" class="table"> <tr class="table-top">< ...

htmlcsscss-selectors

The onclick event seems to be malfunctioning on the website

My goal is to implement a modal box that appears when a user clicks a button and closes when the user interacts with a close button within the modal box. I have created two functions for this purpose: check() : This function changes the CSS of an element ...

javascriptcsshtmluser-interface

When a website is deployed to an application, the process includes MVC bundling and managing relative CSS image paths

When trying to convert relative image paths to absolute paths, there are numerous queries on stackoverflow addressing this issue. For example, take a look at this thread: MVC4 StyleBundle not resolving images This question recommends using new CssRewrite ...

cssasp.netasp.net-mvc-4bundlebundling-and-minification

Ways to modify the .MuiSelect-nativeInput element within Material-UI

const styles = makeStyles((theme) => ({ root: { margin: "0px 20px" }, textStyle: { fontFamily: "Comfortaa", }, container: {}, textField: { fontFamily: "Comfortaa", }, dropDownFormSize: { width: &qu ...

cssreactjsmaterial-uicss-selectorsjsx

How can you make a Tempory Drawer wider in Material Components Web?

Increasing the Width of a Temporary Drawer in Material-components-web Greetings! I am currently facing an issue with Material-components-web In the provided demo here, I would like to extend the width of the Temporary drawer to accommodate additional co ...

javascripthtmlcssmaterial-designfrontend

How to effectively use flexbox to resize child elements in a CSS layout

My goal is to create a layout where a child element fills the entire flex box of a flex layout. Here is an example of the HTML structure I am using: <div class="parent"> <div class="child1"> should have 100px height </div&g ...

htmlcssflexbox

What is the step-by-step process for executing the following functions: 1. magnify -> 2. spin 360 degrees -> 3. restore to original size before magnification -> 4. switch colors on and

Can you show me a demo featuring the following functions in order: 1. enlarge -> 2. rotate 360 degrees -> 3. resize to original size -> 4. change color (toggle) $(document).ready(function() { $('.tlist td div').click(function() { ...

javascriptjquerycssjquery-uijquery-animate

The background image item in C# Outlook Mail does not repeat as expected when used inline

Hey there, I need to set up an email campaign with data in the mail body and a background image. However, I'm running into issues with the background image repeating. When I try to prevent repetition using background-repeat: no-repeat;, the image does ...

c#htmlcssoutlook

Issue with Bootstrap 4 Navbar collapsing and not expanding again

Help needed! My navigation bar collapses when the window is resized, but clicking on the hamburger icon does not open it back up. I have included my code below. Can someone please provide guidance on how to expand the collapsed navbar? <html lang=&quo ...

javascripthtmlcssbootstrap-4

Potential Issue with CSS General Sibling Selector

It seems like I have encountered a potential bug with the General Sibling Selector. When I use p ~ div, the selector does not work as expected. However, when I replace p with the specific class name text_paragraph, it works fine. You can view my code and f ...

htmlcss

Customize your Bootstrap 4 navbar to align on the right with a button that remains visible on mobile devices

I'm working on setting up a navbar with three elements. I want to have a left-aligned brand, a group of right-aligned links that will collapse on smaller screens, and an additional button that stays visible at all times. To achieve the alignment of t ...

htmlcssbootstrap-4

How to implement an 8-column layout within a 12-grid bootstrap framework?

Hey guys, so I've been trying to recreate this page with Bootstrap and it's all going smoothly except for this one part. Here is the link I'm referring to: I have 2 questions: Which HTML element should I use for these lines? Any idea on h ...

htmlcsstwitter-bootstrap

What is the best way to ensure a specific section of a website remains visible and fixed at the bottom of the page

I want to set up a simple toolbar with divs and uls containing both anchors and tabs. The position of the toolbar needs to be fixed at the bottom of the page. <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...

javascriptjqueryhtmlcss

Try employing an alternative angular controller when working with the bootstrap modal

I am trying to implement a bootstrap modal in my main HTML file, and I need some help on how to call another Angular controller for the modal. The button that triggers the modal is within a div that already has an Angular controller, and this is causing th ...

javascriptangularjstwitter-bootstrapbootstrap-modal

Modify the color scheme of an HTML webpage

Looking to enhance my HTML page with a new feature. The page is responsive and currently using Bootstrap CSS and JS. My goal is to allow users to change the color of the page dynamically by selecting a background or text color. Check out this example link ...

javascriptjqueryhtmlcssplugins

Tips for adjusting font size automatically to fit within its parent container every time

On my blog, the post titles are displayed in a div with a video playing in the background. The length of the title varies, ranging from 2 words to over 20 words. When the title is too long, it may overflow from its parent container where the video is playi ...

javascriptjqueryhtmlcsstwitter-bootstrap