Modify b-card title using CSS bootstrap-vue

Question

So I have the following code:

<b-card
  class="getting-started border-0"
  overlay
  img-src="https://images.unsplash.com/photo-1554386690-cc2d52c7f3d6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1395&q=80"
  img-alt="Card Image"
  text-variant="white"
  title="Getting Started"
  sub-title="Where to begin?"
>
    <b-card-text>
          Some quick example text to build on the card and make up the bulk of the card's content.
    </b-card-text>
</b-card>

I would like to sytle the title inside b-card utilizing css. I haven't been able to find any way to access this element.

Style it how? And what have you tried so far yourself? Please add the styling code that doesn't work. Please read How to Ask a good question — jasie
– jasie, Commented Apr 15, 2021 at 6:53

kburakdemirci · Accepted Answer · 2021-04-15 06:43:32Z

2

You can give a custom class to b-card and then you need to write a simple css.

HTML

<b-card class="my-custom-class border-0"
  overlay
  img-src="https://images.unsplash.com/photo-1554386690-cc2d52c7f3d6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1395&q=80"
  img-alt="Card Image"
  text-variant="white"
  title="Getting Started"
  sub-title="Where to begin?"
>
<b-card-text>
  Some quick example text to build on the card and make up the bulk of the card's content.
</b-card-text>
</b-card>

CSS

.my-custom-class .card-title {
   background-color: red;
}

answered Apr 15, 2021 at 6:43

kburakdemirci

862 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rafael Jimenez Over a year ago

Thanks for the help! this will be very helpful

Oleksii · Accepted Answer · 2021-04-15 13:45:27Z

2

title = "" Doesn't apply to CSS

use v-bind:title="nameTitle"for dynamic change title

or

It is often a good idea to bind to a style object

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

The object syntax is often used in conjunction with computed properties that return objects.

answered Apr 15, 2021 at 13:45

Oleksii

2,7613 gold badges10 silver badges22 bronze badges

1 Comment

Rafael Jimenez Over a year ago

Interesting... Thanks for the help I am kinda new to front-end but this is very helpful

Kwesi Smart · Accepted Answer · 2021-04-15 00:34:57Z

1

CSS classes. You can put the element in a CSS class, then apply the desired styles on the class.

<b-card class="getting-started border-0"
  overlay
  img-src="https://images.unsplash.com/photo-1554386690-cc2d52c7f3d6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1395&q=80"
  img-alt="Card Image"
  text-variant="white"
  title="Getting Started"
  sub-title="Where to begin?"
>
<b-card-text class="red-sample">
  Some quick example text to build on the card and make up the bulk of the card's content.
</b-card-text>
</b-card>

...

<style>
.red-sample {
  color: red;
}
</style>

answered Apr 15, 2021 at 0:34

Kwesi Smart

4196 silver badges14 bronze badges

1 Comment

Rafael Jimenez Over a year ago

The item that I want to access it's b-card title="Getting Started". Sorry for not clarifying that in question, can I add a css selector for that title

Collectives™ on Stack Overflow

Modify b-card title using CSS bootstrap-vue

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related