<!DOCTYPE html>
<
html
>
<
head
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
>
<
link
rel
=
"stylesheet"
href
=
integrity
=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin
=
"anonymous"
>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
integrity
=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin
=
"anonymous"
>
</
script
>
<
link
rel
=
"stylesheet"
href
=
</
head
>
<
body
>
<
div
class
=
"container"
>
<
h1
>
Bootstrap Buttons Outline
Examples in Different size
</
h1
>
<
p
>
There are some examples of buttons
outline with different icons and
different size:-
</
p
>
<
button
type
=
"button"
class
=
"btn btn-sm btn-outline-primary"
>
<
i
class
=
"fa fa-home"
></
i
>
</
button
>
<
button
type
=
"button"
class
=
"btn btn-md btn-outline-primary"
>
<
i
class
=
"fa fa-home"
></
i
>
</
button
>
<
button
type
=
"button"
class
=
"btn btn-lg btn-outline-primary"
>
<
i
class
=
"fa fa-home"
></
i
>
</
button
><
br
><
br
>
<
button
type
=
"button"
class
=
"btn btn-sm btn-outline-success"
>
Home
</
button
>
<
button
type
=
"button"
class
=
"btn btn-md btn-outline-success"
>
Home
</
button
>
<
button
type
=
"button"
class
=
"btn btn-lg btn-outline-success"
>
Home
</
button
>
<
br
><
br
>
<
button
type
=
"button"
class
=
"btn btn-sm btn-outline-danger"
>
<
i
class
=
"fa fa-home"
></
i
>
Home
</
button
>
<
button
type
=
"button"
class
=
"btn btn-md btn-outline-danger"
>
<
i
class
=
"fa fa-home"
></
i
>
Home
</
button
>
<
button
type
=
"button"
class
=
"btn btn-lg btn-outline-danger"
>
<
i
class
=
"fa fa-home"
></
i
>
Home
</
button
><
br
><
br
>
<
button
type
=
"button"
class
=
"btn btn-lg btn-outline-primary"
>
<
i
class
=
"fa fa-asterisk"
></
i
>
</
button
>
<
button
type
=
"button"
class
=
"btn btn-lg btn-outline-success"
>
<
i
class
=
"fa fa-circle"
></
i
>
</
button
>
<
button
type
=
"button"
class
=
"btn btn-lg btn-outline-warning"
>
<
i
class
=
"fa fa-square"
></
i
>
</
button
>
<
button
type
=
"button"
class
=
"btn btn-lg btn-outline-danger"
>
<
i
class
=
"fa fa-heart"
></
i
>
</
button
>
<
button
type
=
"button"
class
=
"btn btn-lg btn-outline-info"
>
<
i
class
=
"fa fa-battery"
></
i
>
</
button
>
<
button
type
=
"button"
class
=
"btn btn-lg btn-outline-dark"
>
<
i
class
=
"fa fa-bell"
></
i
>
</
button
>
</
div
>
</
body
>
</
html
>