0

I have the following boostrap cards and I want to style them (override the existing style) by using some css.

Card code

<div class="card" style="width: 18rem;">
  <img src="https://cdn.ymaws.com/cilip.site-ym.com/resource/resmgr/cilip/information_professional_and_news/non_infopro_news/2020_03_coronavirus/coronavirus_header.png" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

What I've tried to add in the css (in the head tags)

<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

<style>
  .card{
body {
  color: blue;
}
h1 {
  color: green;
}
p{
  color: red;
}

}
  </style>
</head>

In this bit

<style>
      .card{

I am trying to refer to the bootstrap class card, and change its style.

Can anyone point out what I am doing wrong with a solution and adequate explanation for a beginner please.

Goal: The goal is to style the card using the css that I have provided. For instance for the card's p and h1 tags to be styled as I've specified. In this case the headings in the cards to be green and the paragraphs to be red and for the body of the card to be blue. For some reason the styling applied in the head does not apply to the card.

What I've tried:

I've also tried doing each one seperately as suggested

<style>

.card-body{background-color: blue;}
.card-body{h1: green;}
.card-body{p: red;}
  
</style>

In the above case, the first style (blue) worked but it didn't change the h1 and p.

Compoot
  • 2,227
  • 6
  • 31
  • 63
  • Could you please provide some more information about your goal? – O.M.N.L Jan 06 '21 at 15:59
  • The goal is to style the card using the css that I have provided. For instance for the card's p and h1 tags to be styled as I've specified. For some reason the styling applied in the head does not apply to the card. – Compoot Jan 06 '21 at 16:05

3 Answers3

1

you have to code them individually, for example .card-body{background-color: blue;}

Maciej Chajda
  • 31
  • 5
  • And because its cascade style sheet it makes difference if you put your style above bootstrap css or below it – Maciej Chajda Jan 06 '21 at 16:11
  • could you please post a solution using my context so I can verify – Compoot Jan 06 '21 at 16:17
  • For instance I tried – Compoot Jan 06 '21 at 16:44
  • The blue background worked but not the p and h1 – Compoot Jan 06 '21 at 16:44
  • and this didn't work either .card-body{background-color: blue;}; .card-text{background-color: red;}; – Compoot Jan 06 '21 at 16:52
  • i've eventualy - through trial and error found out that it's this: .card-text{background-color: red;} ...but where do we find these elements and what to use - is it on boostrap documentation ? – Compoot Jan 06 '21 at 16:54
  • 1
    so whenever you want to color your paragraph red, you can simply create class .text-red{color: red;} and when you want to make text redn you can use it

    this is a red text

    . You will find a lot of useful materials about css on https://www.w3schools.com/css     – Maciej Chajda Jan 07 '21 at 17:25
  • perhaps you can help with this https://stackoverflow.com/questions/65619573/how-to-apply-a-long-block-of-css-to-one-whole-div-section-login-form – Compoot Jan 07 '21 at 20:51
1

to override existing style, you need to use !important

for example

h1 {
  color: green !important;
}
Vicky Gupta
  • 60
  • 1
  • 12
  • Please try and replicate. You'll notice that this doesn't work either. I've added your suggestion in the existing styles and it makes no difference. – Compoot Jan 06 '21 at 16:16
0

You have to change you css code to this:

<style>
.card-body { color: blue; }
.card-body h1 { color: green; }
.card-body p { color: red; }  
</style>
Jom
  • 138
  • 1
  • 5