CODEWITHSUNDEEP
htmlcsslaraveltwitter-bootstrapbootstrap-4
Volka Dimitrev
Volka Dimitrev

Reputation: 387

Button text not properly centered in laravel and bootstrap 4

I have a button in my laravel application

<a href="{{ url('/product') }}" class="btn btn-default px-5 mt-3 rounded subscribe" role="button">{{ __('More info') }}</a>

So I need the button text to be centered in the button. But currently the text is not properly centered to the button

enter image description here

Currently the button look like this. The text is not well centered.

In my css I have following code for the class, subscribe

.subscribe {
            background-color: #5ABDBA;
            color: #fff;
            border-radius: 40px!important;
            height: 43px;
            text-transform: capitalize!important;
            vertical-align: middle;
        }

And I'm using bootstrap 4 .

Upvotes: 0

Views: 290

Answers (2)

Boss COTIGA
Boss COTIGA

Reputation: 1042

Why force the button height ?

And always favor framework existing classes

.subscribe { background-color: #5abdba; }

<a href="/" class="btn btn-default px-5 mt-3 rounded-pill text-white text-capitalize subscribe"  role="button">{{ __('More info') }}</a>

Upvotes: 1

knubbe
knubbe

Reputation: 1182

If you want to keep height in css then in class of a tag set d-flex and align-items-center

Upvotes: 0

Related Questions