Creating visually appealing websites is made easy with Bootstrap 5's innovative image and

I am working on a Bootstrap 5 website template and I want to add text with a white background in the center of an image.

Instead of seeing just a white color over the image, I would like to have a white rectangle with a title and text centered on the image.

.our-company-title {
  line-height: 31px;
  letter-spacing: 0;
  color: #000;
  font-size: 25px;
}

.our-company-text {
  color: #787878;
  line-height: 150%;
  font-size: 18px;
  letter-spacing: 0;
}

.contact-image-box {
  position: absolute;
  background-color: #fff;
  text-align: center;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="afcdc0c0dbdcdbddcedfef9a819c819d">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<div class="container-fluid overflow-hidden">
  <div class="row">
    <div class="col-12 col-md-6 p-0 position-relative">
      <div class="position-relative">
        <img class="img-fluid w-100 h-100 object-fit-cover" src="https://via.placeholder.com/300x100" alt="">

        <div class="contact-image-box">
          <h3 class="our-company-title">Title</h3>
          <p class="our-company-text">Company text</p>
        </div>
      </div>
    </div>

    <div class="col-12 col-md-6 align-self-md-center">
      content here
    </div>
  </div>
</div>

I also attempted adding the following CSS, but the title and text are still aligning left rather than center:

.contact-image-box {
    max-width: 400px;
}
htmlcsstwitter-bootstrapbootstrap-5

Answer №1

in my opinion, a good approach would be to incorporate an inner div within the contact-image-box. The inner div should house the text and other content, while the contact-image-box div acts as a container. Apply flexbox properties to the container div and set a white background color for the inner div.

This is what it could look like:

.contact-image-box { 
  inset: 0; // this is equivalent to the top, bottom, left and right set to 0
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
        
   & > div {
     background-color: white;
   }

}

Answer №2

If you wish to apply the background-color to both the h3 and p, follow the example below:

.our-company-title{
    line-height: 31px;
    letter-spacing: 0;
    color: #000;
    font-size: 25px;
    background-color:#fff;
}

.our-company-text{
    color: #787878;
    line-height: 150%;
    font-size: 18px;
    letter-spacing: 0;
    background-color: #fff;
}
img {
  width: 100%;
  height: 100%;
}
.contact-image-box {
    position: absolute;
    text-align: center;
    /* background-color:#fff; */
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
<div class="container-fluid overflow-hidden">
    <div class="row">
        <div class="col-12 col-md-6 p-0 position-relative">
            <div class="position-relative">
                <img class="img-fluid w-100 h-100 object-fit-cover" loading="lazy" src="https://plus.unsplash.com/premium_photo-1700268374954-f06052915608" alt="">
                <div class="contact-image-box">
                    <h3 class="our-company-title">Title</h3>
                    <p class="our-company-text">Company text</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 align-self-md-center">
        content here
        </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

When it comes to printing, the @Media CSS rule

I have a specific structure on my HTML page: <html> <head></head> <body> <nav> .... navigation menu </nav> <div> <div></div> <div class="to-print"> <h2>Th ...

htmlcssprintingmedia

Strangely peculiar glitch found in browsers built on the Chromium platform

During a school assignment, I'm attempting to adjust the width of a button using Javascript. Below is my code: const button = document.querySelector("button"); button.addEventListener("click", () => { console.log(button.offsetWidth); butto ...

javascripthtmlgoogle-chromemicrosoft-edgechromium

Text alongside a perfectly aligned image

I'm facing a dilemma. I've been striving to replicate the layout of my training website blocks to look like this: http://prntscr.com/4cd4gm. However, aligning text and paragraphs has become an obstacle for me. Despite succeeding in aligning pictu ...

htmlcssimagetextalignment

Tips for preventing the collapse of a table row using a button?

I have implemented a Bootstrap collapse feature on my table row. Currently, the collapse can be triggered by clicking anywhere on the row, which is working as intended. However, I would like to make one exception - if the user clicks on the desktop icon i ...

javascriptjqueryhtmltwitter-bootstrap

Discover the elusive tag that holds the specified text

My code snippet in HTML looks like this: <body> <div class="afds"> <span class="dfsdf">mytext</span> </div> <div class="sdf dzf"> <h1>some random text</h1> ...

pythonhtmlbeautifulsouphtml-parsing

execute a retrieval query on an html pop-up

I have recently created an HTML web resource that I am displaying when a ribbon button is clicked. Within this popup, there is a dropdown list that I intend to fill with records obtained through a fetchXml query. The issue I'm encountering is that de ...

javascripthtmldynamics-crm-2011

What is the best way to send HTML tag content to mark.js and delimit them with a space or comma?

I have been utilizing the mark.js library to highlight keywords on a webpage, and it's been working well. However, I now need to insert an extra space or a comma after each tag such as h1, h2, etc. Initially, I thought about using a loop like the one ...

javascripthtmlarraysmark.js

Set boundaries for the width and height of an image in the input field

Looking to restrict the size of an image in an input field using HTML, CSS, and JavaScript/jQuery. Goal is to maintain a perfect square aspect ratio for profile photo uploads (for example, 200x200 or 300x300). ...

javascriptjqueryhtmlcss

The URL is unresponsive following the deployment of the production build in tailwind

The image URL in my project is functioning correctly in the VITE server environment before the production build. However, after the production build, it fails to display the correct path of the image in the HTML. All other images are displaying properly ex ...

htmlurlbackgroundbackground-imagetailwind-css

Updating HTML label values using jQuery in a loop based on their index position

I am having an issue with my ajax call where I want to loop through each label in a class and set their value to the response returned from the server. However, the current code sets all labels to the same value instead of setting individual values based o ...

javahtmlajaxjquery

Every time I attempt to load the table, I encounter an error

Encountering errors when attempting to load the table: 'Uncaught ReferenceError: usersArray is not defined at loadUsers (trgames.js:20:17) at trgames.js:22:1' and 'Uncaught TypeError: Cannot set properties of null (setting ...

javascripthtmlajax

Ways to avoid Parents Click Event from triggering during a Child's (Grandchild's) click event

My parent div has a unique feature where clicking on it reveals one of the child divs, and clicking again toggles the visibility of the child div. Inside this child div, there is a switch toggle that functions as a hidden checkbox. The issue I'm facin ...

javascripthtmljquerycss

Finding the dynamic width of a div using JavaScript

I have two divs named demo1 and demo2. I want the width of demo2 to automatically adjust when I drag demo1 left to right or right to left. <div class="wrapper"> <div class="demo"></div> <div class="demo2"&g ...

javascriptjquerycssresizablejquery-ui-resizable

Tips for creating a horizontally scrolling div

Here is the CSS for the div that needs to be able to scroll horizontally: .form-holder{ padding-left: 20px; width: auto; background: ; overflow-x: auto; max-height: 300px; padding-bottom: 30px; } Every ...

jquerycss

What is the best way to utilize display:flex and justify-content:space-between, ensuring that the flex-item is centered when there is only a single item present?

How can I center a single flex item in a container with justify-content: space-between in CSS? #container { display: flex; justify-content: space-between; } <div id="container"> <div class='flex-item'></div> . ...

htmlcssflexbox

Troubleshooting issues when utilizing flexbox in Firefox and Chrome version 48

Chrome 47 Behavior: The .scroll div scrolls correctly in Chrome 47, taking up 100% height using flex. Firefox Behavior: In Firefox, the .scroll div does not scroll properly and instead uses the content height. What is the solution that works across diffe ...

htmlcssscrollflexbox

Creating and launching multiple tabs in node.js (cloud9 IDE): A step-by-step guide

I am currently working on a choice provider. This program will take a (choice) program with a variable number of choices. For example: Let's say we want to make a coffee with two choices - 1. ...

htmlnode.jstabssocket.iocloud9-ide

toggle switch for numerical input

Whenever the "Qty" radio button is selected, I need to activate an input box that accepts numbers. Conversely, when the "rate" radio button is clicked, I want to disable this input box. This is how I designed it: <input type="radio" class="radioBtn" ...

javascriptjqueryhtml

SQL/PHP challenge: Trouble updating a record

As a newcomer to PHP, I apologize if my question is basic. I am attempting to update a record using PHP / SQL. Despite researching the error message online, I cannot pinpoint the issue within my code: An error occurred: SQLSTATE[HY093]: Invalid paramet ...

phphtmlsqlrecord

Adjust the width of the dropdown menu in Twitter Bootstrap's typeahead feature depending on the search

Not entirely certain if this issue is related to jQuery, but there's a strong suspicion that it might be. The problem at hand can best be described by the picture provided: The query output exceeds the width and doesn't resize or scale according ...

csstwitter-bootstrap