Demoing bootstrap alerts.
Primary alert
Information
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Warning alert
Warning
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Danger alert
Danger
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Dark alert
Note
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
How to use the alerts
The alerts are in the _includes directory of this blog:
~/G/yaslamblog / gh-pages / _includes $ tree
.
├── alert-dark.html
├── alert-primary.html
├── alert-warning.html
├── comments.html
├── footer.html
├── links.html
├── navigation.html
└── post-data.html
1 directory, 8 files
You choose the alert you want and use it in a post with the capture functionality of Jekyll like this:
{% capture note %}
Nullam eu ante vel est convallis dignissim.
Fusce suscipit, wisi nec facilisis facilisis, est dui fermentum leo, quis tempor
ligula erat quis odio. Nunc porta vulputate tellus. Nunc rutrum turpis sed pede.
Sed bibendum. Aliquam posuere. Nunc aliquet, augue nec adipiscing interdum,
lacus tellus malesuada massa, quis varius mi purus non odio. Pellentesque
condimentum, magna ut suscipit hendrerit, ipsum augue ornare nulla, non luctus
diam neque sit amet urna. Curabitur vulputate vestibulum lorem. Fusce sagittis,
libero non molestie mollis, magna orci ultrices dolor, at vulputate neque nulla
lacinia eros. Sed id ligula quis est convallis tempor. Curabitur lacinia
pulvinar nibh. Nam a sapien.
{% endcapture %}
Then include the file from _includes:
{% include alert-primary.html heading="" content=note %}
Which will produce an alert like this:
Information
Nullam eu ante vel est convallis dignissim. Fusce suscipit, wisi nec facilisis facilisis, est dui fermentum leo, quis tempor ligula erat quis odio. Nunc porta vulputate tellus. Nunc rutrum turpis sed pede. Sed bibendum. Aliquam posuere. Nunc aliquet, augue nec adipiscing interdum, lacus tellus malesuada massa, quis varius mi purus non odio. Pellentesque condimentum, magna ut suscipit hendrerit, ipsum augue ornare nulla, non luctus diam neque sit amet urna. Curabitur vulputate vestibulum lorem. Fusce sagittis, libero non molestie mollis, magna orci ultrices dolor, at vulputate neque nulla lacinia eros. Sed id ligula quis est convallis tempor. Curabitur lacinia pulvinar nibh. Nam a sapien.