1

I'm trying to display text on top of the text with bootstrap4

My HTML looks like this

<div class="d-lg-flex align-items-lg-start intro-heading text-uppercase">
   <span class="text-black-50 d-inline float-none" style="width:749px;filter: blur(2px);margin: 0px;">
  INTRODUCTION</span>
  <span class="text-white d-inline float-none" style="width:749px;filter: blur(0px);color: #ffffff;">INTRODUCTION</span>
</div>

I would like the text to not be side by side but to display on top of the other text if anyone could help it would be greatly appreciated

ish1104
  • 401
  • 4
  • 19
svnty
  • 19
  • 1
  • 7
  • you would need to use [absolute positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/position) – Pete Aug 21 '19 at 09:09

5 Answers5

0

You have to give your wrapper, position: relative. And second span position: absolute and left: 0.

<div class="d-lg-flex align-items-lg-start intro-heading text-uppercase" style="position: relative">
   <span class="text-black-50 d-inline float-none" style="width:749px;filter: blur(2px);margin: 0px;">
  INTRODUCTION</span>
  <span class="text-white d-inline float-none" style="width:749px;filter: blur(0px);color: #ffffff; position: absolute; left: 0">INTRODUCTION</span>
</div>

Your wrapper has to be relative, because then all its absolute children will use it as bounds.

And I would highly recommend against using inline styles, but rather give your elements classes, and then write css in external file. It has quite few advatages as maintainability, reusability, it can be cached by browser, etc.

Lukáš Gibo Vaic
  • 3,960
  • 1
  • 18
  • 30
0

Use pseudo elements. I presume this is what you needed

.wrapper {
  background: grey;
}

.text-black-50:before {
  filter: blur(2px);
  margin: 0px;
  content: 'INTRODUCTION';
  position: absolute;
  top: 0;
  left: 0;
}

.text-black-50 {
  width: 749px;
  filter: blur(0px);
  color: #ffffff;
}
<div class="d-lg-flex wrapper align-items-lg-start intro-heading text-uppercase">
  <span class="text-black-50 d-inline float-none">
  INTRODUCTION</span>
</div>
Soothran
  • 1,233
  • 4
  • 14
0

While lukas answer is correct, the intended way to add a blurred shadow to some text is to add the css proprety text-shadow to your second span.

<span class="text-white d-inline float-none" style="width:749px;color: #ffffff;text-shadow: 0 0 4px #222;">INTRODUCTION</span>
Neil
  • 390
  • 2
  • 14
0

<div>
  <span class="text-white d-inline float-none" style="width:749px;filter: blur(0px);color: #00000;">Whatever your text is</span>
</div>
<br>
<div class="d-lg-flex align-items-lg-start intro-heading text-uppercase">
   <span class="text-black-50 d-inline float-none" style="width:749px;filter: blur(2px);margin: 0px;">
  INTRODUCTION</span>
<span class="text-white d-inline float-none" style="width:749px;filter: blur(0px);color: #ffff;">INTRODUCTION</span>
</div>
 <br>
<div>
  <span class="text-white d-inline float-none" style="width:749px;filter: blur(0px);color: #00000;">Whatever your text is</span>
</div>
giuseppe
  • 105
  • 9
0

Wrap them, then set the one you want to be on top position:absolute; and then set its left, right, top and bottom values to adjust it to exactly where you want. In addition you might consider z-index too to specify which should be on top.

Muayyat Billah
  • 27
  • 6