`Is it possible to utilize bootstrap in order to structure rows with three elements each?`

My goal is to create a layout similar to this using Bootstrap 4: https://i.sstatic.net/EF4lL.png, where there are 3 elements displayed in each row.

The elements I want to display are as follows:

<div class="sprite d-inline-block bg-info rounded p-1 m-1">
  <span class="sprite-span-level">Top-right text over image</span>
  <img class="sprite-img" src="http://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg">
  <span class="sprite-span-nickname">Text under image</span>
</div>

You can view my current progress at https://jsfiddle.net/4bmokwpe/.

How can I utilize Bootstrap 4 to achieve the design I have in mind?

htmlcssbootstrap-4

Answer №1

If you're looking to utilize bootstrap for your project, I would recommend making use of the built-in grid classes such as "container", "row", and "col-*".

For more information, check out: https://getbootstrap.com/docs/4.0/layout/grid/

To implement this in your markup, follow the structure below:

.sprite {
  text-align: center;
  position: relative;
}

.sprite-span-level {
  position: absolute;
  right: 5px;
}

.sprite-img {
  width: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">

  <div class="row">
  
    <div class="col-4">
       <div class="sprite bg-info rounded p-1 m-1">
        <span class="sprite-span-level">Top-right text over image</span>
        <img class="sprite-img" src="http://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg">
        <span class="sprite-span-nickname">Text under image</span>
      </div>
    </div>
    
    <div class="col-4">
       <div class="sprite bg-info rounded p-1 m-1">
        <span class="sprite-span-level">Top-right text over image</span>
        <img class="sprite-img" src="http://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg">
        <span class="sprite-span-nickname">Text under image</span>
      </div>
    </div>
  
    <div class="col-4">
       <div class="sprite bg-info rounded p-1 m-1">
        <span class="sprite-span-level">Top-right text over image</span>
        <img class="sprite-img" src="http://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg">
        <span class="sprite-span-nickname">Text under image</span>
      </div>
    </div>

    <div class="col-4">
       <div class="sprite bg-info rounded p-1 m-1">
        <span class="sprite-span-level">Top-right text over image</span>
        <img class="sprite-img" src="http://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg">
        <span class="sprite-span-nickname">Text under image</span>
      </div>
    </div>
    
     <div class="col-4">
       <div class="sprite bg-info rounded p-1 m-1">
        <span class="sprite-span-level">Top-right text over image</span>
        <img class="sprite-img" src="http://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg">
        <span class="sprite-span-nickname">Text under image</span>
      </div>
    </div>
  
    <div class="col-4">
       <div class="sprite bg-info rounded p-1 m-1">
        <span class="sprite-span-level">Top-right text over image</span>
        <img class="sprite-img" src="http://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg">
        <span class="sprite-span-nickname">Text under image</span>
      </div>
    </div>

  </div>
  
</div>

Answer №2

Are you looking for something like this...?

.col-wraper {
border: 5px solid red;
height: 100%;
background: #000;
color: #fff;
text-align: center;
  min-height:200px
}

.col-lg-4.col-md-4.col-sm-4.col-4 {
padding-bottom: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="col-wraper">
1
</div>

</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="col-wraper">
2
</div>

</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="col-wraper">
3
</div>

</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="col-wraper">
4
</div>

</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="col-wraper">
5
</div>

</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="col-wraper">
6
</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

What is the best way to apply the active class just once?

I am having an issue with my v-for loop in Vue.js where the bootstrap 4 .active class is repeating. I only want the bootstrap 4 active class to repeat once. Can anyone suggest a solution to this problem? var app = new Vue ({ el: '#app', d ...

vue.jsvuejs2bootstrap-4

The main page is experiencing issues with loading pages due to failed Ajax calls

I am facing an issue while trying to load different pages through ajax call. The pages are not being displayed on the main page. Here is the code snippet: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...

javascripthtmlajax

Iterate over the HTML elements within a class and retrieve a specific property in JSON

Currently, I am in the process of developing a straightforward application that involves making an Ajax request to retrieve a Json object and then passing it to an HTML document. Essentially, this application functions as a vending machine where the produc ...

javascriptjqueryhtmljsonajax

Do not include JavaScript-generated CSS when running Grunt's un-css task

Recently, I started using Grunt for minifying JavaScript and CSS files and I must say, it's an incredible tool. As I delved deeper into Grunt, I discovered the uncss module, which aids in optimizing the load time and size of CSS files, especially for ...

javascriptcssangularjsgruntjsgrunt-contrib-cssmin

What is causing the click event to not fire in this straightforward jsfiddle demonstration?

While attempting to create a demonstration on jsfiddle, I encountered an issue where the click event for the toggle button is not firing. An error message stating myclick is not defined appears. I have researched other solutions that suggest using the No ...

javascripthtmlcssjsfiddle

What is the best way to split the children of a parent div into four distinct styling regions using the nth-child selector?

Imagine having a square parent container with 100 child elements of equal sizes, as illustrated below. How can you use the :nth-child selector to target and style the children in the top-left, bottom-left, top-right, and bottom-right corners separately? ...

csssassresponsive-designcss-selectorsless

determining the number of td elements in a row of a table located within an iframe

When I interact with a cell in a table within an iframe, I want to determine the number of cells in that row. If a cell is actually a span element, I would like to consider it as part of the cell count. The iframe may contain multiple tables without any s ...

jqueryhtmliframe

Is there a way to enable text selection on a jQuery draggable div?

I utilized jQuery to make a specific div draggable, but I've encountered an issue. Inside this draggable box, there is some important text that I need to be able to copy and paste. However, whenever I click on the box, it triggers the dragging action ...

javascriptjqueryhtml

Guide to playing facebook in an iframe with javascript

I'm having trouble playing a Facebook video from an iframe using JavaScript. Can anyone help me figure it out? Here's what I've tried: <div onclick="play_fn()"> click here to play </div> <br> <script> function pla ...

javascriptjqueryhtmlfacebookiframe

Looking to extract text between specific match groups using regex from an HTML YouTube page? Here's how you can do

Utilizing the power of Screaming Frog to extract keyword data from YouTube videos has its limitations. The software only displays 160 characters of meta information, which means videos with extensive keywords may not fully show up in this tab. Experimenti ...

htmlxpathyoutubeweb-scrapingkeyword-search

Preventing flex items from becoming overly tall in Firefox using flex-direction: column

Working with flex layout has presented a challenge in Firefox and IE11. I have set up a codepen to demonstrate the issue. Screenshot https://i.sstatic.net/i9KlS.png Chrome(left), Firefox(right) Description The intended behavior is for the header and f ...

cssflexbox

Paginator for Angular Material Cards

This section contains the TypeScript file for a component import { MatTableDataSource, MatPaginator } from "@angular/material"; import { FoodService } from "./food.service"; import { Food } from "./food"; @Component({ selec ...

htmlangularangular-material

Rails 5.2.1 experiencing compatibility issues with Bootstrap4 Datetimepicker

I've been attempting to implement the datetimepicker function from bootstrap4 on my website. I'm utilizing the datetimepicker gem datetimepicker. Here is a snippet of my Gemfile: gem 'bootstrap', '~> 4.1.3' gem 'jquery ...

ruby-on-railstwitter-bootstrapbootstrap-4bootstrap-datetimepicker

Creating HTML tags using Kotlin

Looking to generate HTML using Kotlin in the browser, I experimented with the Kotlinx library. However, I found that it lacks support for callbacks like the following: div { onclick = { event -> window.alert("Kotlin!") } } Are there an ...

javascripthtmlkotlinkotlinx-html

How can we display an absolutely positioned div when hovering over a card with the help of Tailwind CSS?

I am currently working on a Next.js application with Tailwind CSS. I would like to implement a feature where additional information is displayed when hovering over a product card, similar to the functionality seen on wildberries.ru. I have tried using &apo ...

cssreactjsnext.jstailwind-csscss-position

Is it necessary to verify user input in a registration form using PHP?

I currently do not have any code to share, as the issue at hand is not directly related to coding. However, I am interested in verifying certain aspects of user input, such as ensuring a phone number entered in a registration form is limited to 8 digits an ...

phphtmlmysql

Exploring individual elements within a set of data, the age-old art of classic ASP

I am looking to extract specific elements from a "select" statement in order to populate a table on a website using Classic ASP. For instance, if my select statement below fetches these values; Name ID Alex Alex123 On the webpage, I would like th ...

htmlasp.netrecordset

JavaScript is failing to display array elements

I'm currently in the process of developing a filtering system for a festival website. The price filter is up and running smoothly, but now I'm facing a challenge with the genre filter. For the genre filter, I've created an array named filte ...

javascripthtmlfilterweb

Transfer the content from a specific div into another div

Within this code snippet, there are three buttons labeled P1, P2, and P3, each connected to a card div below them. On the right side, there is another div containing the text "TEXT SHOULD BE DISPLAYED HERE". The desired functionality is that clicking on an ...

htmljquery

Any solutions for dealing with longer labels in Bootstrap form-floating?

Is there a way to use Bootstrap's form-floating feature with longer labels so that the text box automatically expands to accommodate the text but doesn't cut off on white-space wrap when too long? I'd like to avoid using position-relative to ...

htmlcssbootstrap-5