Centering text within a Bootstrap button

  • I have encountered similar questions and attempted the suggested solutions without success *

  • My custom CSS file is correctly linked 100% to the HTML file I am working on *

  • I am utilizing Bootstrap v4.3.1 *

As the heading implies, my goal is to align text within a Bootstrap button using my own custom CSS file.

I have created a new style.css file and linked it in the header (after the Bootstrap CSS link), then I included 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>

Next, I added the following code to my CSS:

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

However, the text on the button remains unaligned to the left. Any insights on why this may be happening, and suggestions on how to resolve the issue would be greatly appreciated.

Thank you!

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To achieve the desired look, adjust the padding in your custom CSS to 0 in order to override any default padding from Bootstrap. Next, you can adjust the width to your preferred size and incorporate custom padding if necessary.

For instance, 

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

Answer №2

Bootstrap buttons are considered as inline-block elements and do not come with a designated width. Therefore, specifying text-align: left does not produce the desired effect.

To make it work, you need to define the width explicitly and utilize align-left. In case you want to eliminate even the left padding, you can 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

Answer №3

Give this method a shot 👇

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

Keep in mind, using this approach eliminates the need for !important

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Step-by-step guide on crafting your own twig with customizable color options using a colorpicker

I attempted to implement a color picker for my HTML form in Symfony, and it functioned flawlessly. However, when I tried using Twig for my form, I encountered difficulties meeting my expectations. I explored the GenemuFormBundle at https://github.com/gen ...

phphtmlsymfonytwig

Position the float input to the right on the same line as an element

This Angular code contains a challenge where I aim to have text at the start of a column and an input box on the right side of the page, both aligned on the same line. The issue lies in the code which floats the input to the right but disrupts the alignme ...

htmlcssangular

What is the best way to customize the appearance of the initial row in each tr cluster?

Looking to add a button for expanding child rows within a datatable, with each group in the table having the same child elements.... The provided CSS currently displays the icon on every row throughout the entire table. td.details-control { backg ...

htmlcssdatatablesgrouping

HTML/PHP/JS - Submit Form and Upload File Simultaneously

I need to create a form with a Photo Upload Input that allows users to upload pictures before submitting the form for faster processing. The form should also support uploading multiple files, display a progress bar, and provide a preview of the uploaded im ...

phpjavascripthtmlfileupload

Encountered an issue with instafeed.js due to CORS policy restrictions

Trying to implement an API that provides JSON data for use in a function. Required Imports: Importing Jquery, instafeed.min.js, and the API (instant-tokens.com). <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js& ...

javascripthtmljsonajaxinstagram-api

A guide on utilizing Node.js and Express to read a text file and convert it into an HTML table

As a Node.js developer using Express, I am delving into the realm of Javascript for the first time. My goal is to parse a text file and extract specific data from it to display in an HTML table. Currently, I can successfully open and read the file using fs ...

htmlnode.jsexpresshtml-table

Basic title in material-ui navigation bar

I was hoping to display a simple label on the right side of the AppBar. Currently, I am using the iconElementRight prop and inserting a disabled flat button: <AppBar iconElementRight={<FlatButton label="My Label" disabled={true}/>} /> Thi ...

cssmaterial-ui

"Ensure that the data in the div is being updated accurately via AJAX in ASP.NET MVC

I'm currently using a div element to display data on page load through AJAX calls. $(document).ready(function () { email_update(); }); function email_update() { $.ajax({ url: '@Url.Action("EmailsList", "Questions")', ...

javascriptjquerycssasp.netajax

Can a HTML submit button be styled with multiple colors?

One of my clients recently requested a submit button with 2 words and 3 different text colors: <input type="submit" value="SUBMIT NEWSLETTER" /> The color scheme for the text is as follows: SUBMIT = black, NEWS = black, LET = white, TER = black. I ...

htmlcss

Looking for advice on using media queries to resize my background image - any tips?

I'm struggling to resize my background image using media queries. Can anyone offer suggestions or solutions? I've tried applying the media query for my background image like I do with other elements, and it's not working properly. The issue ...

htmlcssresponsive-designmedia-queriesbackground-image

Creating borders around Material UI grid items can be achieved by applying a border style to the

import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Paper from '@material-ui/core/Paper'; import Grid from '@material-ui/core/Grid'; const useStyles = makeStyles((theme) => ({ ...

cssreactjsmaterial-ui

The peculiar formatting issue with the jQuery datepicker that arises when adding more months

When adjusting the numberOfMonths parameter to a higher value such as 6, I noticed that the datepicker display appears unusual with the background extending further than expected. Take a look at my demonstration on jsfiddle: http://jsfiddle.net/zw3z2vjh/ ...

javascriptjquerycssdatepicker

The Javascript function is triggered only upon the second click

My goal is to retrieve prescription details for a specific patient, with the results displayed in a modal window. However, I am encountering an issue where the first result is only obtained on the second click. Subsequent clicks display the results of the ...

javascriptjqueryhtml

I prefer not to receive the parent's opacity settings when styling a child element in CSS

Is there a way to prevent the child element from inheriting the opacity of the parent in CSS? I have a parent div and a child div inside it. I want to set the opacity for the parent div, but not have it affect the child div. Does anyone know how I can ac ...

css

Is there a way to rearrange the tabs so that the first tab is at

Is there a way for me to align with the others without being stuck below #first_tab in the code? I'm having trouble figuring it out on this website: Your assistance would be greatly appreciated! Thank you in advance! CSS Code: #first_tab { ...

htmlcss

Unexpected behavior with animation duration in Safari

We have a project in the works that involves CSS animation. Our goal is to update the animation duration using JavaScript. Although this change is effective in most browsers, it seems to have trouble with Safari and iOS. Below is the code we are using to ...

javascriptcssanimationsafaricss-animations

Is it feasible to share HTML5 media captures and display them in real-time on another page within the website?

Recently, I just learned about the html5 media capture API and I am excited to start experimenting with it. One thing that caught my attention is capturing the camera on the same page, but I haven't come across any information about streaming through ...

phpjqueryhtmlmediavideo-capture

Display each div one at a time

I am working on a script that should reveal my divs step by step. However, the current code only shows all the divs at once when clicked. How can I modify it to detect each individual div and unveil them one by one? For example, on the 1st click => expa ...

javascriptjqueryhtmlcss

I desire a smooth fade-in transition for the background image when the addClass function is

If the background color is set to header-fixed-position, the color will fade in. However, if the background is an image, the image will not fade in. Apologies for my lack of proficiency in English. Please refer to the sample code below. Try removing the c ...

javascripthtmlcssbackground-image

Submit the chosen options as an array

I am working with a select list in HTML that looks like this: <input type="checkbox" name="drive_style" value=1 checked />123<br /> <input type="checkbox" name="drive_style" value=2 />123<br /> <input type="checkbox" name="drive ...

phphtmlajaxselectarrays