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

Automatically adjust the tooltip's position if it extends beyond the width of the browser

I am looking for a way to ensure that when the tooltip width exceeds the browser's viewable area, it will automatically reposition itself so that the content can be fully viewed. It is important that the tooltip does not overlap on the referenced div ...

jquerycss

Material UI Card shadow effect getting cropped

Currently experiencing an uncommon issue while using Material UI's Card component - the box-shadow is cut off on the top and bottom sides. Any suggestions on how to resolve this problem? Check out my code below: import React, { Component } from & ...

javascriptcssmaterial-ui

Javascript enables dynamic field addition to tables

I have JSON data that needs to be displayed in an HTML table. To input the values, I have individual fields for firstname, lastname, email, and phone number, along with an "Add Row" button. When I click the "Add Row" button, I want the entered values to b ...

javascripthtml

It appears that Internet Explorer is still animating/processing my loading.gif despite being set to display:none

It seems that the issue I'm encountering is related to the inconsistent starting position of the loading.gif animation when performing an ajax request. In Internet Explorer, the animation appears to start from a random point, while in Firefox it alway ...

htmlcss

Is your browser tab failing to display the complete URL?

Encountering a strange issue while working on my current website project: When you click on "about," it does take you to the correct page, but upon refreshing the page, it redirects back to the home page. The same scenario is happening with other pages as ...

htmlcss

Modify Knockout applyBindings to interpret select choices as numeric values

Utilizing Knockout alongside html select / option (check out Fiddle): <select data-bind="value: Width"> <option>10</option> <option>100</option> </select> Upon invoking applyBindings, the options are interprete ...

javascripthtmlknockout.js

Searching for an AngularJS and Bootstrap Dual Listbox Solution

I need a component like this to integrate into my project: I am hoping to add it using npm. However, I have tried some of the examples available but faced issues (encountered exceptions or only found bower instead of npm). The following are the examples ...

javascriptangularjstwitter-bootstrapnpm

Tips for including a decimal point in an angular reactive form control when the initial value is 1 or higher

I am trying to input a decimal number with 1 and one zero like 1.0 <input type="number" formControlName="global_velocity_weight" /> this.form = this.fb.group({ global_velocity_weight: new FormControl(1.0, { validators: [Valida ...

javascripthtmlangulartypescriptangular-reactive-forms

Struggling with integrating Bootstrap 4 Modals in Angular 2 environment

I attempted to incorporate a modal from into my navbar, but nothing happens when I click on it. <div class="pos-f-t fixed-top header"> <nav class="navbar navbar-inverse bg-inverse navbar-toggleable-md"> <button class="navbar- ...

javascripthtmltwitter-bootstrapangular

Can a YouTube video be triggered to play when a specific CSS style is selected?

I am searching for a method to display and play different YouTube videos based on a selected CSS style from a drop-down menu. I believe JavaScript can be utilized to detect the chosen CSS. Include the following in the html header of the page. <script ...

javascriptcsshtmlyoutubeembed

Having trouble toggling the navbar on and off in mobile. Error message: Unable to read parentnode of undefined

When I try to make my mobile navbar full screen on a mobile device, the hamburger button works as expected when clicked. Initially, all the links are displayed in full page view, but once I click on a link, it disappears and takes me to the respective sect ...

javascripthtmlcss

Populate your HTML with JSON data

I need some guidance on how to achieve a specific task. I have a PHP file that retrieves data from a MySQL database and returns it in JSON format. Now, I want to display this data in HTML with "data_from_json" replaced by "18.5". Any assistance would be gr ...

javascripthtmljson

Horizontal compression applied to background image

After following a suggestion ("css only technique number 1" found here http://css-tricks.com/perfect-full-page-background-image/), I experimented with using an inline img element and CSS to create a background image that would occupy the entire browser win ...

htmlcssbackground-image

How can I close the colorbox and open a new regular window when clicking a hyperlink?

Hey there, I'm currently facing an issue with closing a colorbox when clicking "Click here to return to our website" and opening a regular browser window instead. You can check out the problem on this page: On the left navigation bar at the bottom i ...

jqueryhtmlcolorbox

What is the best way to format MarkDown content within a nextJs environment?

Markdown-it is successfully converting markdown to html in my Nextjs project. However, I am facing a styling issue with specific elements such as h2, h3, ul, and li. Here's the code snippet: <h1 className="text-3xl mb-3 leading-snug d ...

cssnext.jsmarkdown

.htaccess 404 not redirecting properly

I need help with the following code snippet: # Keep this line intact for mod_rewrite rules to function properly RewriteBase / ErrorDocument 404 /errors/404.php Despite having the file 404.php in the errors folder, it doesn't seem to be working as ...

html.htaccess

Switch the CSS class with an HTML tag

Can someone help me transform this code snippet with Python 3 and Beautiful Soup? <span class="ld-nowrap"> 20th century’s </span> I need to convert it to: <em> 20th century’s </em> Any suggestions on how to achieve t ...

pythonhtmlcssbeautifulsoup

Store the checkbox's data in the database for safekeeping

Hey there, I'm working on saving the value of a checkbox using PHP. The twist is that the value is generated through JavaScript. How can I handle this scenario and save the value using PHP? Checkbox: <input type='checkbox' name='ca ...

javascriptphphtmlcheckbox

Experiencing an issue with referrer: The global symbol needs an explicit package name

my $refer = $ENV{HTTP_REFERER}; my $gk1 = substr($str1, -4); if ($gk1 = .swf) { my $antigk = "gk detected"; } else { my $antigk = $link; } I am encountering issues with this code after making some modifications. What could be causing the errors? I ...

htmlperl

The CSS command for displaying additional content is not functioning within table elements

I'm attempting to add a 'read more' arrow to the third column, which should expand the text in the first column when clicked. I have the following code, and it works fine outside of a table but not inside one. Where am I going wrong? I prefe ...

css