Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

Merge branches 'dev' and 'dev-doc-bootstrap-link' of https://github.com/tabler/tabler into dev-doc-bootstrap-link

Browse Source 
 Conflicts:
	.editorconfig
	pages/_docs/colors.md
This commit is contained in:
codecalm
2019-12-09 18:34:11 +01:00
parent 3b32ff48ba 770717035a
commit fb183df28c
34 changed files with 377 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
.editorconfig
View File

@@ -12,6 +12,7 @@ tab_width=3
[*.html]
indent_style=tab
indent_size=3
insert_final_newline=false
[*.md]
indent_style=tab
@@ -20,12 +21,3 @@ tab_width=3
[*.js.map]
indent_style=tab
indent_size=3
[{*.css,*.scss}]
indent_style=space
indent_size=2
insert_final_newline = true
[{*.yml,*.yaml}]
indent_style=space
indent_size=2

3
js/tabler-charts.js
View File

@@ -169,9 +169,6 @@ if (window.Apex) {
yaxis: {
show: false,
labels: {
show: false,
},
},
};
}

20
package.json
View File

@@ -68,24 +68,24 @@
"main": "dist/js/tabler.js",
"homepage": "https://tabler.io",
"devDependencies": {
"@babel/preset-env": "7.7.4",
"@babel/preset-env": "7.7.6",
"browser-sync": "2.26.7",
"bundlesize": "0.18.0",
"clean-css-cli": "4.3.0",
"cross-env": "6.0.3",
"eslint": "6.7.1",
"eslint": "6.7.2",
"eslint-config-xo": "0.27.2",
"eslint-plugin-import": "2.18.2",
"eslint-plugin-unicorn": "13.0.0",
"glob": "^7.1.6",
"http-server": "0.11.1",
"eslint-plugin-import": "2.19.1",
"eslint-plugin-unicorn": "14.0.1",
"glob": "7.1.6",
"http-server": "0.12.0",
"icon-font-generator": "2.1.10",
"node-sass": "4.13.0",
"node-sass-package-importer": "5.3.2",
"nodemon": "^2.0.1",
"nodemon": "2.0.1",
"npm-run-all": "4.1.5",
"postcss-cli": "6.1.3",
"rollup": "1.27.5",
"rollup": "1.27.9",
"rollup-plugin-babel": "4.3.3",
"rollup-plugin-babel-minify": "9.1.1",
"rollup-plugin-commonjs": "10.1.0",
@@ -95,7 +95,7 @@
"stylelint": "12.0.0",
"stylelint-config-twbs-bootstrap": "1.0.0",
"svgo": "1.3.2",
"terser": "4.4.0",
"terser": "4.4.2",
"yaml": "1.7.2"
},
"dependencies": {
@@ -106,7 +106,7 @@
"@fullcalendar/timegrid": "4.3.0",
"apexcharts": "3.10.1",
"autosize": "4.0.2",
"bootstrap": "twbs/bootstrap#76fd85b",
"bootstrap": "twbs/bootstrap#dde55d1",
"fullcalendar": "3.10.1",
"imask": "5.2.1",
"jquery": "3.4.1",

67
pages/_data/charts.yml
View File

@@ -1,7 +1,16 @@
tasks-overview:
type: bar
categories: ['Sprint 1','Sprint 2','Sprint 3','Sprint 4','Sprint 5','Sprint 6','Sprint 7','Sprint 8','Sprint 9','Sprint 10','Sprint 11','Sprint 12','Sprint 13','Sprint 14','Sprint 15','Sprint 16','Sprint 17','Sprint 18','Sprint 19','Sprint 20','Sprint 21','Sprint 22','Sprint 23','Sprint 24']
series:
- name: A
data: [44, 32, 48, 72, 60, 16, 44, 32, 78, 50, 68, 34, 26, 48, 72, 60, 84, 64, 74, 52, 62, 50, 32, 22]
total-sales:
type: donut
demo: true
sparkline: true
hide-legend: true
name: Total sales
series:
- name: Direct
color: blue
@@ -16,26 +25,26 @@ total-sales:
color: yellow
data: 12
total-sales2:
type: radalBar
campaigns:
name: Campaigns
demo: true
type: radialBar
sparkline: true
hide-legend: true
series:
- name: Direct
- name: Total Sent
color: blue
data: 44
- name: Affilliate
color: green
data: 55
- name: Sponsored
color: red
data: 35
- name: E-mail
color: yellow
data: 12
- name: Reached
color: blue-light
data: 36
- name: Opened
color: blue-lighten
data: 18
tasks:
name: Tasks
demo: true
type: line
categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W']
groups: [1, 2, 3]
@@ -72,7 +81,7 @@ development-activity:
line:
name: Employment Growth
display: true
demo: true
type: line
show-grid: true
categories: ['2013', '2014', '2015', '2016', '2017', '2018']
@@ -89,7 +98,7 @@ line:
line-stroke:
name: Line chart
display: true
demo: true
type: line
stroke-curve: straight
hide-legend: true
@@ -108,7 +117,7 @@ line-stroke:
stepline:
name: Stepline
display: true
demo: true
type: line
hide-legend: true
stroke-curve: stepline
@@ -120,7 +129,7 @@ stepline:
temperature:
name: Monthly Average Temperature
display: true
demo: true
type: line
show-labels: true
show-data-labels: true
@@ -139,7 +148,7 @@ temperature:
area:
name: Lorem ipsum
display: true
demo: true
type: area
hide-legend: true
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
@@ -154,7 +163,7 @@ area:
area-spline:
name: Lorem ipsum
display: true
demo: true
type: area
spline: true
hide-legend: true
@@ -170,12 +179,11 @@ area-spline:
area-spline-stacked:
name: Lorem ipsum
display: true
demo: true
type: area
spline: true
hide-legend: true
stacked: true
# groups: [1, 2]
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
series:
- name: Maximum
@@ -188,7 +196,7 @@ area-spline-stacked:
spline:
name: Wind speed during two days
display: true
demo: true
type: line
spline: true
show-labels: true
@@ -205,7 +213,7 @@ spline:
spline-rotated:
name: Lorem ipsum
display: true
demo: true
type: line
spline: true
rotated: true
@@ -222,7 +230,7 @@ spline-rotated:
bar:
name: Lorem ipsum
display: true
demo: true
type: bar
hide-legend: true
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
@@ -236,7 +244,7 @@ bar:
bar-rotated:
name: Lorem ipsum
display: true
demo: true
type: bar
rotated: true
hide-legend: true
@@ -252,10 +260,9 @@ bar-rotated:
bar-stacked:
name: Lorem ipsum
display: true
demo: true
type: bar
stacked: true
# groups: [1, 2]
hide-legend: true
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
series:
@@ -269,7 +276,7 @@ bar-stacked:
pie:
name: Lorem ipsum
display: true
demo: true
type: pie
hide-legend: true
show-data-labels: true
@@ -290,7 +297,7 @@ pie:
donut:
name: Lorem ipsum
display: true
demo: true
type: donut
sparkline: true
hide-legend: true
@@ -305,7 +312,7 @@ donut:
scatter:
name: Lorem ipsum
display: true
demo: true
type: scatter
hide-legend: true
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
@@ -320,7 +327,7 @@ scatter:
combination:
name: Combination chart
display: true
demo: true
type: bar
types:
2: 'line'

1
pages/_data/docs.yml
View File

@@ -7,6 +7,7 @@
- page: buttons
- page: cards
- page: carousel
- page: colors
- page: cursors
- page: charts
- page: divider

81
pages/_docs/avatars.md
View File

@@ -13,6 +13,50 @@ done: true
{% include ui/avatar.html person-id=3 %}
{% endexample %}
### Avatar image
Set an image as the background.
{% example html wrapper=avatar-list %}
{% include ui/avatar.html person-id=1 %}
{% include ui/avatar.html person-id=3 %}
{% include ui/avatar.html person-id=4 %}
{% endexample %}
### Initials
You can easily use initials instead of images.
{% example html wrapper=avatar-list %}
{% include ui/avatar.html placeholder="AB" %}
{% include ui/avatar.html placeholder="CD" %}
{% include ui/avatar.html placeholder="EF" %}
{% include ui/avatar.html placeholder="GH" %}
{% include ui/avatar.html placeholder="IJ" %}
{% endexample %}
### Avatar icons
You can also use icons in avatars.
{% example html wrapper=avatar-list %}
{% include ui/avatar.html icon="user" %}
{% include ui/avatar.html icon="plus" %}
{% include ui/avatar.html icon="user-plus" %}
{% endexample %}
### Avatar initials color
Customize the color of the avatars' background. You can click [here]({% docs_url colors %}) to see the list of available colors.
{% example html wrapper=avatar-list %}
{% include ui/avatar.html placeholder="AB" color="green" %}
{% include ui/avatar.html placeholder="CD" color="red" %}
{% include ui/avatar.html placeholder="EF" color="yellow" %}
{% include ui/avatar.html placeholder="GH" color="blue" %}
{% include ui/avatar.html placeholder="IJ" color="purple" %}
{% endexample %}
### Avatar size
Using Bootstrap’s typical naming structure, you can create a standard avatar, or scale it up to different sizes based on what’s needed.
@@ -50,43 +94,18 @@ Change the shape of an avatar with the default Bootstrap image classes.
{% include ui/avatar.html person-id=21 shape="rounded-lg" %}
{% endexample %}
### Initials
{% example html wrapper=avatar-list %}
{% include ui/avatar.html placeholder="AB" size="xl" %}
{% include ui/avatar.html placeholder="CD" size="lg" %}
{% include ui/avatar.html placeholder="EF" size="md" %}
{% include ui/avatar.html placeholder="GH" %}
{% include ui/avatar.html placeholder="IJ" size="sm" %}
{% endexample %}
### Avatar initials color
[See more]({% docs_url colors %})
{% example html wrapper=avatar-list %}
{% include ui/avatar.html placeholder="AB" color="green" %}
{% include ui/avatar.html placeholder="CD" color="red" %}
{% include ui/avatar.html placeholder="EF" color="yellow" %}
{% include ui/avatar.html placeholder="GH" color="blue" %}
{% include ui/avatar.html placeholder="IJ" color="purple" %}
{% endexample %}
### Avatar initials icons
{% example html wrapper=avatar-list %}
{% include ui/avatar.html icon="user" %}
{% include ui/avatar.html icon="plus" %}
{% include ui/avatar.html icon="user-plus" %}
{% endexample %}
### Avatars list
You can easily create a list of avatars.
{% example %}
{% include ui/avatar-list.html %}
{% endexample %}
### Stacked list
Make the list stack when it reaches a certain length.
{% example %}
<div class="avatar-list avatar-list-stacked">
{% for person in site.data.people limit: 5 offset: 30 %}

12
pages/_docs/badges.md
View File

@@ -10,21 +10,25 @@ done: true
{% example %}
{% for color in site.colors %}
<span class="badge text-white bg-{{ color[0] }}">{{ color[0] }}</span>
<span class="badge bg-{{ color[0] }}">{{ color[0] }}</span>
{% endfor %}
{% endexample %}
### Pill badges
To make a pill bagde (with rounded corners) add `.bagde-pill` class.
{% example %}
{% for color in site.colors %}
<span class="badge badge-pill text-white bg-{{ color[0] }}">{{ forloop.index }}</span>
<span class="badge badge-pill bg-{{ color[0] }}">{{ forloop.index }}</span>
{% endfor %}
{% endexample %}
### Soft badges
Creates a soft variant of a corresponding contextual badge variation. You can click [here]({% docs_url colors %}) to see the list of available colors.
{% example %}
{% for color in site.colors %}
<span class="badge bg-{{ color[0] }}-lt">{{ color[0] }}</span>
@@ -34,6 +38,8 @@ done: true
### Links
Make a badge work as a link by putting it into an `<a>` element.
{% example %}
{% for color in site.colors %}
<a href="#" class="badge bg-{{ color[0] }}">{{ color[0] }}</a>
@@ -43,6 +49,8 @@ done: true
### Empty badges
If you don't want your badge to contain any text you can do it by leaving the html element empty.
{% example %}
{% for color in site.colors %}
<a href="#" class="badge bg-{{ color[0] }}"></a>

8
pages/_docs/colors.md
View File

@@ -4,3 +4,11 @@ menu: docs.colors
description:
bootstrap-link: https://getbootstrap.com/docs/4.4/utilities/colors/
---
## Base colors
{% include example/colors-table.html %}
## Light colors
{% include example/colors-table.html light=true %}

7
pages/_docs/cursors.md
View File

@@ -5,6 +5,13 @@ menu: docs.cursors
### Cursor utilities
- `.cursor-auto`- cursor style depends on what's inside element
- `.cursor-pointer` - pointing cursor
- `.cursor-move` - cursor showing that user can move something
- `.cursor-not-allowed` - cursor showing that user is not allowed to do something
- `.cursor-zoom-in` - cursor showing that user can zoom in
- `.cursor-zoom-out` - cursor showing that user can zoom out
{% example html %}
<div class="row text-center">
<div class="col-4 mb-3">

28
pages/_docs/divider.md
View File

@@ -6,19 +6,33 @@ done: true
---
### Default markup
{% example html max-width=300 %}
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequatur maxime quia reprehenderit tempore?
</p>
<div class="hr-text">Left divider</div>
{% example html columns=1 %}
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
<div class="hr-text hr-text-center">Centered divider</div>
{% include ui/hr.html text="Left divider" %}
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
<div class="hr-text hr-text-right">Right divider</div>
{% include ui/hr.html text="Centered divider" position="center" %}
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
{% include ui/hr.html text="Right divider" position="right" %}
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
{% endexample %}
### Divider color
Customize the color of the divider. You can click [here]({% docs_url colors %}) to see the list of available colors.
{% example html columns=1 %}
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
</p>
{% include ui/hr.html text="Green divider" color="green" %}
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>

4
pages/_docs/flags.md
View File

@@ -15,6 +15,8 @@ done: true
### Flag sizes
Using Bootstrap’s typical naming structure, you can create a standard flag, or scale it up to different sizes based on what’s needed.
{% example html %}
{% include ui/flag.html flag="pl" class="flag-size-xl mr-1" %}
{% include ui/flag.html flag="pl" class="flag-size-lg mr-1" %}
@@ -24,6 +26,8 @@ done: true
### Types
To set the flag of the country you want add a class `flag-(country name)`. For example to create a flag of Andorra your class should look like this: `.flag-ad`.
<table>
{% for flag in site.data.flags %}
<tr>

20
pages/_docs/progress.md
View File

@@ -12,20 +12,26 @@ To create a default progress bar, add a `.progress` class to a `<div>` element:
{% include ui/progress.html %}
{% endexample %}
### Small progress
### Progress size
Using Bootstrap’s typical naming structure, you can create a standard progress, or scale it up to different sizes based on what’s needed.
{% example html %}
{% include ui/progress.html value=57 size="sm" %}
{% endexample %}
### Progress with value
### Progress without value
Remove the showed value by adding a class called `.sr-only`.
{% example html %}
{% include ui/progress.html value=75 show-value=true %}
{% include ui/progress.html value=75 show-value=false %}
{% endexample %}
### Indeterminate progress
To create indeterminate progress add `.progress-bar-indeterminate` to the `.progress-bar` element.
{% example html %}
{% include ui/progress.html indeterminate=true size="sm" %}
{% endexample %}
@@ -37,3 +43,11 @@ You can also use native HTML5 `<progress>` element.
{% example html %}
<progress class="progress progress-sm" value="15" max="100"/>
{% endexample %}
### Progress color
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 %}

15
pages/_docs/ribbons.md
View File

@@ -12,24 +12,39 @@ new: true
### Ribbon position
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
You can also use multiple classes at once for example: `.ribbon.ribbon-top.ribbon-left` moves the ribbon to the top left corner.
{% example html columns=1 %}
{% include cards/ribbon.html top=true left=true %}
{% endexample %}
### Ribbon color
Customize the ribbon's background color. You can click [here]({% docs_url colors %}) to see the list of available colors.
{% example html columns=1 %}
{% include cards/ribbon.html color="red" %}
{% endexample %}
### Ribbon text
Set your own text in a ribbon.
{% example html columns=1 %}
{% include cards/ribbon.html color="green" text="-50%" %}
{% endexample %}
### Ribbon style
Change the style of a ribbon.
{% example html columns=1 %}
{% include cards/ribbon.html bookmark=true color="orange" text="-50%" %}
{% endexample %}

10
pages/_includes/cards/charts/card.html
View File

@@ -1,10 +0,0 @@
{% assign data = site.data.charts[include.chart-id] %}
{% assign height = include.height | default: 10 %}
<div class="card">
<div class="card-body">
{% if include.title %}
<h3 class="card-title">{{ include.title }}</h3>
{% endif %}
{% include ui/chart.html height=height chart-id=include.chart-id %}
</div>
</div>

2
pages/_includes/cards/charts/total-sales.html
View File

@@ -4,6 +4,6 @@
<h3 class="card-title">Total sales</h3>
{% include ui/chart.html chart-id="total-sales" height=15 %}
{% include ui/chart.html chart-id="total-sales2" height=15 %}
{% include ui/chart.html chart-id="campaigns" height=15 %}
</div>
</div>

2
pages/_includes/cards/invoices.html
View File

@@ -3,7 +3,7 @@
<h3 class="card-title">Invoices</h3>
</div>
<div class="table-responsive">
<table class="table card-table table-vcenter text-nowrap datatable">
<table class="table card-table table-vcenter text-nowrap datatable overflow-hidden">
<thead>
<tr>
<th class="w-1p"><input class="form-check-input m-0 align-middle" type="checkbox"></th>

20
pages/_includes/example/colors-table.html Normal file
View File

@@ -0,0 +1,20 @@
{% assign colors = include.colors | default: site.colors %}
{% assign light = include.light %}
<div class="example">
<div class="mb-n3">
{% for color in colors %}
<div class="row row-sm mb-3 align-items-center">
<div class="col-auto">
<div class="stamp bg-{{ color[0] }}{% if light %}-lt{% else %} text-white{% endif %}">{{ color[0] | capitalize | first_letter }}</div>
</div>
<div class="col">
<span class="font-weight-semibold">{{ color[1].title }}</span><br/>
<code>bg-{{ color[0] }}{% if light %}-lt{% endif %}</code>
</div>
</div>
{% endfor %}
</div>
</div>

4
pages/_includes/layout/homepage.html
View File

@@ -43,10 +43,10 @@
<div class="col-lg-6">
<div class="row row-deck">
<div class="col-md-12">
{% include cards/charts/card.html chart-id="temperature" height=10 %}
{% comment %}{% include cards/charts/card.html chart-id="temperature" height=10 %}{% endcomment %}
</div>
<div class="col-md-12">
{% include cards/charts/card.html chart-id="donut" height=10 %}
{% comment %}{% include cards/charts/card.html chart-id="donut" height=10 %}{% endcomment %}
</div>
</div>
</div>

5
pages/_includes/ui/chart.html
View File

@@ -55,9 +55,8 @@
{% endif %}
{% if data.series %}
{% if data.type == 'pie' or data.type == 'donut' %}
{% if data.type == 'pie' or data.type == 'donut' or data.type == 'radialBar' %}
series: [{% for serie in data.series %}{{ serie.data }}{% unless forloop.last %}, {% endunless %}{% endfor %}],
labels: [{% for serie in data.series %}"{{ serie.name }}"{% unless forloop.last %},{% endunless %}{% endfor %}],
{% else %}
@@ -106,7 +105,7 @@
{% endif %}
{% if data.series %}
colors: [ //chart colors
colors: [
{% for serie in data.series %}
{{ serie.color | default: 'blue' | tabler_js_color }}{% unless forloop.last %},{% endunless %}{% endfor %}
],

1
pages/_includes/ui/hr.html Normal file
View File

@@ -0,0 +1 @@
<div class="hr-text{% if include.position %} hr-text-{{ include.position | downcase }}{% endif %}{% if include.color %} text-{{ include.color }}{% endif %}">{{ include.text | default: 'Label' }}</div>

5
pages/_plugins/jekyll-filters.rb
View File

@@ -84,6 +84,11 @@ module Jekyll
input.gsub re, repl_str
end
def hex_to_rgb(color)
r, g, b = color.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/).captures
"rgb(#{r.hex}, #{g.hex}, #{b.hex})"
end
end
end

17
pages/charts.html
View File

@@ -1,16 +1,25 @@
---
title: Charts
page-title: Charts
menu: charts
---
<div class="row">
{% for chart in site.data.charts %}
{% if chart[1].display %}
{% assign chart-name = chart[0] %}
{% if chart[1].demo %}
{% assign chart-id = chart[0] %}
<div class="col-lg-6 col-xl-4">
{% include cards/charts/card.html chart-id=chart-name %}
<div class="card">
{% if chart[1].name %}
<div class="card-header">
<h3 class="card-title">{{ chart[1].name }}</h3>
</div>
{% endif %}
<div class="card-body">
{% include ui/chart.html chart-id=chart-id height=15 %}
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>

51
pages/colors.html
View File

@@ -1,51 +0,0 @@
---
title: Colors
done: true
---
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h3 class="card-title">
Default colors
</h3>
</div>
<div class="card-body">
<ul class="list-unstyled">
{% for color in site.colors %}
<li class="d-flex align-items-center mb-3">
<div class="stamp bg-{{ color[0] }} text-white mr-3">{{ color[1].name | first_letters | upcase }}</div>
<div>
<strong>{{ color[1].name }}</strong><br />
<code>.bg-{{ color[0] }}</code>
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h3 class="card-title">
Light colors
</h3>
</div>
<div class="card-body">
<ul class="list-unstyled">
{% for color in site.colors %}
<li class="d-flex align-items-center mb-3">
<div class="stamp bg-{{ color[0] }}-lt mr-3">{{ color[1].name | first_letters | upcase }}</div>
<div>
<strong>{{ color[1].name }} lite</strong><br />
<code>.bg-{{ color[0] }}-lt</code>
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>

11
pages/tmp.html
View File

@@ -2,12 +2,17 @@
---
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
{% include ui/chart.html chart-id="tasks-overview" height=20 %}
</div>
</div>
</div>
<div class="col-4">
{% include cards/charts/total-sales.html %}
</div>
<div class="col-8">
</div>
<div class="col-8"></div>
</div>
<div class="row">
<div class="col-md-6">