css Question posted in
Some basic documentation can be found here.

Css – Combining multiple classes into a single class

I’m converting an old Bootstrap 3 app which contains a lot of elements styled with a well class. In Bootstrap 5, there’s no well, and I’m trying a replacement along the lines of class="card text-dark text-bg-light mt-2 mb-3 card-body".

I don’t want to manually replace every well, because the current version of the replacement probably isn’t quite right. Ideally, I want something like this:

#define well "card text-dark text-bg-light mt-2 mb-3 card-body"

So that I don’t have to modify the old HTML at all. Is there some way to do this in CSS? A SASS solution would be good as well.

Tags:

3

Answers


  1. 0

    You could probably use something like this:

    .well{
    color: #222222;
    background-color: #fbfbfb;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

    That is roughly the equivalent of the bootstrap in CSS. Play around with it a bit and see if that works.

    Login or Signup to reply.
  2. 0 
    Try This Code:


 Css:
    .well{
        background-color: #fbfbfb;
        color: #222222;
        margin-top: 0.5rem;
        margin-bottom: 1rem;
        flex: 1 1 auto;
        padding:1em 1em;
    }

 Html:
 <div class="card well" style="width: 18rem;">
      <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>
    Login or Signup to reply.
  3. 0

    If you really don’t want to write the styles yourself, I suppose a possible solution would be to extend the classes:

    .well {
  @extend .card;
  @extend .text-dark;
  @extend .text-bg-light;
  @extend .mt-2;
  @extend .mb-3;
  @extend .card-body;
}

    You need to have Boostrap’s styles imported into your SCSS file for this to work.

    Also be aware the generated CSS will not be very pretty, since this will append the .well class to every selector you extend.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search