Text alignment not applying within buttons despite using the !important tag

I am encountering an issue with input buttons in Bootstrap. Even after adding !important to the .text-left class, it does not work on buttons.

How can this be resolved?

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



.btn {
    box-shadow: none;
    border-radius: 0;
}
.w100 {
    width: 100%;
}
.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}
.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
a {
    color: #72c02c;
    text-decoration: none;
}
a {
    color: #337ab7;
    text-decoration: none;
}
<link href="https://www.sp-batiment.com/assets/plugins/bootstrap/css/bootstrap.css" rel="stylesheet"/>
<div> <div class="text-left"> <a href="blog/immobilier.html"> <btn class=" btn btn-default w100 "><i class="fa fa-building-o "></i>&nbsp;&nbsp;<strong>Real Estate (4)</strong></btn> </a> <a href="blog/maintenance.html"> <btn class=" btn btn-default w100 "><i class="fa fa-wrench "></i>&nbsp;&nbsp;<strong>Maintenance (2)</strong></btn> </a> <a href="blog/decor-trends.html"> <btn class=" btn btn-default w100 "><i class="fa fa-file-image-o "></i>&nbsp;&nbsp;<strong>Decor Trends (9)</strong></btn> </a> <a href="blog/news.html"> <btn class=" btn btn-default w100 "><i class="fa fa-file-text-o "></i>&nbsp;&nbsp;<strong>News (7)</strong></btn> </a> <a href="blog/technology.html"> <btn class=" btn btn-default w100 "><i class="fa fa-cogs "></i>&nbsp;&nbsp;<strong>Technology (5)</strong></btn> </a> <a href="blog/renovations.html"> <btn class=" btn btn-default w100 "><i class="fa fa-hotel "></i>&nbsp;&nbsp;<strong>Renovations (12)</strong></btn> </a> <a href="blog/various.html"> <btn class=" btn btn-default w100 "><i class="fa fa-puzzle-piece "></i>&nbsp;&nbsp;<strong>Various (7)</strong></btn> </a> <a href="blog/renovation-videos.html"> <btn class=" btn btn-default w100 "><i class="fa fa-film "></i>&nbsp;&nbsp;<strong>Renovation Videos (3)</strong></btn> </a> <a href="blog/energy-improvements.html"> <btn class=" btn btn-default w100 "><i class="fa fa-calculator "></i>&nbsp;&nbsp;<strong>Energy Improvements (3)</strong></btn> </a> </div> </div>

Although this topic has been viewed multiple times, no solution has been found yet.

javascripthtmlcssbootstrap-4

Answer №1

To eliminate the need for !important, simply use .text-left btn { as your selector.

.text-left btn {
    text-align: left;
}



.btn {
    box-shadow: none;
    border-radius: 0;
}
.w100 {
    width: 100%;
}
.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}
.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
a {
    color: #72c02c;
    text-decoration: none;
}
a {
    color: #337ab7;
    text-decoration: none;
}
<link href="https://www.sp-batiment.com/assets/plugins/bootstrap/css/bootstrap.css" rel="stylesheet"/>
<div> <div class="text-left"> <a href="blog/immobilier.html"> <btn class=" btn btn-default w100 "><i class="fa fa-building-o "></i>&nbsp;&nbsp;<strong>Immobilier (4)</strong></btn> </a> <a href="blog/entretien.html"> <btn class=" btn btn-default w100 "><i class="fa fa-wrench "></i>&nbsp;&nbsp;<strong>Entretien (2)</strong></btn> </a> <a href="blog/tendances-deco.html"> <btn class=" btn btn-default w100 "><i class="fa fa-file-image-o "></i>&nbsp;&nbsp;<strong>Tendances déco (9)</strong></btn> </a> <a href="blog/actualite.html"> <btn class=" btn btn-default w100 "><i class="fa fa-file-text-o "></i>&nbsp;&nbsp;<strong>Actualité (7)</strong></btn> </a> <a href="blog/technologies.html"> <btn class=" btn btn-default w100 "><i class="fa fa-cogs "></i>&nbsp;&nbsp;<strong>Technologies (5)</strong></btn> </a> <a href="blog/renovations.html"> <btn class=" btn btn-default w100 "><i class="fa fa-hotel "></i>&nbsp;&nbsp;<strong>Rénovations (12)</strong></btn> </a> <a href="blog/divers.html"> <btn class=" btn btn-default w100 "><i class="fa fa-puzzle-piece "></i>&nbsp;&nbsp;<strong>Divers (7)</strong></btn> </a> <a href="blog/videos-renovations.html"> <btn class=" btn btn-default w100 "><i class="fa fa-film "></i>&nbsp;&nbsp;<strong>Vidéos de rénovations (3)</strong></btn> </a> <a href="blog/ameliorations-energetiques.html"> <btn class=" btn btn-default w100 "><i class="fa fa-calculator "></i>&nbsp;&nbsp;<strong>Améliorations énergétiques (3)</strong></btn> </a> </div> </div>

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

Finding the location of a file within a published web component

I am currently working on a webcomponent where I need to include a link tag in the head section and set the href attribute to a folder within a node module. At this stage, during the development of my component, my project structure looks like this: http ...

javascripttypescriptpath

Sizing Children in Ant Design Inline Forms

I'm having trouble making my form inline with a select taking up 60% of the space and a submit button taking up the remaining 40%. Every time I try to do this, the select and button end up sizing themselves incorrectly. The select starts out very smal ...

cssreactjsformsantd

Why doesn't the <img> with the class "w-100" fit inside the parent flex div if the <img> is smaller than the parent div in Bootstrap 4?

I've been racking my brain over this issue, but I just can't seem to find a solution. So here's the scenario: Adding an image with a width of 100px to a desktop site, and applying the w-100 class should make it stretch to match the width of ...

twitter-bootstrapbootstrap-4

The PHP script is malfunctioning, specifically due to a condition within a loop

Can anyone provide some assistance? I'm trying to work on a coding task but seem to be stuck. A helpful hint pointing out where I've gone wrong would be greatly appreciated. The task at hand is quite challenging. Currently, I am attempting to ha ...

phphtml

The contact form is set up to send emails through contact.php, but I prefer not to have it redirect to another page. Sending emails works

Don't worry, I have already searched many places and tried to watch other forums and videos. I'm not looking for an easy solution. When I submit a form on my page it redirects to www.mypag.com/contact.php. I'm trying to use AJAX so that the ...

phphtmljqueryajax

CSS selector for children up to a specific element is found

Is there a CSS selector that can target all descendants until a specific tag is reached? For example, given the DOM structure below, I want to apply a selector to "id1" so that it styles all descendants up to but not including "id4". This means the divs c ...

css

Having trouble resolving 'datatables.net/js/jquery.dataTables.js' in a Vue and React Project using the Surveyjs quickstart template

Currently, I am juggling two distinct projects - one utilizing Vue.js and the other employing React. Both projects stem from quickstart templates offered by SurveyJS. Upon diligently following the setup guidelines and executing the npm run start command, I ...

javascriptreactjsvue.jssurveyjs

Retrieving the elapsed time in seconds from a timer function and displaying it in my

I'm looking to transfer the minutes and seconds from my template's timer to my view. I've experimented with various approaches using an ajax.post request, but it hasn't quite worked as expected. Here is a snippet of my template code: ...

javascripthtmldjangodjango-views

What is the best way to ensure the constant rotation speed of this simple cube demo?

Currently delving into the world of Three.js. I'm curious about how to make the cube in this demo rotate at a consistent speed rather than depending on mouse interactions. Any tips on achieving this? ...

javascriptopengl-es3dwebglthree.js

The X-frame-Options HTTP response header is ineffective

I've been attempting to implement the X-Frame-Options response header in my application by configuring it on my express server. Utilizing the helmet npm package, I've applied the following code snippet: const express = require("express" ...

javascriptnode.jsreactjs

I am creating an HTML page that incorporates p5.js, and the text I'm rendering

It seems like the draw loop is continuously refreshing every x seconds, causing this behavior. Is there a way to slow down or disable the frame update without affecting the video refresh rate? I was thinking of adding an fps counter and implementing an i ...

javascripthtmlp5.js

Delete the node_modules directory once the build process is complete

Would it pose a risk to leave the node_modules directory on the production server post app.js build? Alternatively, should I remove the folder once the build is complete? Note that the node_modules folder is not publicly accessible. ...

javascriptlaravelnpm

Explanation of Default Export in TypeScript

I recently started learning about JS, TS, and node.js. While exploring https://github.com/santiq/bulletproof-nodejs, I came across a section of code that is a bit confusing to me. I'm hoping someone can help explain a part of the code. In this project ...

javascriptnode.jstypescriptexpress

How can I incorporate a new object into an existing object in ReactJS?

I am facing an issue where I have an object named waA that is required in the final step. However, in ReactJS, the new object is not updating the previous object using a switch statement in a function. Below is the code for the object: waA = { jso ...

javascriptreactjsobjectjsx

Verify whether the element is currently visible within an iframe on the same domain

My goal with jQuery is to determine element visibility on a webpage. In my website, there is an iframe within one of the pages. Typically, I check for element visibility using the following code: if($('.tabContentContainer').is(':visible& ...

javascriptjqueryiframe

Ensure that when a user clicks back on an image popup, the page stays in its current position

Is there a way to ensure that after closing a popup image, the browser returns to the same position where it was before? Currently, when I close the popup image, the page scrolls back to the top (as indicated by the red square in the example). However, I ...

htmlcss

"Mastering the art of underlining individual components in React with the power of

Hey there, I'm having some issues working with the CSS for my component. I've created a joke component that has joke and punchline props. The issue is that when it appears in the compiler, my joke component (which I call twice) only shows up as t ...

cssreactjscomputer-science

Viewing a live gstreamer feed within a web browser

Seeking advice on how to integrate a camera feed from a Linux machine into a gstreamer pipeline for display in a web browser. Currently, I am developing an HTML/JavaScript interface to control the camera and communicate with a local server. However, I am f ...

javascriptpythongstreamer

The hover function stops working once the dropdown class has been removed

I am currently experimenting with a bootstrap template. In the navigation bar, there is an option for "Blog" and "Test". For the "Test" button, I decided to remove the li class="dropdown " because I wanted to create a button that changes color on hover si ...

htmlcss

Is there a way to deactivate a button upon clicking and then substitute it with a new button that serves a different purpose in AngularJS?

Is there a way to deactivate a button once clicked and substitute it with another button that performs a different task using AngularJS? Here is the button in question: <button type="submit" class="btn btn-small btn-default" ng-disabled="isteam==0 || ...

javascripthtmlangularjstwitter-bootstrapbutton