Skip to content

Commit 2703d00

Browse files
pratyushmppratyushmp
authored
Merge pull request #251 from julianmangut/master
Added example of how to use bootstrap on HTML.
2 parents bc51567 + 950b307 commit 2703d00

19 files changed

+626
-0
lines changed

‎HTML/bootstrap_use/css/example1.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
#left {
2+
background-color: blue;
3+
float: left;
4+
margin-left: 15%;
5+
margin-top: 10%;
6+
width: 525px;
7+
}
8+
9+
#right {
10+
background-color: red;
11+
float: right;
12+
margin-right: 15%;
13+
margin-top: 10%;
14+
width: 525px;
15+
}
16+
17+
#next {
18+
bottom: 10%;
19+
right: 15%;
20+
position: absolute;
21+
}

‎HTML/bootstrap_use/css/example2.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
#left {
2+
background-color: blue;
3+
float: left;
4+
margin-left: 15%;
5+
margin-top: 10%;
6+
width: 35%;
7+
}
8+
9+
#right {
10+
background-color: red;
11+
float: right;
12+
margin-right: 15%;
13+
margin-top: 10%;
14+
width: 35%;
15+
}
16+
17+
#next {
18+
bottom: 10%;
19+
right: 15%;
20+
position: absolute;
21+
}
22+
23+
#previous {
24+
bottom: 10%;
25+
left: 15%;
26+
position: absolute;
27+
}

‎HTML/bootstrap_use/css/example3.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.container {
2+
margin-top: 15%;
3+
}
4+
5+
#left {
6+
background-color: blue;
7+
}
8+
9+
#right {
10+
background-color: red;
11+
}
12+
13+
#previous {
14+
bottom: 10%;
15+
left: 15%;
16+
position: absolute;
17+
}
18+
19+
#next {
20+
bottom: 10%;
21+
right: 15%;
22+
position: absolute;
23+
}

‎HTML/bootstrap_use/css/example4.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.container-fluid {
2+
margin-top: 15%;
3+
}
4+
5+
#left {
6+
background-color: blue;
7+
}
8+
9+
#right {
10+
background-color: red;
11+
}
12+
13+
#previous {
14+
bottom: 10%;
15+
left: 15%;
16+
position: absolute;
17+
}
18+
19+
#next {
20+
bottom: 10%;
21+
right: 15%;
22+
position: absolute;
23+
}

‎HTML/bootstrap_use/css/example5.css‎

Whitespace-only changes.

‎HTML/bootstrap_use/css/example6.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.container {
2+
margin-top: 15%;
3+
}
4+
5+
#left {
6+
background-color: blue;
7+
}
8+
9+
#right {
10+
background-color: red;
11+
}
12+
13+
#previous {
14+
bottom: 10%;
15+
left: 15%;
16+
position: absolute;
17+
}
18+
19+
#next {
20+
bottom: 10%;
21+
right: 15%;
22+
position: absolute;
23+
}

‎HTML/bootstrap_use/css/example7.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.container {
2+
margin-top: 15%;
3+
}
4+
5+
#left {
6+
background-color: blue;
7+
}
8+
9+
#right {
10+
background-color: red;
11+
}
12+
13+
#previous {
14+
bottom: 10%;
15+
left: 15%;
16+
position: absolute;
17+
}
18+
19+
#next {
20+
bottom: 10%;
21+
right: 15%;
22+
position: absolute;
23+
}

‎HTML/bootstrap_use/css/example8.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
body,html {
2+
height: 100%;
3+
}
4+
5+
#previous {
6+
bottom: 10%;
7+
left: 15%;
8+
position: absolute;
9+
}
10+
11+
#next {
12+
bottom: 10%;
13+
right: 15%;
14+
position: absolute;
15+
}

‎HTML/bootstrap_use/css/example9.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.container {
2+
margin-top: 15%;
3+
}
4+
5+
#left {
6+
background-color: green;
7+
}
8+
9+
#right {
10+
background-color: red;
11+
}
12+
13+
#previous {
14+
bottom: 10%;
15+
left: 15%;
16+
position: absolute;
17+
}
18+
19+
#next {
20+
bottom: 10%;
21+
right: 15%;
22+
position: absolute;
23+
}

‎HTML/bootstrap_use/example1.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="css/example1.css">
7+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
8+
<title></title>
9+
</head>
10+
11+
<body>
12+
13+
<!-- EJEMPLO CREADO PARA MOSTRAR LA FALTA DE RESPONSIVE USANDO PX COMO TAMAÑO -->
14+
15+
<div id=left>
16+
<p>Deserunt minim iis incurreret cohaerescant iis ab ab graviterque ne occaecat
17+
adipisicing ne occaecat id sint ne est legam laboris, de in labore quid quem,
18+
eram ita quamquam, id esse despicationes si et aut aliqua consequat. Cillum
19+
vidisse a occaecat. Fore eu deserunt. Sint pariatur aut offendit. Pariatur
20+
aliqua dolor proident multos, cupidatat malis expetendis senserit. Laboris
21+
reprehenderit non mandaremus. Do velit quibusdam coniunctione o ut qui quem
22+
appellat et laborum quid culpa eu quae, sed commodo tractavissent ex laboris
23+
quae possumus tempor ut o ut nisi enim sint, dolor o admodum non nisi, pariatur
24+
ea possumus.</p>
25+
</div>
26+
<div id="right">
27+
Nulla ita qui sint officia est qui sunt firmissimum ad labore ab officia,
28+
arbitror ad varias. Summis nescius illustriora do in iis sint laborum. Sint
29+
distinguantur nescius veniam deserunt ad aut fugiat commodo imitarentur, ad
30+
aliqua dolor o probant, te aliquip a quibusdam. Proident quis senserit ullamco
31+
ne laborum tamen officia, iis anim ullamco eruditionem, probant de quem.
32+
Mandaremus sunt quamquam, veniam singulis si voluptatibus. Varias ea quo magna
33+
occaecat. E singulis tractavissent, sed duis firmissimum.
34+
</div>
35+
<button id="next" class="btn btn-outline-danger">
36+
<a href="example2.html">Next example</a>
37+
</button>
38+
39+
</body>
40+
</html>

0 commit comments

Comments
 (0)