Why won't any CSS besides height and width work on my div?

I'm trying to give style to this div, however, no CSS works on besides height and width. I am using bootstrap.

Although the border is red in this code editor, it is not when I'm editing in Brackets. Added some more code.

body{
    padding: 100px 10% 0 10%;
}

#hero {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 750px;
    justify-content: space-around;
}

.card {
    height: 100%;
    width: 25%;
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid red;
    border-radius: 7px;
}

.card-title-span {
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: bold;
    border-bottom: 1px solid grey;
}
.card-image {
    width:100%;
    height: 250px;
    background-color: dodgerblue;
}

.card-pricing-span {
    height: 50px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    border-bottom: 1px solid grey;
}

.card-description-span {
    padding: 3%;
    font-style: italic;
}
   <div id="hero">
       
       <div class="card">
           <span class="card-title-span">Beginner</span>
           <img src="" alt="Placeholder image" class="card-image">
           <span class="card-pricing-span">pricing</span>
           <span class="card-description-span"></span>
       </div>
       
       <div class="card"></div>
       
       <div class="card"></div>
       
   </div>

[IGNORE THIS TEXT - Need to put it here so there's enough words to meet the auto-mods standards.]

2 answers

  • answered 2019-02-10 12:24 Florian Valois

    Because .card is a standard BootStrap class. Use another class name or overwrite it.

  • answered 2019-02-10 12:24 garry man

    First of all you should pay attention to the overrides that bootstrap or any template may apply to your DIV.

    To do so, press F12 on your browser and go to Elements tab, select your div, watch for Style and you should be able to see if your style gets striked. If that isn't your case, more likely you are using a bunch of CSS properties that conflict with display:flex and other properties.