Tips for customizing the appearance of only the first column in a dynamic Bootstrap row

I'm in the process of designing a Shopping Cart using Opencart. Here is the key part of code found in the Category.tpl file where products are being updated

  <div class="row">
    <?php foreach ($products as $product) { ?>
    <div class="product-layout product-list col-xs-12">
      <div class="product-thumb">

        <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" class="img-responsive" /></a> </div>
        <div>

Below is the CSS being generated

<div class="row">
              <div class="product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12">
                 <div class="product-thumb">

             <div class="image"><a href="http://rangawoods.tryfcomet.com/index.php?route=product/product&amp;path=78&amp;product_id=194"><img src="http://rrrwoods.com/image/cache/catalog/Door/SMD-001-500x500.jpg" alt="SMD-001" title="SMD-001" class="img-responsive"></a> </div>


        <div>

My task now is to style only the first column in the row I created. How can I achieve this? I've included an image for reference.

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

csstwitter-bootstrapopencart

Answer №1

Attempt

.row div[class^="col"]:first-child {
    border: 3px solid black;
}

Illustration

.row div[class^="col"]:first-child {
    border: 3px solid black;
}
<div class="row">
  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
    one
  </div>
  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
    two
  </div>
</div>

<div class="row">
  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
    Three
  </div>
  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
    Four
  </div>
</div>

Latest: considering your rendered html, targeting all the 1st elements visible on the page based on screen resolution may not be feasible due to the placement of all cols inside a row in Bootstrap's framework.

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

If you simply want to style the first col, you can apply this code

.row .product-layout:first-child {
    border: 3px solid red;
}

https://i.sstatic.net/7ssES.png

Answer №2

Experiment with using the first child class to add a border, for example:

.row .col-lg-3:first-child{
    border:1px solid red;
}

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

Adjust divs for mobile display using Bootstrap and CSS

I have been struggling with rearranging two divs that are stacked vertically on mobile. I want the second div to appear above the first when the screen size is reduced. Despite trying various methods such as flexbox order and direction, I have not been suc ...

htmlcssbootstrap-4

Creating a separate CSS file for a CSS class that sets the width of a <div

I am looking to enhance a div element by incorporating a specific class from a separate CSS file. For example, my HTML file contains the following snippet: /* width 90% */ @media (min-width: 960px) { div.width90 { max-width: 90%; } } <div cl ...

htmlcss

Conceal a different CSS class if a certain CSS class is present on the page

I am currently working on organizing my page to distinguish between purchased and unsold products. For the items that have been bought, I am using the CSS class "winning_bid" within a div element. My goal is to hide another div with the class "price" if th ...

javascriptcsswordpress

Setting CSS3Pie margins to zero is a great way to ensure a

Here is my CSS code: .corner-wrapper { display:table; position:relative; border: 2px solid #69b0ff; margin:5px 0 5px 0; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; behavior: url("PIE.htc"); ...

internet-explorercsscss3pie

Leveraging Jsoup's CSS selector to extract the content located between specific elements

Hello all. I am currently using jsoup css selector for scraping web pages, but I am unsure of how to extract the text between two tags. Here is an example: <html> <body> <a name = "xxx" > some text here</a> <a name = "abc"& ...

htmlcssjsoup

Repositioning JQuery Autocomplete Results

I am currently integrating JQuery Autocomplete into my website, but I am encountering an issue with displaying the search results in the search form. The search form is placed within a Bootstrap 3 navbar on the main layout of the site. Embedded inside th ...

jqueryhtmlcssjquery-ui

What is the best way to pass card data between Vue.js components?

My application consists of two components: DisplayNotes.vue, which displays data in card format retrieved from the backend, and UpdateNotes.vue, which allows users to update existing data by opening a popup. The issue I'm facing is that when a user cl ...

javascripthtmlcssvue.jsaxios

Tips for optimizing the page speed of your Pixi JS app by ensuring it runs efficiently after the page loads

On my website, I implemented a dynamic gradient animation with shape-changing blobs using pixi js. The animation functions flawlessly, but the issue arises when I run page speed tests - the test assumes that the page has not finished rendering because the ...

javascripthtmljquerycsspixi.js

Using CSS transitions to animate elements with specified opacity values

My goal is to transition buttons from opacity 0 to opacity 1 with a delay, but I am facing an issue. Some of these buttons have the "selected" class which gives them an opacity of 0.35. However, when the transition starts, the buttons with the "selected" c ...

jquerycsscss-transitionsopacity

When scrolling the page, the Circle Mouse Follow feature will dynamically move with your cursor

Hey everyone! I'm currently working on implementing a mouse follow effect, but I'm facing an issue where the circle I've created moves along with the page when scrolling, instead of staying fixed to the mouse. Any suggestions or tips would b ...

javascriptjqueryhtmlcss

Is there a bug causing this div to load inconsistently in Chrome?

Currently, I am using Chrome Version 33.0.1750.154 m on Windows 7 Professional 64 bit operating system A few years ago, I developed a WordPress plugin that displays a cached and stylized Google Calendar. The plugin works fine but could use some improvemen ...

jqueryhtmlcssgoogle-chromebrowser-bugs

Is it possible to adjust positioning using just CSS?

I'm attempting to arrange these elements as shown in the image below: https://i.stack.imgur.com/tWy1I.png https://jsfiddle.net/ut1mgcLb/ HTML <div class="object1"> <div class="snax-voting-container-body"> ...

htmlcss

Steps for adding an onclick function to a collection of div elements

My current project involves utilizing the Flickr API and I am interested in creating a popup div that opens when clicking on each image. The goal is to display the image in a larger form, similar to how it's done using Fancybox. I'm looking for ...

javascriptjqueryhtmlcssflickr

Reducing the size of buttons upon page minimization in CSS and HTML

I have a group of buttons in HTML: <div class="controls"> <div id="s-controls"> <button class="control-btn" style="background-color: #2de7f6">1</button> <button class="control-btn" style="background-color: #69a6ea"> ...

htmlcss

Creating unique shapes with smooth clipping using CSS

I'm attempting to design a shape similar to the one shown below using CSS, but I've been unable to achieve it. I've experimented with the clip-path property, but the results have been jagged and not smooth. I'm curious if it's feas ...

jquerycss

Tracking time in seconds and milliseconds with a stopwatch

Greetings! I am currently working on a reaction test to measure how quickly users react, and I seem to be struggling to find the necessary resources. I am curious about creating a basic stopwatch in seconds and milliseconds that can be triggered later by a ...

javascriptjqueryhtmlcss

CSS transition effect to show content: display: block

After experimenting with different styles for another element, I added padding, height, and opacity to the div. However, there seems to be no transition effect with the current CSS code. Can anyone explain why? When a button is clicked, the class .show is ...

jqueryhtmlcss

Adjusting the speed at which a bootstrap modal dialog slides out: a comprehensive guide

Using a unique animation script (check out ) to enhance the modal dialogs on my website. Below is the CSS code I've implemented: .modal.fade .modal-dialog { -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(0.1); to ...

javascriptjquerycsstwitter-bootstrap

Element remains stationary and covers full viewport on mobile devices when the page overflows

I am looking to create a fixed element that covers the entire viewport on mobile devices (specifically Chrome and WebView). The CSS code I have is very straightforward: .full { position: fixed; left: 0; top: 0; width: 100vw; height: 10 ...

htmlcssmobilewebview

Prevent the responsive image from being cramped by the table cell

I am working with a table that has 1 row and 2 columns. The left cell of the table contains an image with its height set in em (em is defined as 2vh, so it will adjust based on the viewport height). The right cell contains text. <html> <head> ...

htmlcss