What is the best way to incorporate responsive centered text into my HTML element using Bootstrap 4?

Is there a way to add a responsive centered text element to my <a> element without being affected by the overlay color? Also, is there an alternative method to using an extra overlay div in Bootstrap 4?

Check out this link for more details.

HTML

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <a class="item" href="#">
        <div class="image">
          <img src="https://lorempixel.com/output/technics-q-c-640-480-4.jpg" alt="" />
          <div class="overlay"></div>
        </div>
      </a>
    </div>
  </div>
</div>

CSS

.image { position: relative;}
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; right:0; bottom:0; background-color: rgba(0,0,0,0.5);}
htmlcsstwitter-bootstrap

Answer №1

Here's a method you can use:

HTML

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <a class="item" href="#">
        <div class="image">
          <img src="https://lorempixel.com/output/technics-q-c-640-480-4.jpg" alt="" />
          <div class="overlay"></div>
        </div>
        <span class="title">Centered Text</span>
      </a>
    </div>
  </div>
</div>

CSS

.image { position: relative;}
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; right:0; bottom:0; background-color: rgba(0,0,0,0.5);}
.title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

An alternative approach utilizing bootstrap classes:

HTML

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <a class="item" href="#">
        <div class="image">
          <img src="https://lorempixel.com/output/technics-q-c-640-480-4.jpg" alt="" />
          <div class="overlay"></div>
        </div>

        <div class="title d-flex justify-content-center align-items-center">
            Centered Text
        </div>
      </a>
    </div>
  </div>
</div>

CSS

.image { position: relative;}
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; right:0; bottom:0; background-color: rgba(0,0,0,0.5);}
.title { position: absolute; top: 0; left: 0; right:0; bottom:0;}

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

Delete a table row based on the values of checkboxes using Jquery

I've successfully generated an array from values selected in an HTML form using checkboxes. Is there a way to pass these selected checkbox values to jQuery and utilize the code $('tr#myTableRow').remove(); for each value in the array submit ...

jqueryhtmlforms

Establishing the Default Volume within a script

I'm looking to adjust the default volume of music on my website. Currently, it plays too loudly on load, but I have a slider bar that allows users to change the volume. How can I set the default volume to be 25% of the slider? CHECK OUT MY WEBSITE! ...

javascripthtml

Fluid div causing navigation to display improperly

I am currently working on a navigation design where I want to have an image above each list item instead of having individual images for each item. It looks great when the screen is at full size, but as soon as I minimize it, the list items start stacking ...

htmlcss

Tips for displaying cards with responsive design utilizing Bootstrap 5

How can I display cards responsively for mobile, desktop, and iPad? My goal is to have: - One column for mobile - Two columns for iPad - Four columns for desktop The current code only works for mobile and desktop, not for iPad. On my iPad, it's sh ...

cssresponsive-designbootstrap-5

The behavior of table elements is distinct when using align="center" compared to utilizing CSS text-align: center

In my table setup, I have a parent table with a width of 100% and a child table with a width of 300px. I attempted to center the child table using CSS by setting text-align: center; (https://jsfiddle.net/wrzo7LLb/1/) <table class="body"> <tr> ...

htmlcss

Ways to initiate animation using CSS when the page loads

Is there a way to initialize the counter on page load? Even though I was successful in making it start on hover, I couldn't figure out how to make it work when the page loads. Here is the JavaScript code: var root = document.querySelector(':root ...

javascriptcssanimationtextcounter

Should we avoid styling HTML tags?

Would it be considered poor practice, for instance, to apply the following CSS rules to all images on my webpage in order to make them responsive: img { display: inline-block; height: auto; max-width: 100%; } Instead of using img-responsive on each ...

htmlcss

iOS7 webkit introduces a new feature called span word break

After upgrading my phone to iOS7 today, I came across a strange issue. (blog.niwyclin.org) This is just a test post on my website Everything looks good on the desktop browser. When I used Responsivator to check, it appeared perfect, like this (i.minus.c ...

htmlioscsswebkitios7

How can I make an image disappear after animation with CSS?

I experimented with this code snippet in an attempt to fade out an image, .splash-wrapper { animation: fadeIn 4s; -webkit-animation: fadeIn 4s; -moz-animation: fadeIn 4s; -o-animation: fadeIn 4s; -ms-animation: fadeIn 4s; animation-duration: ...

htmlcssfadeout

Customizing the Accordion Header Icon in Bootstrap UI when Tab is Expanded

Is there a way to modify the accordion header icon when the tab is expanded? For the Accordion plunke URL click here: http://plnkr.co/edit/7HMhoHk9AWyBAHALgD0P?p=preview <accordion-group> <accordion-heading> I can have ma ...

twitter-bootstrapangularjs

How to pass the id value between pages in web developmentactics?

I've been struggling to call the id value of one page in another for a while now. I assigned the id value "addedcart" to the form and tried to call it in my PHP code, but no cart value is being displayed. I'm not sure if I am calling the id corre ...

phphtml

Unlock the innerHTML of a DIV by clicking a button with ng-click in Angular JS

I am curious about something. There is a <div> and a <button> in my code. I am looking to access the inner markup of the <div> within the ng-click function without relying on jQuery. Can you give me some guidance? <div id = text-entry ...

javascriptjqueryhtmlcssangularjs

Having trouble with Ionic 4 navigation not triggering after a single click, requiring multiple clicks to navigate

I have a long list of items, around 40 in total, that load a page describing each item with photos, URLs, and other content. However, I find that I need to click two to three times before reaching this page. I suspect that the excessive use of HTML compone ...

androidhtmltypescriptionic-framework

The .angular-cli.json file is causing issues with loading scripts

I have recently updated my .angular-cli.json file by adding new scripts in the following format: "apps": [ { "root": "src", "outDir": "dist", "assets": [ "assets", "favicon.ico" ], "index": "index.html ...

javascriptangulartwitter-bootstrapbootstrap-4

Update a particular class following an AJAX POST request in JavaScript

After conducting extensive research, I have come here seeking your assistance with a particular issue: I am using a comment system with multiple forms on the same page (utilizing FOSCommentBundle in Symfony). My goal is to be able to post comments via Aja ...

javascriptjqueryhtmlajaxsymfony

Showcasing pictures with a prominent large image accompanied by two smaller ones on the right side

In my use of Material-ui-next, I am attempting to create images in a specific layout. ------ --------- | | | | 2 | | | | 1 |---| | | | | 3 | ------ --------- I have encountered some unusual issues. 1 - 3 appears below 1 ...

javascriptcssflexboxmaterial-ui

Changing the color of buttons within the anchor and menu-separator classes in WordPress

https://i.sstatic.net/lYs6O.png Hi everyone, I'm new to WordPress and need help changing a green button to blue. I have found the button in an anchor tag with the class "menu-separator." Is there a way for me to write custom CSS to change its color? ...

htmlcsswordpress

How can I apply an underline effect when hovering over navigation links in a responsive menu?

I've successfully added an underline effect on hover for the navigation menu. However, I encountered an issue with the responsiveness of the menu. When viewed on screens smaller than 600px, the underline effect covers the entire width of the block ins ...

javascripthtmlcsswordpress

Can bootstrap columns be offset only on large devices?

Is there a way I can have the title column float to the right side of the page only on medium devices and larger screens, while keeping it centered for smaller devices like phones? Any advice is appreciated! <div class="section header"> <div ...

htmlcsstwitter-bootstrap

Troubleshooting issues with adding child elements in JavaScript

Styling with CSS: ul #allposts li{ height: 50px; width: 50px; background-color: yellow; border: 1px solid yellow; } Creating HTML structure: <ul id = "allposts"></ul> Adding JavaScript functionality: var container = documen ...

javascripthtmlcssappendchild