CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
rzk666
rzk666

Reputation: 223

Aligning text inside a Bootstrap button

So as the title suggests, I'm trying to align text inside a Bootstrap button - I need to do that using my own custom CSS file.

I've created my new style.css file and linked it in the header (AFTER the Bootstrap CSS link), then I added a custom class (btn1) to my Bootstrap button:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn1" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>

I then added the following code in my CSS:

.btn1{
  text-align: left !important;
}

But the text on the button is still not aligned to the left. Any insights as for why it happens, and ways to solve the problem?

Thanks!

Upvotes: 2

Views: 6137

Answers (4)

alle X
alle X

Reputation: 13

Since Bootstrap 5.x use text-start instead of text-left

https://getbootstrap.com/docs/5.0/utilities/text/

Upvotes: 0

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24404

Try this way 👇

.btn.btn1{
  text-align: left;
  min-width:250px;
}

note this way you don't need to add !important

Upvotes: 1

mahan
mahan

Reputation: 14935

Buttons in bootstrap are inline-block elements and do not have defined width. Therefore, text-align: left does not work.

You need to specify width of it explicitly and use align-left. And if you need to remove event the left padding, use pl-0. 

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-5">
  <div class="row">
    <div class="col">
      <button class="btn btn-primary pl-0">Button</button>
    </div>
    <div class="col">
      <button class="btn btn-primary w-100 text-left">Button</button>
    </div>
    <div class="col">
      <button class="btn btn-primary pl-0 w-100 text-left">Button</button>
    </div>
  </div>
</div>

https://codepen.io/anon/pen/MMgxKz

Upvotes: 1

user11609596
user11609596

Reputation:

You will need to change the padding on your custom css to 0, as this is still picking up the bootstrap padding. Then you can set the width to whatever size you like and add custom padding if you wanted.

Example: 

.btn1{
  text-align: left !important;
  padding: 0;
  width: 50px;
}

Upvotes: 2

Related Questions