CODEWITHSUNDEEP
htmlcsswebtwitter-bootstrap-3
Enam Ahmed Shahaz
Enam Ahmed Shahaz

Reputation: 195

why class="btn btn-default" instead of only class="btn-default"

In bootstrap one thing that is kicking in my ass since many days is that I don't understand the concept behind the tag when including bootstrap classes in HTML.

Like -

<button class="btn btn-primary"> press me </button>

why there is two? btn and btn-primary. why we don't only include only btn-primary as we want a primary type btn only. What does it mean and what is the purpose of it ?

there are also many examples like this - 

 <ul class="nav navbar-nav navbar-right">

Upvotes: 3

Views: 3332

Answers (4)

Chris Moschini
Chris Moschini

Reputation: 37967

The truth is that the way the SCSS compiles out, there really isn't much savings in the output CSS. And, when you consider the extra HTML across all your buttons, you're probably losing rather than saving.

If you wanted you could just merge the classes:

.priBtn {
  @extend .btn;
  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
}

It's likely just going to emit using a comma selector, so it shouldn't grow the CSS much, and you'd be able to use 1 class instead of 2 like you wanted.

That said, this is diverging from the standard Bootstrap, and that does make some purists crazy.

Note: To do the above extend and include, you will need to import the necessary Bootstrap files first. The paths involved vary depending on what kind of SCSS/SASS compiler you're using - many only support relative paths, not absolute, and those relative paths can be pretty bulky.

Upvotes: 0

Enam Ahmed Shahaz
Enam Ahmed Shahaz

Reputation: 195

At last I got a clear understanding of this thing. I am describing it here so it can help other people like me. 

        <i class="glyphicon glyphicon-calendar"></i>
        <button class="btn btn-primary">PressMe</button>

This kinds of patterns you will see very often in Bootstrap - Applying two classes to complete a single task. This helps to keep the Bootstrap's CSS file much smaller.

For <i class="glyphicon glyphicon-calendar"></i>

  • The .glyphicon class specifies we should use the provided icon font.
  • The .glyphicon-calendar class specifies which icon we shound use.

and for <button class="btn btn-primary">PressMe</button>

  • The .btn class specifies we are going to have a basic button style.
  • The .btn-primary class specifies this button should have a style of primary type.

Awesome Bootstraping...

Upvotes: 2

JenTrixx16
JenTrixx16

Reputation: 31

It is two properties: btn and btn-primary. btn-primary is added for styling.

Upvotes: 0

Insane Skull
Insane Skull

Reputation: 9368

The .btn and .btn-primaray are two different classes and both apply some different style.

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}

.btn-primary {
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
}

Tag needs both that css classes for rendering its style.

Reference

Upvotes: 2

Related Questions