sidebar folded, docs refactoring

pages/_docs/alerts.md

@@ -2,7 +2,7 @@
 title: Alerts
 menu: docs.alerts
 description: Bootstrap provides an easy way to create predefined alert messages.
-bootstrap-link: https://getbootstrap.com/docs/4.4/components/alerts/
+bootstrap-link: components/alerts/
 done: true
 ---
 

pages/_docs/badges.md

@@ -2,7 +2,7 @@
 title: Badges
 menu: docs.badges
 description: A small count and labeling component.
-bootstrap-link: https://getbootstrap.com/docs/4.4/components/badge/
+bootstrap-link: components/badge/
 done: true
 ---
 

pages/_docs/breadcrumb.md

@@ -2,7 +2,7 @@
 title: Breadcrumb
 menu: docs.breadcrumb
 description: Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
-bootstrap-link: https://getbootstrap.com/docs/4.4/components/breadcrumb/
+bootstrap-link: components/breadcrumb/
 done: true
 ---
 

pages/_docs/buttons.md

@@ -2,7 +2,7 @@
 title: Buttons
 icon: fe fe-plus-square
 description: Use Bootstrap’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.
-bootstrap-link: https://getbootstrap.com/docs/4.4/components/buttons/
+bootstrap-link: components/buttons/
 done: true
 ---
 

pages/_docs/cards.md

@@ -2,7 +2,7 @@
 title: Cards
 menu: docs.cards
 description: A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. 
-bootstrap-link: https://getbootstrap.com/docs/4.4/components/card/
+bootstrap-link: components/card/
 done: true
 ---
 

pages/_docs/carousel.md

@@ -2,7 +2,7 @@
 title: Carousel
 menu: docs.carousel
 description: The Carousel is a slideshow for cycling through elements.
-bootstrap-link: https://getbootstrap.com/docs/4.4/components/carousel/
+bootstrap-link: components/carousel/
 ---
 
 {% example html columns=1 %}

pages/_docs/colors.md

@@ -2,7 +2,7 @@
 title: Colors
 menu: docs.colors
 description: 
-bootstrap-link: https://getbootstrap.com/docs/4.4/utilities/colors/
+bootstrap-link: utilities/colors/
 done: true
 ---
 

pages/_docs/divider.md

@@ -1,7 +1,7 @@
 ---
 title: Divider
 description: A divider visually segments content into groups
-bootstrap-link: https://getbootstrap.com/docs/4.4/components/dropdowns/#dividers
+bootstrap-link: components/dropdowns/#dividers
 done: true
 ---
 ### Default markup

pages/_docs/form-elements.md

@@ -1,6 +1,6 @@
 ---
 title: Form Elements
-bootstrap-link: https://getbootstrap.com/docs/4.4/components/forms/
+bootstrap-link: components/forms/
 ---
 
 ### Classic Input

pages/_docs/progress.md

@@ -1,7 +1,8 @@
 ---
 title: Progress
 description: A progress bar can be used to show a user how far along he is in a process.
-bootstrap-link: https://getbootstrap.com/docs/4.4/components/progress/
+bootstrap-link: components/progress/
+done: true
 ---
 
 ### Default markup
@@ -49,5 +50,8 @@ You can also use native HTML5 `<progress>` element.
 Customize the color of the progress bar. You can click [here]({% docs_url colors %}) to see the list of available colors.
 
 {% example %}
-{% include ui/progress.html size="sm" color="purple"%} 
-{% endexample %}
+{% include ui/progress.html size="sm" color="red" class="mb-2" value=24 %} 
+{% include ui/progress.html size="sm" color="green" class="mb-2" value=45 %} 
+{% include ui/progress.html size="sm" color="purple" class="mb-2" value=64 %} 
+{% include ui/progress.html size="sm" color="pink" %} 
+{% endexample %}

pages/_docs/ribbons.md

@@ -1,7 +1,7 @@
 ---
 title: Ribbons
 menu: docs.ribbons
-new: true
+done: true
 ---
 
 ### Default markup
@@ -14,10 +14,10 @@ new: true
 
 You can easily change the position of a ribbon by adding a class to the element.
 
-    `ribbon-top` - moves it to the top
-    `ribbon-right` - moves it to the right
-    `ribbon-bottom` - moves it to the bottom
-    `ribbon-left` - moves it to the lefg
+- `ribbon-top` - moves it to the top
+- `ribbon-right` - moves it to the right
+- `ribbon-bottom` - moves it to the bottom
+- `ribbon-left` - moves it to the lefg
 
 You can also use multiple classes at once for example: `.ribbon.ribbon-top.ribbon-left` moves the ribbon to the top left corner.
 

pages/_docs/spinners.md

@@ -1,7 +1,7 @@
 ---
 title: Spinners
 menu: docs.spinners
-bootstrap-link: https://getbootstrap.com/docs/4.4/components/spinners/
+bootstrap-link: components/spinners/
 done: true
 ---
 

pages/_docs/tables.md

@@ -1,7 +1,7 @@
 ---
 title: Tables
 menu: docs.tables
-bootstrap-link: https://getbootstrap.com/docs/4.4/content/tables/
+bootstrap-link: content/tables/
 ---
 
 ### Basic Table

pages/_docs/tabs.md

@@ -1,7 +1,7 @@
 ---
 title: Tabs
 menu: docs.tabs
-bootstrap-link: https://getbootstrap.com/docs/4.4/components/navs/
+bootstrap-link: components/navs/
 ---
 
 ### Default markup

pages/_docs/toasts.md

@@ -2,7 +2,7 @@
 title: Toasts
 menu: docs.toasts
 description: The toast component is like an alert box that is only shown for a couple of seconds when something happens (i.e. when the user clicks on a button, submits a form, etc.).
-bootstrap-link: https://getbootstrap.com/docs/4.4/components/toasts/
+bootstrap-link: components/toasts/
 ---
 
 

pages/_docs/tooltips.md

@@ -2,7 +2,7 @@
 title: Tooltips
 menu: docs.tooltips
 description: The Tooltip component is small pop-up box that appears when the user moves the mouse pointer over an element.
-bootstrap-link: https://getbootstrap.com/docs/4.4/components/tooltips/
+bootstrap-link: components/tooltips/
 ---
 
 ### Default markup

pages/_docs/typography.md

@@ -2,7 +2,7 @@
 title: Typography
 menu: docs.typography
 description: Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
-bootstrap-link: https://getbootstrap.com/docs/4.4/content/typography/
+bootstrap-link: content/typography/
 ---
 
 ### Headings