Как применить CSS к определенной кнопке div с bootstrap4?

Question

Я хочу указать стиль CSS для подразделения, содержащего кнопку начальной загрузки, способ, которым я это сделал, - указать встроенный код CSS в теге кнопки, чтобы это не повлияло на другие кнопки начальной загрузки вpage.

Следующий код работает 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>

, но я хочу импортировать файл CSS, который содержит те же стили для кнопки внутри div (обратите внимание, что класс длябудет затронут "btn").

Answer 1

1. Вряд ли есть причина для использования встроенных стилей или !important.Старайтесь воздерживаться от этого, если в этом нет особой необходимости.

2. Почему бы просто не поместить стили в класс многократного использования, который вы используете, где хотите?Например:

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

Тогда вы можете использовать его в своем HTML как:

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