CODEWITHSUNDEEP
csstwitter-bootstrapreactjscustomization
user3900157
user3900157

Reputation: 249

Customize style of component in react bootstrap

I want to modify a default style of a component of react-bootstrap.

For example, I use the Panel component and I want to have a bold title. How can I achieve this? If I use bsClass, then I loose all default styles of a "warning" panel.

What is the best way, to create a class, that inherits everything from the default panel classes and allows to override only the properties that we want?

Thanks,

Henry

Upvotes: 1

Views: 2732

Answers (1)

tandrewnichols
tandrewnichols

Reputation: 3466

The bootstrap docs actually include an example of a bold title here. You can use a heading tag that has font-weight bold already applied and use the "panel-title" class for sizing and alignment. Here's the example from the docs I'm talking about:

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel Title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

But if your question is more generic, i.e. how do I change built in styles?, any of the normal css mechanisms should work, like using a strong tag:

<div class="panel panel-warning">
  <div class="panel-heading">
    <strong>Panel Title</strong>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Or adding an inline style:

<div class="panel panel-warning">
  <div class="panel-heading" style="font-weight: bold">Panel Title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Or (probably preferred) by another class from your own external stylesheet:

/* CSS file */
.bold {
  font-weight: bold
}

<div class="panel panel-warning">
  <div class="panel-heading bold">Panel Title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

If you're talking about modifying all panel titles to be bold, then you should either 1) copy the bootstrap definition for "panel-heading," make the changes you want to your copy, and place it in a higher priority stylesheet (i.e. lower on the page) so it takes precedence (but this adds weight to your css payload), 2) modify the existing bootstrap code (bad idea), or 3) compile your own version using less by importing the main bootstrap less files and supplementing them with your own stuff. The last is definitely the most flexible and arguably the best, but it's more work. But this approach would let you "inherit" styles (as you say) because less let's you apply other classes as part of your own class, like:

.bold-heading {
  .panel-heading; // Apply base panel-heading styles
  font-weight: bold; // And override the stuff you want to change
}

Upvotes: 1

Related Questions