CODEWITHSUNDEEP
csstwitter-bootstrap
bier hier
bier hier

Reputation: 22550

How can I get this css rule working?

I just wrote a bootstrap column page but one of my classes does not work:

.serviceDetails {

  .height {
    line-height: 12px;
    margin-top: 8px;
  }

  p.text , span.text {
    font-size:11px;
  }

  .icon {
    border:11px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

This is my html:

    <section class="serviceDetails">
        <div class="row">
        <div class="col-md-3 col-xs-12">
                    <div class="col-md-2 hidden-xs icon">
                     <i class="fa fa-bandcamp" aria-hidden="true"></i>
        </div>
....

For some reason the .icon class does not work? More info here:codepen

Upvotes: 0

Views: 62

Answers (1)

li x
li x

Reputation: 4051

Taking your css outside of the nesting does what you need,

 .icon {
    border: solid pink 11px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

http://codepen.io/anon/pen/dOYgaV

edit: added color and fill to border, also changed preprocessor settings on codepen.

.serviceDetails {

  .height {
    line-height: 12px;
    margin-top: 8px;
  }

  p.text , span.text {
    font-size:11px;
  }

 .icon {
    border: solid pink 11px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

}

Precompiling the sass written above would also fix the problems, http://www.sassmeister.com/ - online compiler http://sass-lang.com/ - sass documentation

This is due to the fact that normal css doesn't allow you to nest class rules inside of classes where as sass does support nesting and also a lot of other cool features.

Upvotes: 1

Related Questions