Is it possible to create this layout using Bootstrap 5? I want to stack spans, with one inside the container and one outside

Trying to achieve a specific design using Bootstrap 5.3.

https://i.sstatic.net/STifm.jpg

This design should be placed over the showcase, with the following code for the showcase displayed below:

    <div class="showcase d-flex flex-column">

        <div class="container p-4">
            <div class="row showcase-row mt-5 gap-lg-0 gap-5">
                <div class="col-lg-4 col-12 showcase-item">
                    <h4>BMW 420i</h4>
                    <h5>M Sport</h5>
                    <img src="/app/static/img/togg art.png" alt="">
                </div>
                <div class="col-lg-4 col-12 showcase-item">
                    <h4>Mercedes-Benz GLB</h4>
                    <h5>200 AMG</h5>
                    <img src="/app/static/img/8.png" alt="">
                </div>
                <div class="col-lg-4 col-12 showcase-item">
                    <h4>Audi E-Tron GT</h4>
                    <h5>GT Quattro</h5>
                    <img src="/app/static/img/9.png" alt="">
                </div>
                <div class="col-lg-4 col-12 showcase-item">
                    <h4>Ferrari F8</h4>
                    <h5>Tributo</h5>
                    <img src="/app/static/img/4.png" alt="">
                </div>
                <div class="col-lg-4 col-12 showcase-item">
                    <h4>Lamborghini Aventador</h4>
                    <h5>LP750-4</h5>
                    <img src="/app/static/img/5.png" alt="">
                </div>
                <div class="col-lg-4 col-12 showcase-item">
                    <h4>Aston Martin Vantage</h4>
                    <h5>V8 Vantage Roadster</h5>
                    <img src="/app/static/img/6.png" alt="">
                </div>
            </div>
        </div>
        
    </div>

Edit:

The solution I currently have is as follows:

    <span class="text-uppercase fw-bold position-absolute" style="font-size: 210px; opacity: 0.1;">owcase</span>

    <div class="showcase container p-4 d-flex flex-column" style="margin-top: 100px;">
   
        <span class="fs-3 fw-bold">Showcase</span>
        <span class="fs-5 fw-bold" style="opacity: 0.4;">Ads</span>
        
    </div>

If you have a better way to achieve this, feel free to share!

htmlcssbootstrap-5

Answer №1

Utilize a mix of relative positioning and z-index

I've included padding to the body and margins to sections for a clearer example

body {
  padding: 50px;
}

.section {
  position: relative;
  border: 1px solid gray;
}

.back-title {
  color: #ababab;
  font-size: 100px;
  position: absolute;
  top: -50px;
  left: -50px;
  z-index: 1;
}

.content-container {
  z-index: 2;
  /** position relative to make z-index work and not modify behavior */
  position: relative;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="93ece9e9f2eefee8ebcbeed9d4d9d3dfe7aaa7e5">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section class="section container">
  <h1 class="back-title">
    Showcase
  </h1>
   <div class="content-container row gap-lg-0 gap-5">
     <div class="col-lg-4 col-12 showcase-item">
       <h4>BMW 420i</h4>
       <h5>M Sport</h5>
       <img src="/app/static/img/togg art.png" alt="">
     </div>
     <div class="col-lg-4 col-12 showcase-item">
       <h4>Mercedes-Benz GLB</h4>
       <h5>200 AMG</h5>
       <img src="/app/static/img/8.png" alt="">
     </div>
     <div class="col-lg-4 col-12 showcase-item">
       <h4>Audi E-Tron GT</h4>
       <h5>GT Quattro</h5>
       <img src="/app/static/img/9.png" alt="">
     </div>
     <div class="col-lg-4 col-12 showcase-item">
       <h4>Ferrari F8</h4>
       <h5>Tributo</h5>
       <img src="/app/static/img/4.png" alt="">
     </div>
     <div class="col-lg-4 col-12 showcase-item">
       <h4>Lamborghini Aventador</h4>
       <h5>LP750-4</h5>
       <img src="/app/static/img/5.png" alt="">
     </div>
     <div class="col-lg-4 col-12 showcase-item">
       <h4>Aston Martin Vantage</h4>
       <h5>V8 Vantage Roadster</h5>
       <img src="/app/static/img/6.png" alt="">
     </div>
  </div>
</section>

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 perfectly center the navbar-nav class element in a menu using Bootstrap 5?

Currently, I am in the process of developing a backend for a novice website while also revamping the front end. My knowledge of frontend development is limited, so I have opted to utilize Bootstrap 5. One of my tasks involves transferring the menu from the ...

htmlcssbootstrap-5

How can I append the value of an input box to a URL as a parameter upon clicking a button?

I am working on a form with one input field and two buttons, each with different functions. My goal is for one of the buttons to take the value entered in the input field and append it to a specified URL as a parameter when clicked. For example, if the us ...

htmlruby-on-railsrhtml

Is it possible to filter an array of data using a dropdown in Angular without using a pipe?

I am facing an issue with filtering data based on the selected dropdown item. Currently, it only filters the data once when I select a filter, and after that, it always returns an empty result. Here is an example of the code: <select class="select" (c ...

javascripthtmlangulardrop-down-menu

An easy way to place text along the border of an input field in a React JS application using CSS

I am struggling to figure out how to create an input box with text on the border like the one shown in the image below using CSS. I have searched extensively but have not been able to find any solutions to achieve this effect. I attempted using <input&g ...

javascriptcssreactjs

Issues encountered when dealing with floating elements and margins

Having some difficulties with aligning elements on my website. As someone who is not highly skilled in coding, I am struggling to define the width and float properties for certain classes. Despite my attempts, it seems that the elements are not positioning ...

htmlcsscss-floatmargin

Discover the technique for determining the XPath location of an element through Javascript

Imagine you have a lengthy HTML file filled with various tags, much like the layout of Stack Overflow. If you were to click on a specific element on the page, what would the Javascript function look like to determine the simplest XPath that points to that ...

javascriptjqueryhtmlxmlxpath

Tips for ending a page prematurely

I am currently facing an issue with hosting images on my webpage where the bottom of the images are uneven, creating a messy look at the bottom of the page. https://i.sstatic.net/N3XvJ.png Normally I would attempt to align them in a perfect square layout ...

htmlcssimage

Experiencing difficulty in displaying the correct checkbox validation status with Bootstrap 5 for a Django model form containing a many-to-many field and CheckboxSelectMultiple widget

I'm encountering an issue with a checkboxselectmultiple on an m2m model field in a ModelForm that is required - meaning at least one choice must be selected. I have applied the boostrap5 was-validated class to my form: <form method="POST" ...

djangovalidationbootstrap-5

Change the text in a CSS checkbox label when it is selected

There is an innovative Pure-CSS accordion that caught my eye, but I have a unique feature in mind that I would like to incorporate. What I am looking for is the ability for the labels to dynamically change based on the state of the checkboxes without relyi ...

csscheckboxaccordiondisplay

Can a single volume control be used to manage the audio of multiple sources at once?

I am currently working on a project for my personal interactive video website. I am trying to figure out how to create one volume control that can adjust the audio for multiple tracks at once. Can anyone help me with this? So far, I have successfully crea ...

javascripthtmlaudiovolume

Encrypting and salting the data provided by the user

Similar Question: Secure hash and salt for PHP passwords My current code snippet is as follows: $insert_query = 'insert into '.$this->tablename.'( name, email, username, password, confirmcode ...

phphtmlsalt

Printing Multiple Pages Using JavaScript and Cascading Style Sheets

Encountering difficulties displaying page numbers when printing multiple multipage reports Here is the provided HTML Format : <style type="text/css> body { counter-reset: report 1 page 0; } td.footer:after { counter-increment: page; content ...

javascriptjqueryhtmlcss

Iphone not picking up media queries, while browser resize is working perfectly

Hey there, I'm currently using a theme called Bones on my WordPress site, but I'm encountering some difficulties with the responsive menu on my iPhone. Oddly enough, when I manually resize the window, the menu seems to work just fine. Here' ...

csswordpressmedia-queries

Retrieve the full directory path that has been chosen in an HTML form

I am facing a similar issue in my web application where I am using PHP, HTML, and JavaScript. What I want is to be able to select a folder and obtain the full path of that folder for backing up data. For example, when a user enters backup.php, they should ...

javascriptphpjqueryhtml

Enhance the textarea using Javascript when clicked

I am experimenting with styling my textarea using a combination of JAVASCRIPT and CSS. The goal is to make it expand in size from 20px height to 120px height when clicked, using document.getElementById("tweet_area"). However, I am facing an issue where t ...

javascriptcss

Can you explain the functionality of dismissing a Bootstrap alert?

In this example, we can see how Bootstrap handles dismissible alerts: <div class="alert alert-warning alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidde ...

javascriptcsstwitter-bootstrap-3

ReactJS Application: Issue with Selective Mobile Scrolling

I've been working on a ReactJS web app where we mainly use styled-components for styling, but also sometimes utilize index.css for global styles (such as body and html). The application consists of an app header, a page header, and a container with a ...

javascriptcssreactjsscroll

Tips for relocating anchor elements to less desirable locations

My website has an issue with anchor elements appearing too frequently and not in the desired location. I need someone to help fix this so there are only two anchors displayed. After checking my code, it seems like there are not more than the specified num ...

htmlcss

Remove a div element with Javascript when a button is clicked

I am working on a project where I need to dynamically add and remove divs from a webpage. These divs contain inner divs, and while the functionality to add new divs is working fine for me, I'm facing some issues with removing them. The code snippet b ...

javascriptjqueryhtmlcssdynamic

Removing a specific MySQL row using HTML in collaboration with Node.js

I've been working on a feature to allow users to delete specific rows from a table. Each row has a "Delete" link at the end, but when I click it, nothing happens. There are no errors displayed, and the console shows that 0 row(s) have been updated, ye ...

javascripthtmlmysqlsqlnode.js