How can I style a div to include a 'bottom tab' using CSS?

I am in the process of designing a series of Bootstrap columns to replicate the layout of a website I have been provided with.

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

These columns feature a blue border with a particularly thick border at the bottom. However, using a border can impact the dimensions and available space, so I attempted to create a nested div within it and utilize background-color with width:100%, but this approach did not yield the desired results.

Is there a more effective method for achieving this layout?

Thank you.

.featuredCatalog {
  border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  border: 5px solid #00AEF0;
}
.shopTab {
  background-color: #00AEF0;
  width: 100%;
  min-height: 100%;
  margin: 0;
}
<div class="row">
  <div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
    <img class="img-responsive" src="https://placehold.it/191x131">
    <div class="shopTab">
      <h4>Shop Now</h4>
    </div>
  </div>
  <div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
    <img class="img-responsive" src="https://placehold.it/191x131">
    <h4>Shop Now</h4>
  </div>

  <div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
    <img class="img-responsive" src="https://placehold.it/191x131">
    <h4>Shop Now</h4>
  </div>

  <div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
    <img class="img-responsive" src="https://placehold.it/191x131">
    <h4>Shop Now</h4>
  </div>

  <div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
    <img class="img-responsive" src="https://placehold.it/191x131">
    <h4>Shop Now</h4>
  </div>
</div>

htmlcsstwitter-bootstrap-3bordermultiple-columns

Answer №1

Implement the following code snippet to resolve your problem and achieve the desired product display as shown in the image.

.shopTab {
  position:absolute;
  bottom:0;
  background-color: #00AEF0;
  width: 100%;
  height: 26%;
}

.product-display {
    position: relative;
    border-radius: 10px;
    border: 5px solid #00AEF0;
    margin: 10px auto;
    height: 160px;
    max-width: 160px;
}

.product-display img{
    display: block;
    width: 100%;
    height: 74%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
    <div class="product-display">
      <img class="img-responsive" src="https://placehold.it/191x131">
      <div class="shopTab">
        <h4>Shop Now</h4>
      </div>
    </div>
  </div>
  <div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
    <div class="product-display">
      <img class="img-responsive" src="https://placehold.it/191x131">
      <div class="shopTab">
        <h4>Shop Now</h4>
      </div>
    </div>
  </div>

  <div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
    <div class="product-display">
      <img class="img-responsive" src="https://placehold.it/191x131">
      <div class="shopTab">
        <h4>Shop Now</h4>
      </div>
    </div>
  </div>

  <div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
    <div class="product-display">
      <img class="img-responsive" src="https://placehold.it/191x131">
      <div class="shopTab">
        <h4>Shop Now</h4>
      </div>
    </div>
  </div>

  <div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
    <div class="product-display">
      <img class="img-responsive" src="https://placehold.it/191x131">
      <div class="shopTab">
        <h4>Shop Now</h4>
      </div>
    </div>
  </div>
</div>

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

Ways to display or conceal multiple div elements using JavaScript

A group of colleagues and I are currently collaborating on a project to create a website showcasing our research. We have incorporated 1 page that contains detailed descriptions of six different subjects: system biology, proteomics, genomics, transcripto ...

javascripthtmlcsshideshow

Align the button at the center of the carousel

While working on a personal HTML/CSS/Bootstrap 5 project as a self-taught learner, I have encountered some beginner doubts. My challenge is to ensure that the site remains responsive across various devices such as mobile and tablet. Specifically, I am stru ...

htmlcssresponsive-designresponsive

How can I make sure my rows are properly aligned using the Grid

Looking at the image below, I am attempting to align "Ticket Number" and "Email" using a Grid: View My Result Image <Grid container direction="row" justifyContent="flex-start" alignItems="stretch" style={{ pad ...

javascripthtmlcsscss-grid

Interactive Typescript slider with drag functionality

Seeking assistance in developing a draggable slider using TypeScript. I have managed to retrieve the client and scroll positions, but I am struggling to change the ref scrollLeft position. There are no errors thrown; however, the ref's scrollLeft prop ...

cssreactjstypescript

What could be causing the issue with executing the command "npm run sass"?

I encountered an error when attempting to run the command "npm run sass". Could someone please review the screenshot I took for reference? View npm run sass screenshot ...

cssnode.jsnpmsasspackage

Resize a span's width using the width of another element using only CSS

Website Development <div class="container"> <div id="setter"> <span>some unique content here</span> </div> <div class="wrap"> <span> different text goes here, different text goes here, diffe ...

javascripthtmlangularjscss

Ways to ensure a ul li element perfectly fits inside a div element without any spaces

As a newcomer to CSS and HTML, I'm facing an issue with my ul li dropdown menu and login boxes. The background colors are red and blue, but there are gaps within the div that I want to fill with the height of the div. Below is the code snippet: @key ...

htmlcss

Having trouble with the repeat-item animation feature not functioning correctly

Take a look at this Plunker, where the animation for adding an item only seems to work properly after an item has been deleted from the list. Any suggestions on how to resolve this issue? Here is the CSS code: .repeat-item.ng-enter, .repeat-item.ng-leave ...

cssangularjsanimationangularjs-ng-repeatcss-animations

Avoiding the <br> tag in list items with TinyMCE

I am currently using tinyMCE and I needed to enable the "force_br_newlines: true" option. Without this setting, if I press the "Enter" key twice and check the source code, I only see one <br> tag. However, when I set the option to TRUE, it creates a ...

javascripthtmlcsstinymce

Unable to create transparent div

I am currently working on a test page located at this link. As you scroll down the page, you will notice that the logo remains fixed in the background while an area I have painted purple scrolls over it. I chose to make this area purple temporarily for vi ...

htmlcss

A guide to connecting keyboard events to div elements within a React application

Currently working on a basic react project to gain some practical experience with the library. I aim to develop a simple user interface with blank spaces to be filled in by typing via keyboard input. Here's a glimpse of my progress so far: function ...

javascripthtmlreactjsreact-hooks

The <p> element nested inside a <div> element with font-weight styling

I'm struggling to make a large font size and weight fit into a div tag while aligning it vertically at the bottom. Can anyone help me with this issue? div { border:1px solid black; height:100px; } table { border:1px sol ...

htmlcssfont-size

Strange occurrence of blank space problem. The enigma within HTML, CSS, and Angular

I am encountering a puzzling issue with the code below: After saving text input from a textarea to a SQL database without any leading or trailing white spaces present, I notice that when displaying the text within a div using angular {{ model.text }}, str ...

htmlcssangularjs

Step by step guide on adding content to a div by clicking a button, even after the page has already loaded

I have scoured the depths of the internet and forums but have yet to find a satisfactory solution to my problem. Hopefully, someone reading this can offer some help in resolving my issue. I manage a website that showcases concerts for various music groups. ...

javascriptphpjqueryhtml

Is there a way to dynamically set the width of a CSS property value in React? I'm looking for a solution that allows for flexibility in adjusting

let sliderVal = avgRound * 20; {sliderVal}% ...

cssreactjs

The scrolling function halts as soon as the element that was middle-clicked is deleted from the

I am knee-deep in developing my own React virtualization feature and encountering a minor annoyance. When I middle click on an item in the list and start scrolling, the scrolling stops once that item is removed from the DOM. My initial thought was that the ...

javascripthtmlcssreactjs

Steps for dynamically adjusting form fields depending on radio button selection

I am looking to create a dynamic form that changes based on the selection of radio buttons. The form includes textfields Field A, Field B, ..., Field G, along with radio buttons Radio 1 and Radio 2. I need to update the form dynamically depending on which ...

javascriptjqueryhtmlforms

Transform the binary image data sent by the server into an <img> element without using base64 encoding

It's been a challenge trying to find a reliable method for adding custom request headers to img src, so I'm experimenting with manually downloading the image using ajax. Here is an example of the code I am working on: const load = async () => ...

javascripthtmlajaximage

Persist the current scroll position of a div in local storage using React

Despite the numerous questions I've come across on this topic, none of them align with my approach. Most solutions involve window scrolling, but I have a div containing overflow items that I want to retain the user's scroll position for. My attem ...

htmlreactjsnext.jstailwind-css

producing complex HTML content using xquery output

I'm currently facing an issue with returning a multi-element HTML result (not sure of the technical term for this). To provide more clarity, take a look at the code snippet below. <body> <h1>Nobel laureates</h1>{ for $subject in ...

htmlxquerytransformation