Scaffolding
Link
linkno-decoration linkBlockquote
This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.
Table
| name | age | gender | link |
|---|---|---|---|
| Karl | 18 | male | karl |
| Mia | 22 | female | mia |
| name | age | gender | link | head #1 | head #2 | head #3 | head #4 | head #5 | head #6 | head #7 | head #8 | head #9 | head #10 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Karl | 18 | male | karl | body #1 | body #2 | body #3 | body #4 | body #5 | body #6 | body #7 | body #8 | body #9 | body #10 |
| Mia | 22 | female | mia | body #1 | body #2 | body #3 | body #4 | body #5 | body #6 | body #7 | body #8 | body #9 | body #10 |
Codes
Inline codes
It is inline code.
html, css, javascript
code in link
Block codes
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.Optional Classes
.pad
p with .pad
If case of section with pad, it's responsive.
.accent
Heading with .accent
Heading with .accent
Heading with .accent
Heading with .accent
Heading with .accent
Heading with .accent
Badge
Default BadgeBadgeBADGE
in Text
text withbadgePrimaryDangerin Button
in Link
LinkNewLink badge
Rounded Badge
text and13rounded badge
Badge with Stacked Font Awesome Icon
Button
Default Buttons with Color-set
Flat button
Other tag as button
link buttonlink flat button
Icon Button
Disabled
Close Button
test textBadge
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Button Group
Horizontal Button Group (default)
Group of Flat Buttons
Vertical Button Group
with Dropdown buttons
Card
Vertical Card (default)
card title
Horizontal Card
card title
Card Inline
-
Card content
-
Card content
-
Card content
-
Card content
-
Card content
-
Card content
Hoverable
Bordered
Form
Grid
Container
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Defualt Grid
4/12 columns
8/12 columns
Mobile Grid
col-sm-6
col-sm-6
Tablet Grid
col-md-6
col-md-6
col-md-6
Desktop Grid
col-lg-6
col-lg-6
col-lg-6
col-lg-6
Equal-width
Setting one column width
Variable width by content
Equal-width multi-row
No gutters
Column wrapping
Offsetting columns
Push and pull
Helper
Toggling content
Fonts
- font-sans-serif
- font-accent
- font-cursive
Alignments
center align.
left align.
right align.
Float
Colors
Caret
Arrow
Shadow
Rounded
Image
Image Container
Image Filter
List
.list
- list item 1
- list item 2
- list item 3
.list-group
- list item 1
- list item 2
- list item 3
.list-horizontal
- list item 1
- list item 2
- list item 3
.breadcrumb
Loader
loading...