Skip to content

Commit 26796fb

Browse files
xidedixxidedix
committed
refactor(Jumbotrons): view rearrange
1 parent 83fde96 commit 26796fb

File tree

1 file changed

+78
-68
lines changed

1 file changed

+78
-68
lines changed

‎src/views/base/Jumbotrons.vue‎

Lines changed: 78 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,84 @@
11
<template>
22
<div class="wrapper">
33
<div class="animated fadeIn">
4-
<b-card
5-
header-tag="header"
6-
footer-tag="footer">
7-
<div slot="header">
8-
<i class="fa fa-align-justify"></i> <strong>Bootstrap Jumbotron</strong>
9-
<div class="card-header-actions">
10-
<a href="https://bootstrap-vue.js.org/docs/components/jumbotron" class="card-header-action" rel="noreferrer noopener" target="_blank">
11-
<small class="text-muted">docs</small>
12-
</a>
13-
</div>
14-
</div>
15-
<div>
16-
<b-jumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
17-
<p>For more information visit website</p>
18-
<b-btn variant="primary" href="#">More Info</b-btn>
19-
</b-jumbotron>
20-
</div>
21-
</b-card>
22-
<b-card
23-
header-tag="header"
24-
footer-tag="footer">
25-
<div slot="header">
26-
<i class="fa fa-align-justify"></i> <strong>Jumbotron</strong>
27-
<small>with slots</small>
28-
</div>
29-
<div>
30-
<b-jumbotron>
31-
<template slot="header">
32-
Bootstrap 4
33-
</template>
34-
<template slot="lead">
35-
This is a simple hero unit, a simple jumbotron-style component for
36-
calling extra attention to featured content or information.
37-
</template>
38-
<hr class="my-4">
39-
<p>
40-
It uses utility classes for typography and spacing to space content
41-
out within the larger container.
42-
</p>
43-
<b-btn variant="primary" href="#">Do Something</b-btn>
44-
<b-btn variant="success" href="#">Do Something Else</b-btn>
45-
</b-jumbotron>
46-
</div>
47-
</b-card>
48-
<b-card
49-
header-tag="header"
50-
footer-tag="footer">
51-
<div slot="header">
52-
<i class="fa fa-align-justify"></i> <strong>Jumbotron</strong>
53-
<small>variants</small>
54-
</div>
55-
<div>
56-
<b-jumbotron bg-variant="info" text-variant="white" border-variant="dark">
57-
<template slot="header">
58-
Bootstrap 4
59-
</template>
60-
<template slot="lead">
61-
This is a simple hero unit, a simple jumbotron-style component for
62-
calling extra attention to featured content or information.
63-
</template>
64-
<hr class="my-4">
65-
<p>
66-
It uses utility classes for typography and spacing to space content
67-
out within the larger container.
68-
</p>
69-
</b-jumbotron>
70-
</div>
71-
</b-card>
4+
<b-row>
5+
<b-col>
6+
<b-card
7+
header-tag="header"
8+
footer-tag="footer">
9+
<div slot="header">
10+
<i class="fa fa-align-justify"></i> <strong>Bootstrap Jumbotron</strong>
11+
<div class="card-header-actions">
12+
<a href="https://bootstrap-vue.js.org/docs/components/jumbotron" class="card-header-action" rel="noreferrer noopener" target="_blank">
13+
<small class="text-muted">docs</small>
14+
</a>
15+
</div>
16+
</div>
17+
<div>
18+
<b-jumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
19+
<p>For more information visit website</p>
20+
<b-btn variant="primary" href="#">More Info</b-btn>
21+
</b-jumbotron>
22+
</div>
23+
</b-card>
24+
</b-col>
25+
<b-col>
26+
<b-card
27+
header-tag="header"
28+
footer-tag="footer">
29+
<div slot="header">
30+
<i class="fa fa-align-justify"></i> <strong>Jumbotron</strong>
31+
<small>with slots</small>
32+
</div>
33+
<div>
34+
<b-jumbotron>
35+
<template slot="header">
36+
Bootstrap 4
37+
</template>
38+
<template slot="lead">
39+
This is a simple hero unit, a simple jumbotron-style component for
40+
calling extra attention to featured content or information.
41+
</template>
42+
<hr class="my-4">
43+
<p>
44+
It uses utility classes for typography and spacing to space content
45+
out within the larger container.
46+
</p>
47+
<b-btn variant="primary" href="#">Do Something</b-btn>
48+
<b-btn variant="success" href="#">Do Something Else</b-btn>
49+
</b-jumbotron>
50+
</div>
51+
</b-card>
52+
</b-col>
53+
</b-row>
54+
<b-row>
55+
<b-col>
56+
<b-card
57+
header-tag="header"
58+
footer-tag="footer">
59+
<div slot="header">
60+
<i class="fa fa-align-justify"></i> <strong>Jumbotron</strong>
61+
<small>variants</small>
62+
</div>
63+
<div>
64+
<b-jumbotron bg-variant="info" text-variant="white" border-variant="dark">
65+
<template slot="header">
66+
Bootstrap 4
67+
</template>
68+
<template slot="lead">
69+
This is a simple hero unit, a simple jumbotron-style component for
70+
calling extra attention to featured content or information.
71+
</template>
72+
<hr class="my-4">
73+
<p>
74+
It uses utility classes for typography and spacing to space content
75+
out within the larger container.
76+
</p>
77+
</b-jumbotron>
78+
</div>
79+
</b-card>
80+
</b-col>
81+
</b-row>
7282
</div>
7383
</div>
7484
</template>

0 commit comments

Comments
 (0)