Как в bootstrap 5 прижать блок к правому краю?

Question

[Junior Coder]

Подскажите пожалуйста, как в bootstrap 5 прижать блок к правому краю? Подробности в скриншоте. Делал float: right, но мне думается в bootstrap это по другому нужно делать!?

Answer 1

[Роман]

Я бы на флексах в css сделал свой клас.
Например:

<div class='btn-wrapper-end'>
  <button>Ваша кнопка</button>
</div>

.btn-wrapper-end {
  display: flex;
  justify-content: flex-end;
}

Либо если хотите чисто через bootstrap классы, можно контейнеру вашей кнопки добавить свойства d-flex justify-content-end:

<div class='d-flex justify-content-end'>
  <button>Ваша кнопка</button>
</div>

Comments

[Junior Coder]

Спасибо! А как сделать чтобы это правило применялось только к md и выше а на sm не срабатывало? Я про d-flex justify-content-end

[Роман]

Евгений М, Вот дока, тут всё написано: https://getbootstrap.com/docs/5.0/utilities/flex/
Классы:
d-md-flex justify-content-md-end

[Junior Coder]

Роман, я сделал через запросы, это же не противоречит правилам bootstrap?

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) { 

	.auth_button {
		justify-content: center;
	}

	.social_button {
		justify-content: center;
		margin-top: 100px;
	}

}

[Роман]

Евгений М, нет, нормально

[Junior Coder]

Роман, подскажите еще пожалуйста! Как растянуть этот блок до низа и конца правого края экрана?

[Роман]

Евгений М, задать width и height: 100%

[Junior Coder]

Роман, к сожалению это совсем не работает.

[Роман]

Евгений М, чтобы ответить на этот вопрос нужно увидить код, не совсем понятно что у тебя там по вёрстке, может у тебя там просто фон зеленый самой главной секции а у белого блока есть контейнер который не растянут на 100%, поетому и width с height не работает, а может у тебя там оно вообще спозиционировано, надо на код смотреть.