Styling with Bootstrap 4 limited to the left column

My row is dynamically filled with X items contained in a col-3 class, depending on the screen size.

Is it possible to easily style only the column that will appear on the left during screen resizing?

For example: lg screen: https://i.sstatic.net/JSTpL.png

md screen:

https://i.sstatic.net/c64Wt.png

.box{
  border: 1px solid blue;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-6 col-sm-3 col-md-2 col-lg-1">
        <div class="box">Box 1</div>
    </div>
    <div class="col-6 col-sm-3 col-md-2 col-lg-1">
        <div class="box">Box 2</div>
    </div>
    <div class="col-6 col-sm-3 col-md-2 col-lg-1">
        <div class="box">Box 3</div>
    </div>
    <div class="col-6 col-sm-3 col-md-2 col-lg-1">
        <div class="box">Box 4</div>
    </div>
    <div class="col-6 col-sm-3 col-md-2 col-lg-1">
        <div class="box">Box 5</div>
    </div>
    <div class="col-6 col-sm-3 col-md-2 col-lg-1">
        <div class="box">Box 6</div>
    </div>
    <div class="col-6 col-sm-3 col-md-2 col-lg-1">
        <div class="box">Box 7</div>
    </div>
    <div class="col-6 col-sm-3 col-md-2 col-lg-1">
        <div class="box">Box 8</div>
    </div>
    <div class="col-6 col-sm-3 col-md-2 col-lg-1">
        <div class="box">Box 9</div>
    </div>
  </div>
</div>

cssbootstrap-4

Answer №1

If you're looking to achieve a specific styling for elements based on their position, the :nth-of-type(n) selector along with media queries can help you achieve that. Here's an example:

// For large screens
@media screen and (min-width: 992px) { 
    div.yourClass:nth-of-type(4n-3){
        color:green;
        // Add any other CSS properties here
    }
}

// For medium sized screens
@media screen and (min-width: 768px) and (max-width: 991px) { 
    div.yourClass:nth-of-type(3n-2){
        color:green;
        // Add any other CSS properties here
    }
}

Sample (view in full page mode):

.rectangle {
  border: 4px solid black;
  height: 20px;
}

@media screen and (min-width: 992px) {
  div.rectangle:nth-of-type(4n-3) {
    border-color: green;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  div.rectangle:nth-of-type(3n-2) {
    border-color: green;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>


<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-4 rectangle"></div>
    <div class="col-lg-3 col-md-4 rectangle"></div>
    <div class="col-lg-3 col-md-4 rectangle"></div>
    <div class="col...
    </div>

Check out the Fiddle here!

Limitation:

An issue with this approach is that you'll need to have precise knowledge of how many elements will be in a row for each screen size and create custom CSS rules accordingly.

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

What is the HTML code to display a table and a video/image side by side?

I'm facing a challenge while trying to create a website. I want to place a table in the center of the page, with videos on either side of it. However, whenever I attempt this, the table ends up below the videos instead of being aligned with them. I&ap ...

javascripthtmlcssfrontendvisual-glitch

CSS not being applied properly in Devise(Rails) emails when sent to Gmail addresses

Upon a user signing up, I send a confirmation email using Devise's mailer view. While everything else appears to be functioning properly, the CSS for CONFIRM ACCOUNT doesn't seem to be applied at all. I've read that CSS classes cannot be use ...

htmlcssruby-on-railsdeviseactionmailer

Place a "sticky" button directly below a second "sticky" navigation bar

Within my app file, I have customized components like an appbar and various page elements: const styles = theme => ({ appBar: { width:'100%', }, }); class App extends Component { render() { const {classes} = this.props; ...

cssreactjsmaterial-ui

Modify the color of the menu in OpenCart 1.5.6.4 to give it a fresh

In the default theme of OpenCart 1.5.6.4, I am looking to change the background color of the dropdown menu which is currently defined by the background image 'menu.png' to a custom hex value. The CSS code for this section is shown below: #menu & ...

htmlcssopencart

Adjust the height of the drawer in material-ui

In my current project using react and material-ui, I am facing a simple issue that has me stumped. I am trying to create a drawer with a specific height so that it does not overlap the app bar when opened. Unfortunately, there is no built-in parameter in ...

cssreactjsmaterial-ui

I have noticed that the Javascript code is being loaded prior to the completion of my HTML/CSS page for some unknown

I am completely new to the world of web development. I'm encountering an issue where my JavaScript code (specifically alerts) is loading before my HTML/CSS page has fully loaded. I've been using sample alerts to test this out, and ideally, they s ...

javascripthtmlcssfrontend

Adding classes to index.html using VueJs based on events occurring within the components

I have been experimenting with a BS4 template that adds classes to the <html> and <body> elements based on page events. Despite trying various techniques from the Vuejs Class and Style page here, I have not been able to achieve the desired outc ...

vue.jsbootstrap-4bootstrap-vue

Hide the button when you're not actively moving the mouse, and show it when you start moving it

How can I make my fixed positioned button only visible when the mouse is moved, and otherwise hidden? ...

javascripthtmlcss

Which files do I need to import to enable custom range thumbs in Bootstrap?

Despite importing the scss/_bootstrap.scss manifest file, I am experiencing issues with Bootstrap's custom form range thumb not working. It seems to only function properly when importing dist/bootstrap.css or using the CDN. Below is my manifest file ...

csstwitter-bootstrapsassbootstrap-4

CSS for mobile devices not loading until the device is rotated

My website, redkrypt.com, is functioning perfectly on my laptop. However, I am facing an issue where the css file will only load on my iPhone 4S after I rotate it once. Once I do this, the website works both vertically and horizontally. I have tried variou ...

htmlcssiphoneresponsive-designmedia-queries

A dynamic and versatile solution for achieving uniform column heights across different web browsers using child elements

Get straight to the point. I'm looking for a solution to create a responsive two-column layout like the one shown in the image below. https://i.sstatic.net/mHhfc.png The width ratio of the .left and .right columns should always be 75/25% relative t ...

cssheight

Positioning elements in CSS relative to a specific div container

Looking for advice on how to position two images within a div using percentages relative to the parent div. Check out this fiddle for reference: http://jsfiddle.net/b9ce626s/ I experimented with setting position: absolute; on the image, but it seems to b ...

htmlcss

What are some methods for creating a Venn Diagram that includes data within each section using SVG, CSS, or Canvas?

I am attempting to replicate this visual representation using pure SVG, CSS, or Canvas drawing. So far, I have successfully created three circles that overlap and placed a label in the center of each one. However, I'm facing challenges when it comes t ...

javascripthtmlcsssvgcanvas

Detecting unutilized space in a collection of divs with varying sizes using JavaScript and CSS

To better understand my issue, I created a StackBlitz demo: https://stackblitz.com/edit/angular-aqmahw?file=src/app/tiles-example.css Screenshot My tiles can have four different widths (25%, 50%, 75%, 100%). The tiles must fit on only two lines, so if a ...

javascriptcssangularalgorithm

Ways to enable this feature to function

I am working with a div that contains multiple tables structured like this: <div id="div1"> <div id="div2"> <div id="div3"> <table id="table1"><tr><td></td></tr></table> ...

csshtml

What is the process for building a grid system similar to Bootstrap's 12-column grid using the new CSS Grid Layout?

Is there a way to implement a 12-column grid system similar to Bootstrap using CSS Grid? I am struggling to understand this new technology and would greatly appreciate it if someone could provide a demo. My goal is to create a simple grid structure resem ...

csstwitter-bootstrapgridflexboxcss-grid

Fixed position halting in a specific area

I have a fiddle where the black box is fixed on the page, but it overlaps the map when scrolling. I want to stop the black box from overlapping the map. How can I achieve this? CSS: .item{ background:#eee; padding:10px; width:50%; margin-bottom:15px;} .n ...

htmlcss

Enhance the appearance of your printed pages by incorporating borders with the help of wkhtml

Is there a way to print a square border on each page of a multi-page PDF rendered using wkhtmltopdf, similar to the question asked here: Add borders to each printed page with CSS? I generate an HTML page as a variable and utilize snappy from https://githu ...

htmlcssprintingwkhtmltopdf

"Activate the Bootstrap accordion to enlarge every section at once

I have developed a unique accordion feature using data from my database table. Each row represents a new card, with the first column acting as the header to expand the card, and the remaining columns serving as the collapsible content. While this setup fu ...

phpsqlbootstrap-4

Clearing data in a JQuery DataTable after loading it with PHP

Once the table is loaded with data, it seems to clear the information after a few milliseconds and displays a row with the message "No matching records found" https://i.sstatic.net/UPEwC.gif HTML Code <table id="table"> <thead> & ...

htmljquerybootstrap-4datatable