CODEWITHSUNDEEP
htmlcsstwitter-bootstraplayoutbootstrap-modal
Bodil132
Bodil132

Reputation: 115

How do I center this <a> tag on this modal in Bootstrap?

Hello thank you for looking at my question,

I'm trying so hard to center this link on a modal in bootstrap. I'm not using the grid system or rows. There's a BS carousel in the modal and I'm able to center the elements in that with margin:0 auto;

Heres a visualisation of where the links is, it stubbornly stays on the left of the modal.

Click Here to see image

The link should be right under the carousel indicators.

HTML snippet:

.
.
.
<div>
    <ol>
        <li> data-slide-to="1"></li>
        <li data-target="#home-price-guide-carousel" data-slide-to="2"></li>
    </ol>

</div>

<a class="btn-center" href="#">Continue</a>

<div class="modal-footer">

</div>
.
.
.

Relevant CSS:

.btn - center {
    color: #95d63b;
    margin:0 auto;
    float:none;
}

Basically, how do I get btn-center to actually center.

Upvotes: 1

Views: 70

Answers (3)

Manikandan
Manikandan

Reputation: 253

You can also try to make a tag with 100% and align center

.center-link{

   text-align:center;

   width:100%;

   display:block; /* Displays an element as a block element (like <p>) */
}

Upvotes: 0

Milind Gokhale
Milind Gokhale

Reputation: 585

2 options:

  1. text-align:center;

  2. .btn-center{ color:#95d63b; position:absolute; transform:translate(-50%,-50%); left:50%; }

you can try it here

Upvotes: 1

D Jones
D Jones

Reputation: 76

Amend your css above and add the below

Text-align: center;

Upvotes: 0

Related Questions