How can I align a link to the bottom right?

user_16896247 0
Viewed 104

I want to align this link to right bottom. I already tried adding the below CSS but it only align in the container. I want it to be align in the hero-area.

.rt {
  position: absolute;
  right: 0px;
  bottom: 0px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="hero-area hero-style-03 christian-hero-bg">
  <div class="container">
    <div class="row">
      <div class="col-lg-5 col-md-7 ml-auto">
        <div class="hero-content text-left">
          <h2 class="text-black">Text1 </h2>
          <div class="ht-btn-area section-space--mt_40 rt">
            <a href="#" class="hero-btn">x</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

bootstrap-4 css html
3 Answers

Please check following, as i have changed container to container-fluid because you want it under hero-area.

  a.hero-btn {
    position: absolute;
    bottom: 8px;
    right: 16px;
    font-size: 18px;
}
<div class="hero-area hero-style-03 christian-hero-bg">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-5 col-md-7 ml-auto">
                        <div class="hero-content text-left">
                            <h2 class="text-black">Text1 </h2>
                            
<div class="ht-btn-area section-space--mt_40 rt">
                                <a href="#" class="hero-btn">x</a>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

user_62242280

Add Bootstrap's position:relative class, position-relative to your hero's classes:

.rt
{
  position:absolute;
  right:0px;
  bottom:0px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="position-relative hero-area hero-style-03 christian-hero-bg">
    <div class="container">
        <div class="row">
            <div class="col-lg-5 col-md-7 ml-auto">
                <div class="hero-content text-left">
                    <h2 class="text-black">Text1 </h2>
                    <div class="ht-btn-area section-space--mt_40 rt">
                        <a href="#" class="hero-btn">x</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Absolutely positioned elements are positioned with respect to their closest positioned (non-static) ancestor, so setting position: relative on the hero makes the x move in relation to it instead of the body.

user_6164430

Yor master div position is up-left for fixing this problem you most give rt class to your master div. Example

.rt
{
  position:absolute;
  right:0px;
  bottom:0px;
}

<div class="hero-area hero-style-03 christian-hero-bg rt">
...
</div>

Or you most give all page space to div

user_112933970
Related