imazin оценил комментарий на [Как переопределить CSS по умолчанию в Bootstrap]
imazin добавил комментарий на [Как разместить div горизонтально по центру в Boots...]
imazin оценил комментарий на [Как разместить div горизонтально по центру в Boots...]
imazin добавил комментарий на [#27 как быстро закрыть bootstrap modal?]
$(function () {
$(".custom-close").on('click', function() {
$('#a').modal('hide');
});
$('#a').on('hide.bs.modal', function (e) {
$('#a').removeClass('fade');
});
$('#a').on('show.bs.modal', function (e) {
$('#a').addClass('fade');
});
});
imazin добавил комментарий на [#29 радио кнопки Bootstrap не работают]
<label class="btn btn-primary" onclick="alert('Scenery!')">
<input type="radio" id="scenery-option" /> Scenery
</label>
imazin добавил комментарий на [#31 как стилизовать bootstrap чекбокс switch]
есть один миксин для checkbox switch c ним можно использовать классы .custom-switch-sm, .custom-switch-md, .custom-switch-lg, .custom-switch-xl
Здесь пример
или этот css
.custom-switch.custom-switch-sm .custom-control-label {
padding-left: 1rem;
padding-bottom: 1rem;
}
.custom-switch.custom-switch-sm .custom-control-label::before {
height: 1rem;
width: calc(1rem + 0.75rem);
border-radius: 2rem;
}
.custom-switch.custom-switch-sm .custom-control-label::after {
width: calc(1rem - 4px);
height: calc(1rem - 4px);
border-radius: calc(1rem - (1rem / 2));
}
.custom-switch.custom-switch-sm .custom-control-input:checked ~ .custom-control-label::after {
transform: translateX(calc(1rem - 0.25rem));
}
.custom-switch.custom-switch-md .custom-control-label {
padding-left: 2rem;
padding-bottom: 1.5rem;
}
.custom-switch.custom-switch-md .custom-control-label::before {
height: 1.5rem;
width: calc(2rem + 0.75rem);
border-radius: 3rem;
}
.custom-switch.custom-switch-md .custom-control-label::after {
width: calc(1.5rem - 4px);
height: calc(1.5rem - 4px);
border-radius: calc(2rem - (1.5rem / 2));
}
.custom-switch.custom-switch-md .custom-control-input:checked ~ .custom-control-label::after {
transform: translateX(calc(1.5rem - 0.25rem));
}
.custom-switch.custom-switch-lg .custom-control-label {
padding-left: 3rem;
padding-bottom: 2rem;
}
.custom-switch.custom-switch-lg .custom-control-label::before {
height: 2rem;
width: calc(3rem + 0.75rem);
border-radius: 4rem;
}
.custom-switch.custom-switch-lg .custom-control-label::after {
width: calc(2rem - 4px);
height: calc(2rem - 4px);
border-radius: calc(3rem - (2rem / 2));
}
.custom-switch.custom-switch-lg .custom-control-input:checked ~ .custom-control-label::after {
transform: translateX(calc(2rem - 0.25rem));
}
.custom-switch.custom-switch-xl .custom-control-label {
padding-left: 4rem;
padding-bottom: 2.5rem;
}
.custom-switch.custom-switch-xl .custom-control-label::before {
height: 2.5rem;
width: calc(4rem + 0.75rem);
border-radius: 5rem;
}
.custom-switch.custom-switch-xl .custom-control-label::after {
width: calc(2.5rem - 4px);
height: calc(2.5rem - 4px);
border-radius: calc(4rem - (2.5rem / 2));
}
.custom-switch.custom-switch-xl .custom-control-input:checked ~ .custom-control-label::after {
transform: translateX(calc(2.5rem - 0.25rem));
}
imazin добавил комментарий на [#25 Как исправить размер изображения в карусели]
img{
object-fit: cover;
vertical-align: middle;
border-style: none;
height: 70vh;
}
imazin оценил комментарий на [#24 Как центрировать div в колонке?]
<header>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-5 d-flex ">
<div class="mx-auto">
<h3>> 1</h3>
<h3>> 2</h3>
<h3>> 3</h3>
<h3>> 4</h3>
<h3>> 5</h3>
<h3>> 6</h3>
</div>
</div>
</div>
</div>
</header>
imazin добавляет статью [Как разместить div горизонтально по центру в Boots...]
imazin добавил комментарий на [#23 Как в Bootstrap 3 зафиксировать меню вверху пр...]
расположите ниже класса .navbar-fixed-top, чтобы перекрыть значение
.navbar-sticky-top {
position: sticky;
}
и используйте вместе с .navbar-fixed-top
imazin добавил комментарий на [#22 Как выделить подпункт в боковом меню sidebar]
Насколько мне известно в исходниках bootstrap нет sidebar, он также не описан в документации. sidebar есть в исходниках документации bootstrap-4.4.1\site\docs\4.4\assets\scss\_sidebar.scss
Необходимо смотреть у вас текущую реализацию, возможно она вообще сторонняя судя по описанному sidebar-item
А так обычно два варианта либо класс .active на <li> либо на <a>
Посмотрите в исходном коде что отвечает за :hover списка меню
imazin оценил комментарий на [#21 Система сеток flex Bootstrap 4]
imazin добавляет обсуждение [Компиляция и отслеживание Sass]
imazin добавил комментарий на [#20 Почему Bootstrap использует устаревшие размеры...]
imazin добавил комментарий на [#20 Почему Bootstrap использует устаревшие размеры...]
