<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
How to use Bootstrap to align labels
with content into 4 columns ?
</
title
>
<
link
rel
=
"stylesheet"
href
=
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
<
style
>
form {
margin-top: 30px;
margin-bottom: 30px;
padding-bottom: 25px;
}
.form-area {
margin-top: 30px;
}
label {
display: block;
color: black;
font-weight: bold;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color:green"
>GeeksforGeeks</
h1
>
<
hr
>
<
form
>
<
div
class
=
"row"
>
<
div
class
=
"col"
>
<
div
class
=
"row"
>
<
div
class
=
"col"
>
<
label
>HTML</
label
>
</
div
>
<
div
class
=
"col"
>
<
p
>
Learn to Design your First
Website in Just 1 Week
</
p
>
</
div
>
</
div
>
<
div
class
=
"row"
>
<
div
class
=
"col"
>
<
label
>CSS</
label
>
</
div
>
<
div
class
=
"col"
>
<
p
>
Cascading Style Sheets, fondly
referred to as CSS
</
p
>
</
div
>
</
div
>
<
div
class
=
"row"
>
<
div
class
=
"col"
>
<
label
>JavaScript</
label
>
</
div
>
<
div
class
=
"col"
>
<
p
>JavaScript Tutorials</
p
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"col"
>
<
div
class
=
"row"
>
<
div
class
=
"col"
>
<
label
>Front-end</
label
>
</
div
>
<
div
class
=
"col"
>
<
p
style
=
"font-weight: italic; color: grey"
>
“Front End” typically refers to all the
kinds of stuff that the user actually sees
on the website, once it loads completely.
This is why it is also called the “client-side”
of the front-end.
</
p
>
</
div
>
</
div
>
</
div
>
</
div
>
</
form
>
</
body
>
</
html
>