Почему я не могу изменить цвет или размер шрифта моего bootstrap веб-шаблона?

Question

Я хочу изменить цвет шрифта внутри тегов <h2>, попытался изменить цвет на черный (# 000000), но ничего не произошло

      .main-slider .content .rating {
  position: relative;
  opacity: 0;
  text-align: center;
  margin-bottom: 20px;
  -webkit-transition: all 1000ms ease;
  -moz-transition: all 100ms ease;
  -ms-transition: all 1000ms ease;
  -o-transition: all 1000ms ease;
  transition: all 1000ms ease;
  -webkit-transform: translateX(50px);
  -moz-transform: translateX(50px);
  -ms-transform: translateX(50px);
  -o-transform: translateX(50px);
  transform: translateX(50px);
  .main-slider .rating .fa {
    position: relative;
    color: #000000;
    font-size: 200px;
    margin: 0px 4px;
    .main-slider h2 span {
      display: block;
      color: #ffeb40;

<!--Main Slider-->
<section class="main-slider">

  <div class="main-slider-carousel owl-carousel owl-theme">

    <div class="slide" style="background-image:url('{% static 'main/images/XD3.png' %}')">
      <div class="auto-container">
        <div class="content">
          <div class="rating">
            <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
            <span class="sr-only">Loading...</span>
            <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
            <span class="sr-only">Loading...</span>
            <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
            <span class="sr-only">Loading...</span>
            <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
            <span class="sr-only">Loading...</span>
          </div>
          <h2> <span> Text </span> </h2>
        </div>
      </div>
    </div>

Подчеркиваю, что ничего не изменилось, набрав # 000000 как # ffeb40 color

Answer 1

Когда кто-то столкнется с той же проблемой, я опубликую мое решение:

вам нужно создать новый файл. css, скажем: переопределить. css

и вы должны поместите это ниже строки bootstrap. css href, в моем случае:

<link href="{% static 'main/css/bootstrap.min.css'%}" rel="stylesheet">
<link href="{% static 'main/css/style.css'%}" rel="stylesheet">
<link href="{% static 'main/css/responsive.css'%}" rel="stylesheet">
<link href="{% static 'main/css/override.css'%}" rel="stylesheet">

тогда вы должны записать то же самое, что у вас внутри файла стиля. css, но в том числе Важно в конце каждой строки кода:

.main-slider .rating .fa{
color:#FFD700 !important;
font-size:50px !important;

}

, и это изменит все, что вам нужно, и переопределит цвета или размеры шрифта, которые вы получили в bootstrap шаблон.

Ура,