card header

Bootstrap Studio Help
#1

The bootstrap website shows a card with a header at top. The following is an example. I cannot seen to add this. I was able to add a div and typed in card-header but I can't add text to it. How do I do this?

Related question, once I add the header text, how can I change the color using your studio software?

<div class="card"> <div class="card-header"> Featured </div> <div class="card-body"> <h5 class="card-title">Special title treatment</h5>

With supporting text below as a natural lead-in to additional content.

<a href="#">Go somewhere</a>

</div> </div>

#2

Not to forget the advantages of learning something about the concept of front-end CSS frameworks. But don't worry - one of the strengths of Bootstrap is how many free and cheap guides and tutorials there are. But then again this might be already known to you - if so, forgive us our assumptions.

#3

Welcome to the forum!

The videos that accompany the program are a wonderful way to get started. Happy coding.

#4

@barney

Technically panels were discontinued in Bootstrap 4. Bootstrap 3 used the panel class if you want to open up the old version and check. The newer version Bootstrap 4 uses cards now. I know the panel component is still there in Bootstrap 4 but it now uses the card, card-header, card-body, etc.

If you want text in a div you either have to add a heading or a span.

#5

Click here to see how I added a header to the card.

Once you've created it, you can make it into a 'component' of your own so you can just drag and drop it into any more cards you create

#6

Do be sure to choose a class or file for when you're changing colors/sizes, and pretty much everything else in the Look & Feel tab. Although you "can" change things there, it will add it all in as "inline" classes which you definitely don't want to do. There's a pulldown at the top of that area that gives you the option to add your changes to either a specific already created class, or to create a new class and choose the file to put it in.

Unfortunately it's one of the misleading things about this app that it doesn't really tell you anything of that in the app and assumes you know it. It's led to a lot of people having to redo their classes because it put everything inline.

#7

You're right Jo :-)

Here's a revised version that uses css instead of inline styles

I'll leave the other video up, then you can see the difference between the 2 of them

#8

Wonderful job on the videos Windy. You should submit that last one to Martin and see if it can be part of the "How to" setups. That would definitely show people exactly how to add things to a CSS file/class so they aren't inline.

#9

This discussion had descended into personal attacks so I took the liberty to remove the offending replies. As for the question on how to insert Card Header/Card Footer and others, when you select the Card component in the overview you will see these buttons in the toolbar, which will do what you need:

Add Elements to the Card

#10

Hi, sorry to bump but I’ve been scratching my head on this for ages.
When I click on the card component I do not get these options in the overview, I only get column options? Any ideas?

image
image1365×162 10.5 KB

#11

Hello and welcome to the forums @ttc

You’ll find another thread here that has addressed this issue, as well as the Dev has posted that the issue will be fixed and what the work around was. Hope this helps:

https://forum.bootstrapstudio.io/t/drag-and-drop-from-suggested-to-card-not-working/6567/12

1 Like