Skip to content
Grav 2.0 is officially stable. Read the announcement →
Archive

Bootstrap lite buttons

Started by Muut Archive 12 years ago · 13 replies · 1177 views
12 years ago

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

12 years ago

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

12 years ago

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

12 years ago

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

12 years ago

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:

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

This will generation HTML something like:

HTML
<a href="/my/button/link" class="button">My Button</a>
12 years ago

Crazy fast respons! Thanks. I will try that.

12 years ago

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

10 years ago
TXT
[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.

10 years ago

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:

TXT
<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.

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

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

CSS
.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?

10 years ago

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... :)

10 years ago

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.

Suggested topics

Topic Participants Replies Views Activity
Archive · by Deleted User, 9 years ago
0 1359 9 years ago
Archive · by Muut Archive, 9 years ago
2 936 9 years ago
Archive · by Muut Archive, 9 years ago
2 4066 9 years ago
Archive · by Muut Archive, 9 years ago
1 2957 9 years ago
Archive · by Muut Archive, 9 years ago
3 1121 9 years ago