How to insert a static message within an image, utilizing bootstrap for a responsive design

Struggling to make text and a button fit inside an image without losing responsiveness.

.dados {
    bottom: 10px;
    right: 0;
}

.text {
    font-family: "Arial Bold", Arial;
    font-weight: 700;
    font-size: 22px;
    color: #ffffff !important;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <title>Teste</title>

  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />

</head>
<body>
<div class="container">
<div class="row mt-4">
      <div class="col-4">
        <div class="position-relative">
          <img src="https://via.placeholder.com/300" alt="">
          <div class="position-absolute dados">
            <h3 class="text-right text">Tests?<br>Lorem ipsum dolor sit amet</h3>
            <button class="btn btn-primary float-right">see details</button>
          </div>
        </div>
      </div>
      <div class="col-4">
        <div class="position-relative">
          <img src="https://via.placeholder.com/300" alt="">
          <div class="position-absolute dados">
            <h3 class="text-right text">Tests?<br>Lorem ipsum dolor sit amet</h3>
            <button class="btn btn-primary float-right">see details</button>
          </div>
        </div>
      </div>
      <div class="col-4">
        <div class="position-relative">
          <img src="https://via.placeholder.com/300" alt="">
          <div class="position-absolute dados">
            <h3 class="text-right text">Tests?<br>Lorem ipsum dolor sit amet</h3>
            <button class="btn btn-primary float-right">see details</button>
          </div>
        </div>
      </div>
    </div>
  </div>
 </body>
</html>

Attempted setting the parent div as position relative and using position absolute for the content, but it didn't work.

Desire for the information to be located in the lower right corner of the image while maintaining responsiveness. Any suggestions?

csstwitter-bootstrapbootstrap-4

Answer №1

To create a design using Bootstrap, you can utilize Bootstrap Cards with image overlay feature.
For detailed examples and references, visit https://www.w3schools.com/bootstrap4/bootstrap_cards.asp and https://getbootstrap.com/docs/4.0/components/card/
Ensure to check the responsiveness by viewing the snippet in full page. 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-sm-4">
    <div class="card">
      <img class="card-img-top" src="https://dummyimage.com/300.png" alt="Card image" style="width:100%">
      <div class="card-img-overlay">
        <h4 class="card-title">John Doe</h4>
        <p class="card-text">Some example text . Some example text some example text. </p>
        <a href="#" class="btn btn-primary">See Profile</a>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card ">
      <img class="card-img-top" src="https://dummyimage.com/300.png" alt="Card image" style="width:100%">
      <div class="card-img-overlay">
        <h4 class="card-title">John Doe</h4>
        <p class="card-text">Some example text . Some example text some example text. </p>
        <a href="#" class="btn btn-primary">See Profile</a>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card img-fluid">
      <img class="card-img-top" src="https://dummyimage.com/300.png" alt="Card image" style="width:100%">
      <div class="card-img-overlay">
        <h4 class="card-title">John Doe</h4>
        <p class="card-text">Some example text. Some example text some example text. </p>
        <a href="#" class="btn btn-primary">See Profile</a>
      </div>
    </div>
  </div>

Update : Alternatively, you can use flexbox to achieve the same result.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
.card {
  display: flex;
  flex-direction: column;
}

card-img-overlay {
  margin-bottom: auto;
}
</style>
</head>
<body>
<div class="row">
  <div class="col-sm-4">
    <div class="card">
      <img class="card-img-top" src="https://dummyimage.com/300.png" alt="Card image" style="width:100%">
      <div class="card-img-overlay card-body d-flex flex-column" style="">
       <div class="mt-auto">
       <h4 class="card-title ">John Doe</h4>
        <p class="card-text">Some example text. Some example text some example text. </p>
        <a href="#" class="btn btn-primary">See Profile</a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
   <div class="card">
      <img class="card-img-top" src="https://dummyimage.com/300.png" alt="Card image" style="width:100%">
      <div class="card-img-overlay card-body d-flex flex-column" style="">
       <div class="mt-auto">
       <h4 class="card-title ">John Doe</h4>
        <p class="card-text">Some example text. Some example text some example text. </p>
        <a href="#" class="btn btn-primary">See Profile</a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card">
      <img class="card-img-top" src="https://dummyimage.com/300.png" alt="Card image" style="width:100%">
      <div class="card-img-overlay card-body d-flex flex-column" style="">
       <div class="mt-auto">
       <h4 class="card-title ">John Doe</h4>
        <p class="card-text">Some example text. Some example text some example text. </p>
        <a href="#" class="btn btn-primary">See Profile</a>
        </div>
      </div>
    </div>
  </div>

View it in full screen to observe that the button and other elements have shifted to the bottom of the cards.
To position anything on the top, ensure it is placed outside of <div class="mt-auto">.

Answer №2

Adjust the padding of your relative box to be 100%, and make sure your image is positioned absolute. Apply CSS to the image to prevent stretching or squeezing, ensuring it fits inside the box and displays the center square portion of the image.

Refer to the following snippet for the solution:

.position-relative img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  min-width: 100%;
  max-width: 100%;
  min-height: 100%;
  max-height: 100%;
  object-fit: cover;
}
.position-relative {
  padding-top: 100%;
}
.position-absolute {
  left: 0;
  right: 0;
  bottom: 0;
  padding: 15px;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <title>Teste</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
  <div class="container">
    <div class="row mt-4">
      <div class="col-md-4 col-sm-6 mb-3">
        <div class="position-relative">
          <img src="https://via.placeholder.com/300" alt="">
          <div class="position-absolute dados">
            <h3 class="text-right text">Testes?<br>Teste teste teste teste</h3>
            <button class="btn btn-primary float-right">veja detalhes</button>
          </div>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 mb-3">
        <div class="position-relative">
          <img src="https://via.placeholder.com/300" alt="">
          <div class="position-absolute dados">
            <h3 class="text-right text">Testes?<br>Teste teste teste teste</h3>
            <button class="btn btn-primary float-right">veja detalhes</button>
          </div>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 mb-3">
        <div class="position-relative">
          <img src="https://via.placeholder.com/300" alt="">
          <div class="position-absolute dados">
            <h3 class="text-right text">Testes?<br>Teste teste teste teste</h3>
            <button class="btn btn-primary float-right">veja detalhes</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Answer №3

inserted 

.image {
  min-height: 300px;
  object-fit: cover;
  width: 100%
}

into img 

.info {
  bottom: 10px;
  right: 0;
}

.text-info {
  font-family: "Arial Bold", Arial;
  font-weight: 700;
  font-size: 22px;
  color: #ffffff !important;
}

img {
  min-height: 300px;
  object-fit: cover;
  width: 100%
}
<!DOCTYPE html>
<html lang="pt-br">

<head>
  <title>Test</title>

  <meta charset="UTF-8>">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />

</head>

<body>
  <div class="container">
    <div class="row mt-4">
      <div class="col-4">
        <div class="position-relative">
          <img src="https://via.placeholder.com/300" alt="">
          <div class="position-absolute info">
            <h3 class="text-right text-info">Tests?<br>Test test test test</h3>
            <button class="btn btn-primary float-right">see details</button>
          </div>
        </div>
      </div>
      <div class="col-4">
        <div class="position-relative">
          <img class="img-fluid" src="https://via.placeholder.com/300" alt="">
          <div class="position-absolute info">
            <h3 class="text-right text-info">Tests?<br>Test test test test</h3>
            <button class="btn btn-primary float-right">see details</button>
          </div>
        </div>
      </div>
      <div class="col-4">
        <div class="position-relative">
          <img class="img-fluid" src="https://via.placeholder.com/300" alt="">
          <div class="position-absolute info">
            <h3 class="text-right text-info">Tests?<br>Test test test test</h3>
            <button class="btn btn-primary float-right">see details</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

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

placing a dropdown within a navigation bar that is inside a `container-fluid`

I am having trouble positioning my dropdown in front of my sign up button and navbar. When I open the dropdown, it expands the navbar instead of overlapping it. It also offsets my sign up button. Below is the code for my navbar and a picture of what the is ...

htmlcssbootstrap-5

Alignment of the table with a fixed header and scrollable body

Currently, I am experiencing an issue with aligning a table. My aim is to have a fixed header and a scrollable body for the table. To do this, I have aligned the table header and body using: display: table-header-group For the table body, I have applied ...

javascriptjqueryhtmlcss

Issue arising from background change upon component focus

My component needs to change its background color when focused, but for some reason it's not working. The hover effect works fine, but the focus doesn't. Can anyone assist me with this issue? import { CardContainer } from './styles' in ...

javascripthtmlcssreactjsstyled-components

Overlay on Tailwindcss Background Video

For a while now, I've been experimenting with incorporating a video background in a div with an overlay that darkens it. Additionally, there needs to be text within the same container. Can anyone provide guidance on achieving this using Tailwind CSS? ...

cssbackgroundtailwind-css

Using CSS to create various h1 headings with distinct colors and sizes

I am currently working with CSS and HTML, trying to replicate the design shown in this image: https://i.stack.imgur.com/Uyczp.png Initially, I attempted to achieve this by using multiple h1 tags, but after researching further, I realized that it is gener ...

htmlcsstextfontshtml-heading

Building a grid layout using BootstrapWould you like to learn how

Could you please clarify the distinction between "test 1" and "test 2" when utilizing Bootstrap 4? I am attempting to design a layout that includes a small gutter between columns. One of them involves elements within the row, while the other does not. < ...

bootstrap-4

The presentation of an HTML table varies between Gmail and web browsers

<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <table width="100%" height="131" border="0" cellspacing="0" cellpadding="0"> <tr> <td wid ...

htmlcss

When viewed on mobile devices, two 100vh sections are overlapping each other

My goal is to create two sections that fill the entire viewport height in the browser. The code below is functioning properly on the desktop version. However, on mobile devices, the content of section two (consisting of 3 bootstrap columns with text) is ov ...

htmlcsstwitter-bootstrapresponsive

What is the method for activating or deactivating pointer events for a particular section of an element?

Is it feasible to deactivate pointer events for only a portion of an element rather than the entire element? For instance, as shown in the image below.. https://i.sstatic.net/rnS7M.png Perhaps one could utilize another element to cover the specific area ...

htmlcss

Creating a full-width menu with Material UI - a step-by-step guide

I am currently working on creating a mobile menu that spans the full width of the screen. Despite my efforts, it seems like I might be misunderstanding something as my CSS rules are not being applied correctly. Here is a live code example for reference: ...

cssreactjsmaterial-ui

Tips for maintaining the full width of an image within the viewport while also preserving a fixed aspect ratio of 16:9

After extensive research on the topic, I find the solution to implementing a parallax effect using GSscrolltrigger a bit complex. This is mainly because I need to dynamically adjust the height of the parent div based on @media CSS, while ensuring that the ...

cssbootstrap-4responsive-design

Utilize a custom attribute in Bootstrap 4 tooltips instead of the standard "title" attribute to define the text displayed in

For my application, I'm utilizing Bootstrap 4 along with tooltips. My objective is to toggle the tooltips individually and only display them upon clicking. The following code allows me to achieve this: <input type="text" id="name" class="form-cont ...

javascriptjqueryhtmlcssbootstrap-4

Instant hover response in the dropdown menu feature of 'bootstrap4'

Despite numerous attempts, I cannot seem to add a delay to the dropdown-menu in my navigation bar. The other parts of the menu are working perfectly with a nice delay. I've tried including "jQuery .dropdown-menu .delay(400)" and also added "transitio ...

css

CSS changes not being reflected in different web browsers

I am facing a frustrating issue with my WordPress website as changes made in my .CSS file do not seem to reflect in Chrome, Firefox or Edge browsers. The CSS is loaded directly from the <link href="/wp-content/themes/mytheme/css/style.css" type="text/c ...

htmlcsscachingreload

A sporadic glitch in IE10 appears while attempting to translate text with a border-radius feature

I need some advice regarding a rendering issue I am experiencing in IE10. I have created an animated-flip effect that works perfectly in all the browsers I need it to. However, during testing, I noticed random border-like lines appearing for no apparent re ...

htmlcssanimation

"Using CSS to align content in a table-row format on an HTML display

I'm struggling to align two components using the <div display='table-cell'> method. The first component is showing a gap at the top which I want to remove in order to have them aligned perfectly. Check out the JsFiddle example here: h ...

htmlcsstwitter-bootstrap

The sequence of HTML attributes

Could there be a subjective angle to this question (or maybe not)... I work on crafting web designs and applications using Visual Studio and typically Bootstrap. When I drag and drop a CSS file into an HTML document, the code generated by Visual Studio loo ...

javascripthtmlcssattributescoding-style

What are some methods to eliminate the black border from a circular icon?

When hovering over the mouse, the background color changes to black. However, I would like to remove the black border and have the icon displayed as a circle. .our-activity-div { padding: 20px; text-align: center; } .our-activity-inner { width: 3 ...

htmlcss

Is there a way to relocate the collapse button to the bottom after it has been clicked?

I have been using Bootstrap to design a expandable card that can be expanded when clicked. I am currently using the collapse feature, but I am facing an issue where the button remains in its original position, whereas I want it to move to the bottom of the ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Add two columns for mobile devices in the Woocommerce platform

How can I display 2 columns of products in my Woocommerce shop using a child theme based on 'Shopisle'? Is a CSS-only solution the best approach for this task, and will it work smoothly without any bugs? I suspect that the theme is built on Boot ...

csswordpresswoocommerce