Блог

Главная - Вопросы по программированию - Использование Bootstrap 4 для изменения цвета и положения в одном классе

Использование Bootstrap 4 для изменения цвета и положения в одном классе

#html #css #bootstrap-4

#HTML #css #bootstrap-4

Вопрос:

Я использую Bootstrap 4, и я хочу, чтобы текст был перемещен в середину, а цвет текста был белым в одном классе. Например:

 <p class="text-center white">Center aligned text.</p>

Похоже, это не работает. Мой веб-сайт https://beggweb.000webhostapp.com , и текст все еще слишком темный, чтобы его можно было разглядеть под каруселью, которую я хочу, чтобы текст был белым. Как это можно сделать?

Ответ №1:

Имя класса в Bootstrap 4 является текстово-белым:

 p {
  background-color: coral;
}

div {
  background-color: teal;
}

.textWhite {
  color: white;
}  
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<p class="text-center text-white">Center aligned text.</p>

<div class="textWhite">If you're using Bootstrap 3, you can create your own text white class</div>

Комментарии:

1. У меня не получилось. Мой CND <link rel=»таблица стилей» href=» maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css «> <script src=» ajax.googleapis.com/ajax/libs/jquery/3.3.1 /… > <script src=» maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js /… >. Когда я добавляю другой CND, это портит остальной код

2. О, я понимаю. Это был бы Bootstrap 3. Я не думаю, что 3 использует text-white и имеет только text-muted, text-primary, text-success, text-info, text-warning и text-danger. Однако вы можете создать свой собственный класс.

3. О, это имеет смысл. Спасибо. Я думал, что использую 4

Ответ №2:

Попробуйте это:

CSS 

 .text-center  {background-color: coral; position: absolute; left: 150px; top: 150px;}

HTML

 <p class="text-center text-white">Center aligned text.</p>

Если вам нужно изменить цвет передней панели, вы можете использовать color:yourcolor;