This is a {{ variant.name }} alert — check it out!
{% endcapture %}
{% include ui/alert.html type=variant.name text=variant-text %}
{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Alert Links
Add the `alert-link` class to any links inside the alert box to create "matching colored links":
{% example %}
{% capture code %}
{% for variant in site.variants %}
{% capture variant-text %}
This is a {{ variant.name }} alert — <ahref="#"class="alert-link">check it out</a>!
{% endcapture %}
{% include ui/alert.html type=variant.name text=variant-text %}
{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Dismissible Alerts
{% example %}
{% capture code %}
{% for variant in site.variants %}
{% capture variant-text %}
This is a {{ variant.name }} alert — check it out!
{% endcapture %}
{% include ui/alert.html type=variant.name text=variant-text close=true %}
{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Alerts with icons
{% example %}
{% capture code %}
{% for variant in site.variants %}
{% capture variant-text %}
This is a {{ variant.name }} alert — check it out!
{% endcapture %}
{% include ui/alert.html type=variant.name icon=variant.icon text=variant-text %}
{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Alert with avatar
{% example %}
{% capture code %}
{% for variant in site.variants %}
{% capture variant-text %}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
{% endcapture %}
{% include ui/alert.html type=variant.name text=variant-text person-id=forloop.index %}
{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Alert with buttons
{% example %}
{% capture variant-text %}
{% capture code %}
{% capture variant-text %}
<h3>Some Title</h3>
<p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
{% endcapture %}
{% include ui/alert.html type='success' close=true text=variant-text buttons=true %}
The dividers are automatically created in the content of the `:before` pseudo-element of li tags. You can inform the current page using the `active` modifier in a `li` tag. It will disable the navigation of inner links.
{% example %}
{% capture code %}
{% include ui/breadcrumb.html %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Breadcrumb variations
You can add more variations by modify `$breadcrumb-variants` variable in Tabler config.
{% example %}
{% capture code %}
{% include ui/breadcrumb.html class="breadcrumb-dots" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
{% example %}
{% capture code %}
{% include ui/breadcrumb.html class="breadcrumb-arrows" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
{% example %}
{% capture code %}
{% include ui/breadcrumb.html class="breadcrumb-bullets" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Alternate version
{% example %}
{% capture code %}
{% include ui/breadcrumb.html class="breadcrumb-alternate" %}
The `.btn` classes are designed to be used with the `<button>` element. However, you can also use these classes on `<a>` or `<input>` elements (though some browsers may apply a slightly different rendering).
{% include example.html code=code wrapper="btn-list" centered=true %}
### Button variations
Use any of the available button classes to quickly create a styled button . We provide a variety of colors for you to express different emotions.
{% example html wrapper=btn-list %}
{% capture code %}
{% for button in site.button-variants %}
{% assign btn-color = button[1].class %}
{% assign btn-title = button[1].title %}
{% include ui/button.html color=btn-color text=btn-title %}
{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
### Disabled buttons
Make buttons look inactive by adding the disabled boolean attribute to any `.btn` element. `<a>`s don’t support the disabled attribute, so you must add the `.disabled` class to make it visually appear disabled.
{% example html wrapper=btn-list %}
{% capture code %}
{% for button in site.button-variants %}
{% assign btn-color = button[1].class %}
{% assign btn-title = button[1].title %}
{% include ui/button.html color=btn-color text=btn-title disabled=true %}
{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
{% include example.html code=code wrapper="btn-list" centered=true %}
### Square buttons
Add `.btn-square` to button to remove border-radius.
{% example html wrapper=btn-list %}
{% capture code %}
{% for button in site.button-variants %}
{% assign btn-color = button[1].class %}
{% assign btn-title = button[1].title %}
{% include ui/button.html color=btn-color text=btn-title square=true %}
{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
### Pill buttons
Add `.btn-pill` class to any button to make them more rounded.
{% example html wrapper=btn-list %}
{% capture code %}
{% for button in site.button-variants %}
{% assign btn-color = button[1].class %}
{% assign btn-title = button[1].title %}
{% include ui/button.html color=btn-color text=btn-title pill=true %}
{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
### Outline buttons
In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline-*` ones to remove all background images and colors on any button.
{% example html wrapper=btn-list %}
{% capture code %}
{% for button in site.button-variants %}
{% assign btn-color = button[1].class %}
{% assign btn-title = button[1].title %}
{% include ui/button.html text=btn-title color=btn-color outline=true %}
{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
{% include ui/icon.html icon="git-merge" class="icon-sm" %}
</button>
{% endexample %}
{% capture code %}
{% include ui/button.html icon="activity" color="primary" icon-only=true %}
{% include ui/button.html icon="github" color="github" icon-only=true %}
{% include ui/button.html icon="bell" color="success" icon-only=true %}
{% include ui/button.html icon="star" color="warning" icon-only=true %}
{% include ui/button.html icon="trash-2" color="danger" icon-only=true %}
{% include ui/button.html icon="bar-chart" color="purple" icon-only=true %}
{% include ui/button.html icon="git-merge" color="secondary" icon-only=true %}
{% endcapture %}
{% include example.html code=code %}
### Button dropdown
Wrap the dropdown’s toggle (your button or link) and the dropdown menu within `.dropdown`, or another element that declares `position: relative;`. Dropdowns can be triggered from `<a>` or `<button>` elements to better fit your potential needs.
@@ -10,28 +10,31 @@ The `.card` element is simply a container with a shadow, a border, a radius, and
### Default card
{% example html columns=1 %}
{% capture code %}
{% include cards/card.html body="This is some text within a card body." %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Card with title and image
{% example html columns=1 %}
{% capture code %}
{% include cards/card.html img-top=true title="Card with title and image" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Blog post card
The best way to make your post eye-catching is adding an image to it. To do so, just add the image with the `.card-img-top` class. We've added the `.d-flex .flex-column` classes to the `.card-body` to have the author details be on the bottom of the card.
{% example html columns=1 %}
{% capture code %}
{% include cards/blog-single.html type="image" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Row deck
If you want to create a couple of posts next to each other, add the `.row-deck` class to `.row`—then they will all have the same height.
{% example html columns=3 %}
{% capture code %}
<divclass="row row-deck">
<divclass="col-md-4">
<divclass="card">
...
...
@@ -49,19 +52,21 @@ If you want to create a couple of posts next to each other, add the `.row-deck`
</div>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Post card with aside image
You can also add the image on the left side of the card. All you need do to is: add the `.card-aside` class to the element with the `.card` class. Then add the image in the `.card-aside-column` element. No worries, tabler will automatically center it and scale to right size:
{% example html columns=3 %}
{% capture code %}
{% include cards/blog-single.html type="aside" liked=1 article-id=3 %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Color variations
{% example html columns=3 %}
{% capture code %}
<divclass="row row-deck">
<divclass="col-md-6">
{% include cards/card.html status-top="danger" title="Card with top status" %}
...
...
@@ -70,17 +75,20 @@ You can also add the image on the left side of the card. All you need do to is:
{% include cards/card.html status-left="green" title="Card with side status" %}
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Stacked card
{% example html columns=1 %}
{% capture code %}
{% include cards/card.html class="card-stacked" title="Stacked card" %}
<textareaclass="form-control"name="example-textarea-input"rows="6"placeholder="Content..">Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!</textarea>
</div>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Image check
{% example %}
{% capture code %}
{% include parts/form/input-image.html %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Input color
{% example %}
{% capture code %}
{% include parts/form/input-color.html %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Input color picker
{% example %}
{% capture code %}
{% include parts/form/input-colorpicker.html %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Datalists
{% example %}
{% capture code %}
{% include parts/form/input-datalist.html %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Custom selectboxes
{% example %}
{% capture code %}
{% include parts/form/input-selectgroups.html %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Toggle switches
{% example %}
{% capture code %}
{% include parts/form/input-toggle.html %}
{% include parts/form/input-toggle-single.html %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Radios
{% example %}
{% capture code %}
{% include parts/form/input-radios.html %}
{% include parts/form/input-radios-inline.html %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Checkboxes
{% example %}
{% capture code %}
{% include parts/form/input-checkboxes.html %}
{% include parts/form/input-checkboxes-inline.html %}
<spanclass="form-help"data-toggle="popover"data-placement="top"data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href=''>USP ZIP codes lookup tools</a></p>">?</span>
When using two handles, the minimum distance between the handles can be set using the margin option. The margin value is relative to the value set in 'range'. This option is only available on linear sliders.
The `limit` option is the oposite of the margin option, limiting the maximum distance between two handles. As with the margin option, the `limit` option can only be used on linear sliders.
Toasts are slightly translucent, too, so they blend over whatever they might appear over. For browsers that support the `backdrop-filter` CSS property, we’ll also attempt to blur the elements under a toast.
{% example html class=bg-gray %}
{% capture code %}
{% include ui/toast.html %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Stacking toasts
If you want to stack toasts just put them in the same container.
{% example %}
{% capture code %}
{% include ui/toast.html person-id=3 %}
{% include ui/toast.html date="7 mins ago" text="This is another toast message." %}
{% for i in (1..6) %}<h{{i}}>H{{ i }} Heading</h{{i}}>
{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Paragraphs
{% example %}
{% capture code %}
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
...
...
@@ -71,12 +75,13 @@ Text <sup>Superscripted</sup><hide> <code class="ml-2">sup</code><br/></hide>
<p>
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Optimized for Asian, African, and Middle Eastern alphabets
{% example %}
{% capture code %}
<h5>Chinese</h5>
<p>汉字</p>
...
...
@@ -106,38 +111,42 @@ Text <sup>Superscripted</sup><hide> <code class="ml-2">sup</code><br/></hide>
<h5>Thai</h5>
<p>อักษรไทย</p>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Text transform
Transform text in components with text capitalization classes.
{% example %}
{% capture code %}
<pclass="text-lowercase">Lowercased text.</p>
<pclass="text-uppercase">Uppercased text.</p>
<pclass="text-capitalize">Capitalized text.</p>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Letter spacing
Utilities for controlling the tracking (letter spacing) of an element.
{% example %}
{% capture code %}
<pclass="tracking-tight">Lorem ipsum dolor sit amet. Tight letter spacing.</p>
<pclass="tracking-normal">Lorem ipsum dolor sit amet. Normal letter spacing.</p>
<pclass="tracking-wide">Lorem ipsum dolor sit amet. Wide letter spacing.</p>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Line Height
Utilities for controlling the leading (line height) of an element.
{% example %}
{% capture code %}
<pclass="lh-1">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
<pclass="lh-sm">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
<pclass="lh-base">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
<pclass="lh-lg">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Antialiasing
...
...
@@ -145,16 +154,17 @@ Utilities for controlling the font smoothing of an element.
Use the `.antialiased` utility to render text using subpixel antialiasing or use the `.subpixel-antialiased` render without antialiasing.
{% example %}
{% capture code %}
<divclass="antialiased">Text with antialiasing</div>
<divclass="subpixel-antialiased">Text without antialiasing</div>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Markdown elements
When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use `.markdown` as container. It can handle almost any HTML tag.
{% example %}
{% capture code %}
<divclass="markdown">
<h1>Hello World</h1>
<p>Lorem ipsum<sup><a>[1]</a></sup> dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub<sub>script</sub> works as well!</p>
...
...
@@ -167,4 +177,5 @@ When you can't use the CSS classes you want, or when you just want to directly u
