CODEWITHSUNDEEP
htmlcssbootstrap-4
shaveax
shaveax

Reputation: 133

How to apply CSS to a specific div button with bootstrap4?

I want to specify a CSS style for a division that contains a bootstrap button, the way I did this, is to specify inline the CSS code within the button tag, this in order to does not affect the other bootstrap buttons in the page.

The following code works inline:

<div id="bootstrapButton">
    <button style="padding: 5px; width: 250px; margin-top: 4px !important" class="btn btn-outline-primary shadow bg-white rounded" type="button" data-toggle="collapse" data-target="#adminSection" aria-expanded="false" aria-controls="adminSection">
</div>

but I want to to import a CSS file that contains the same styles for the button inside the div (please notice that the class to be affected will be "btn ").

Upvotes: 0

Views: 1632

Answers (1)

Pytth
Pytth

Reputation: 4176

  1. There is hardly ever a reason for using inline styles or !important. Try to refrain from doing it unless you absolutely have to.

  2. Why not just put the styles in a reusable class that you use wherever you want? For instance:

.btn.btn-variant-1 { // Or whatever class name you want.
    padding: 5px;
    width: 250px;
    margin-top: 4px;
}

Then you could use it in your html as such:

<button class="btn btn-outline-primary shadow bg-white rouded btn-variant-1">CLick me!</button>

Upvotes: 4

Related Questions