Bootstrap lite buttons

Is it possible to add buttons via the markdown file? Buttonstyle like in Bootstrap.

Do you mean buttons like the onepage-skeleton demo? I think you refer to that.

Na, more like de download button for Grav. And the button in the showcase section of onepage-skeleton.

Oh, I understand. Well, let’s wait to admin answer.

If you want to have a link that is a button directly in your markdown, then you need to take advantage of Markdown Extra. This allows you to specify a class on certain items in markdown.

First to enable this you need to either set it site-wide in your user/configuration/system.yaml file - Instructions or on your page via the page headers

Now you can take advantage of Markdown Extra you can use it by adding whatever class you need to the link:

[My Button](/my/button/link)      {.button}

This will generation HTML something like:

<a href="/my/button/link" class="button">My Button</a>

Crazy fast respons! Thanks. I will try that.

I think I’ll take advantage of that, too!

Mayby but that in Learn?

Enabling markdown extra is documented on learn already (see links above). What Markdown Extra provides is beyond the scope of Grav.

It’s well documented already on the Markdown Extra site:

[Reports](LINK_NEEDED)      {.button}

@rhukster, just wanted to express thanks. The above code is doing wonders for a novice user like me. Thanks for bringing it to my attention.

Actually, we added a native Grav capability to allow you to to add classes (and other things) via a query without the need for Markdown Extra.

That’s so neat. I need to read up on this as I have a hunch my questions below may sound absurd. I’m very new to this.

I’m wondering, are classes dependent on the theme you’re using, or is this a more general concept of HTML? I ask because I’m attempting to add a Bootstrap button (link but while pure HTML seems to work:

<button type="button" class="btn btn-primary btn-lg">BUTTON NAME HERE</button>

…I’ve had no luck adding the above class. I’ve tried the below but with no luck.

[BUTTON NAME HERE](?classes=btn btn-primary btn-sm)

Also, in /user/themes/antimatter/css-compiled/template.css I notice…

.button, .button-secondary {
  display: inline-block;
  padding: 7px 20px; }
  .button-small.button, .button-small.button-secondary { 
    padding: 3px 10px;
    font-size: 0.9rem; }

Perhaps that’s the .button from my original [Reports](LINK_NEEDED) {.button} code?

Making some progress after using the Assets plug-in to bring in CSS and JS resources, via the links over at BootStrap CDN. Learning… slowly… :slight_smile:

Classes are always dependent upon the theme unless you use a plugin that happens to be loading some CSS.

Bootstrapper plugin is a simple plugin with the sole purpose of loading bootstrap CSS and JS. So you could use that too.