How to create CSS classes containing other Bootstrap classes

Question

How to create CSS classes containing other Bootstrap classes

Navigation

#1 by (2 votes)

1

Is it possible to create CSS classes containing other Bootstrap classes? I already researched but I did not find anything about it.

Something like:

.minhaclasse {

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    cursor: default;
    background-color: #dff0d8;
    border-bottom-color: transparent;
}
}

.minhaclasse2 {

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    cursor: default;
    background-color: #dff3d8;
    border-bottom-color: transparent;
}
}

But it is not. :

What is it like?

1 answer

Return tags associated with posts Show hint when component receives focus

score 2 · Accepted Answer

Yes!

You can create a class to be used together with the Bootstrap component class, so you only change what you really want to change. See this example using the code you used in the question:

.nav-tabs.minha-classe > li.active > a,
.nav-tabs.minha-classe > li.active > a:hover,
.nav-tabs.minha-classe > li.active > a:focus {
  background-color: #FFEB3B;
  border-color: #FFEB3B; 
  border-bottom-color: transparent;
  cursor: default;
  color: #fff;
  font-weight: bold;
}

.nav-tabs.minha-classe2 > li.active > a,
.nav-tabs.minha-classe2 > li.active > a:hover,
.nav-tabs.minha-classe2 > li.active > a:focus {
  background-color: #4CAF50;
  border-color: #4CAF50;
  border-bottom-color: transparent;
  cursor: default;
  color: #fff;
  font-weight: bold;
}

.nav-tabs.minha-classe3 > li.active > a,
.nav-tabs.minha-classe3 > li.active > a:hover,
.nav-tabs.minha-classe3 > li.active > a:focus {
  background-color: #F44336;
  border-color: #F44336;
  border-bottom-color: transparent;
  cursor: default;
  color: #fff;
  font-weight: bold;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs minha-classe">
  <li role="presentation" class="active"><a href="#">Home</a>
  </li>
  <li role="presentation"><a href="#">Profile</a>
  </li>
  <li role="presentation"><a href="#">Messages</a>
  </li>
</ul>

<ul class="nav nav-tabs minha-classe2">
  <li role="presentation" class="active"><a href="#">Home</a>
  </li>
  <li role="presentation"><a href="#">Profile</a>
  </li>
  <li role="presentation"><a href="#">Messages</a>
  </li>
</ul>

<ul class="nav nav-tabs minha-classe3">
  <li role="presentation" class="active"><a href="#">Home</a>
  </li>
  <li role="presentation"><a href="#">Profile</a>
  </li>
  <li role="presentation"><a href="#">Messages</a>
  </li>
</ul>

Note that I used .nav-tabs.nome-da-classe , this speaks to css "when the component has class nav-tabs and minha-classe use this ... .