Text displayed over an image using Bootstrap 5

I'm a beginner with Bootstrap 5 and I have a question about how to position text inside an image, similar to the first screenshot provided:

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

I tried using card-img but it didn't work. I also attempted to use cols, but no luck after hours of searching

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d5f5252494e494f5c4d7d08130c130e">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


<!-- Body -->
<div class="container">
  <div class="row justify-content-center gx-2">
    <div class="col-6">
      <div class="card">
        <img width="100%" class="card-img rounded" src="./Assets/Blog/image 32.png" alt=" ">
        <div class="card-img-overlay text-white d-flex flex-column justify-content-center">
          <h4 class="card-title">dasdsa </h4>
          <p class="card-text">123 </p>
        </div>
      </div>
    </div>
  </div>
  <div class="row justify-content-center gx-2 ">
    <div class="col-md-2 col-lg-2">
      <div class="card">
        <img width="100%" class="card-img rounded" src="./Assets/Blog/image 33.png" alt=" ">
        <div class="card-img-overlay text-white d-flex flex-column justify-content-center">
          <p class="card-text">123 </p>
          <div class="link d-flex">
            <a href="#" class="card-link text-warning">Read More</a>
            <a href="#" class="card-link text-warning">Book a Trip</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row justify-content-center gx-2">
    <div class="col-md-2 col-lg-2 ">
      <div class="card">
        <img width="100%" class="card-img rounded" src="./Assets/Blog/image 34.png" alt=" ">
        <div class="card-img-overlay text-white d-flex flex-column justify-content-center">
          <p class="card-text">123 </p>
          <div class="link d-flex">
            <a href="#" class="card-link text-warning">Read More</a>
            <a href="#" class="card-link text-warning">Book a Trip</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row justify-content-center gx-2">
    <div class="col-md-2 col-lg-2">
      <div class="card">
        <img width="100%" class="card-img rounded" src="./Assets/Blog/image 35.png" alt=" ">
        <div class="card-img-overlay text-white d-flex flex-column justify-content-center">
          <p class="card-text">It is the seventh most populous city in Italy, at the heart of a metropolitan area of about one million people. </p>
          <div class="link d-flex">
          </div>
        </div>
      </div>
    </div>
  </div>

htmlcssbootstrap-5

Answer №1

To create a stylish design, start by adding a div element with an image set as the background. Then, include the necessary text within this div.

It's important to note that the flexbox was utilized for layout purposes and to enhance the appearance of the text within the p tag.

.bg-img {
  background-image: url("https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1472&q=80");
  background-size: cover;
  background-position: center;
  width: 350px;
  height: 250px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.bg-img>p {
  background-color: rgb(17, 17, 17, 0.7);
  padding: 10px;
  color: white;
}
<div class="bg-img">
  <p>i am over the image</p>
</div>

Answer №2

To achieve the desired alignment, swap out justify-content-center with justify-content-end within the card-img-overlay element. Additionally, include text-center in your code snippet.

<div class="card-img-overlay text-white d-flex flex-column justify-content-end text-center">
  .........
</div>

Answer №3

Check out the easy-to-use overlay feature on

Simply add your image path and UIKit CDN into your HTML code

Here's an example of how to implement it:

<div class="uk-child-width-1-2@m" uk-grid>
    <div>

        <div class="uk-inline">
            <img src="images/photo.jpg" width="1800" height="1200" alt="">
            <div class="uk-overlay uk-overlay-primary uk-position-bottom">
                <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>

    </div>
    <div>

        <div class="uk-inline">
            <img src="images/photo.jpg" width="1800" height="1200" alt="">
            <div class="uk-overlay-primary uk-position-cover"></div>
            <div class="uk-overlay uk-position-bottom uk-light">
                <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </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 adjust the height of an element using the ::before selector in javascript

Within the realm of styling, there exists an element adorned with the .bg class. Its aesthetic instructions are described as follows: .bg { width:100%; } .bg:before { position: absolute; content: ''; background: rgba(0,0,0,0.5) ...

javascriptcss

Looking to capture a specific div in a React JS component? I initially tried using the "use-screenshot-hook" package, but unfortunately, it captured the entire page instead

const reference = useRef(null); const { capturedImage, takeScreenshot } = useScreenshot(); const imageStyle = { height: imgHeight, width: imgWidth }; const fetchImage = () => takeScreenshot({reference}); const saveImage = () => ...

htmlreactjs

The ul media queries have malfunctioned

In the .gallery section, there are 12 li elements that contain images. Originally, I used media queries to adjust the number of columns in the grid to 6, 4, 3, and 2 based on the browser width. However, when I tried to create a size ratio of 2:1 for all ...

htmlcss

HTML5 sortable lists, ajax posting, and inactive elements are not functioning correctly

I'm currently utilizing a fantastic plugin for jQuery known as HTML5 Sortable. It can be found at . I am attempting to disable certain items using this plugin. My approach involves adding the class="disabled" to the <li> tag and including items ...

jqueryajaxhtmljquery-ui-sortable

Tips for perfectly centering text within p tags using CSS

Currently, I am troubleshooting the JSFiddle where my goal is to vertically center text using CSS. Below is the HTML code that I utilized to create the JSFiddle: <div class="poster text-center pt-4"> <div class="item"> <img class=" ...

htmlcssvertical-alignment

Troubles arising from the lack of character encoding declaration in the HTML document

Recently, I created a form for users to fill out that has the ability to validate email entries. When a user submits the form: If the email is incorrectly formatted, an error message will be displayed. If the email is correctly formatted, a confirmation ...

phphtmlcharacter-encodingmeta-tags

Error Message: ESP32 Guru Meditation Error - Core 1 in a State of Panic due to Load Prohibition

I recently attempted to set up a web server to control multiple LEDs using an ESP32. Initially, I had success with just one LED and button on the HTML page. The code worked fine, but I decided to expand it to include more buttons and variables. However, af ...

htmlc++error-handlingarduinoesp32

Visualization of XML Datamarkup

I am facing an issue with a function that generates XML from a source. Everything works perfectly except for when certain fields are too long, causing the table to stretch and mess up the website formatting. Is there a way to automatically insert line brea ...

phphtmlxml

Is there a way to change an HTML document into a Word file?

I am looking for recommendations on libraries that can help me save HTML documents in memory as Word .DOC files. Any suggestions for both closed and open source options are welcome. Additionally, could someone provide links to these libraries based on the ...

htmlms-word

html safeguarding user accounts

function Authenticate() { loggedIn = false; username = ""; password = ""; username = prompt("Please enter your username:", ""); username = username.toLowerCase(); password = prompt("Please enter your password:", ""); password = ...

javascripthtml

The color of the background does not remain changed permanently

I'm having an issue where the background color changes when I click a button, but reverts back almost immediately to its original color. How can I ensure that the new color stays permanently? Here is a simple JavaScript function you can use: functio ...

javascripthtmlcss

What is the best way to remove the excess space beneath a column in Bootstrap 5?

I made the changes as instructed, but when I view it on a mobile phone, the blue box and pink box are not aligned as I want them to be. I have attached a screenshot for reference, and I would like the mobile version to mirror the desktop version. I am uns ...

cssspacingbootstrap-5gutter

Having trouble stacking the video iframe over the menu content despite setting the z-index correctly

I can't seem to figure this out. I attempted adjusting the z-index on the iframe element, but it continues to be positioned behind the menu on this page. Lowering the z-index on various sections of the navigation menu hasn't helped either. link ...

htmlcssiframe

Minimize the vertical gap between menu items when they wrap onto a new line

When examining the screenshot of the website, you'll notice a considerable space between the first and second rows of menu items. I'm aiming to minimize this spacing as much as possible. The following CSS pertains to this issue: .gva-navigatio ...

htmlcsswhitespace

Why isn't jQuery working properly for showing/hiding elements?

I am attempting to create a functionality where the string remove field can be toggled to show or hide using a single button, depending on its current state. Initially, it should be hidden (using the hidden HTML attribute), and upon clicking the button, it ...

javascriptjqueryhtml

Why does my navbar toggler automatically display the navbar items?

I am perplexed as to why the navigation items keep appearing every time I refresh the page in mobile view. Despite checking that aria-expanded is set to false, it still does not seem to work. Below is the code snippet: <html lang="en"> & ...

htmlcssnavbarbootstrap-5

Clear all events from an HTML element and its descendants with TypeScript

Each time the page loads, I have HTML from an API that is constantly changing. Is there a way to strip away all events attached to it? The original HTML looks like this: <div id="content"> <h2 onclick="alert('hi');">Test 1< ...

javascripthtmltypescript

Is there a way to extract information from a <span> element with restricted access?

I'm currently utilizing bs4 and urllib2 to extract data from a website. Check out the webpage here. The goal is to retrieve the remaining digits of the telephone number 3610...... but beforehand, it's necessary to click on a button to reveal th ...

pythonhtmlweb-scrapingbeautifulsoup

The like button animation works perfectly for individual posts, but for multiple posts, only the like button on the first post

Having an issue with the like button code on a single news feed. The button works for the first post, but when clicking on other posts, it only affects the first post button. I am using post UI and looping the UI based on the total post count without Javas ...

javascriptphpcsshtmlanimation

HTML text field within the same line

Is there a way to create multiple text fields on the same line? I have tried this code: <div class="col-lg-2"> <div class="form-group"> <label>Working experience</label> <input type="text" class="form-contro ...

html