Scribd
Upload
2 views21 pages

Modal Example

The document contains HTML code examples demonstrating the use of Bootstrap for creating a modal, a navigation bar, and a carousel. It includes various components such as buttons, dropdowns, and responsive design elements. Additionally, there are custom CSS styles defined for enhancing the appearance of the navbar and carousel.

Uploaded by

shwetikesoe704
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views21 pages

Modal Example

The document contains HTML code examples demonstrating the use of Bootstrap for creating a modal, a navigation bar, and a carousel. It includes various components such as buttons, dropdowns, and responsive design elements. Additionally, there are custom CSS styles defined for enhancing the appearance of the navbar and carousel.

Uploaded by

shwetikesoe704
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

minisoft

Modal Example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="[Link]
<!-- <link rel="stylesheet"
href="[Link]
<script src="[Link]
script>
<script
src="[Link]
script>
<script
src="[Link]
</head>
</head>
<body>
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-
target="#myModal">
Open modal
</button>

<!-- The Modal -->


<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">

<!-- Modal Header -->


<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-
dismiss="modal">&times;</button>
</div>

<!-- Modal body -->

Page | 1
minisoft

<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
<div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
</div>
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
<!--</div>-->
</div>

<!-- Modal footer -->


<div class="modal-footer">
<button type="button" class="btn btn-danger" data-
dismiss="modal">Close</button>
</div>

</div>
</div>
</div>

</div>
</body>
</html>
Navbar and Carousel Example

Page | 2
minisoft

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Navbar</title>
<link rel="stylesheet" href="style/[Link]">
<link rel="stylesheet" href="style/[Link]">
<link rel="stylesheet" href="font-awesome-4.7.0/css/[Link]" >
<link rel="stylesheet" href="style/[Link]">
<script src="[Link]
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script
src="[Link]
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<link rel="stylesheet"
href="[Link]
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<script src="[Link]
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>

</head>
<body>

<h2 class="sr-only">Image Logo</h2>


<nav class = "navbar navbar-expand-sm bg-secondary navbar-dark justify-content-
between">

<ul class = "navbar-nav">


<a class = "navbar-brand" href = "#">
<img src = "[Link]
style = "width:120px;" alt = "">
</a>
<li class = "nav-item active">
<a class = "nav-link" href = "#">Home
<span class = "sr-only">(current)</span>
</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
<li class = "nav-item dropdown">
<a class = "nav-link dropdown-toggle" href = "#"
id = "navbarDropdownMenuLink" role = "button" data-toggle = "dropdown"
aria-haspopup = "true" aria-expanded = "false">
Library
</a>
<div class = "dropdown-menu" aria-labelledby = "navbarDropdownMenuLink">
<a class = "dropdown-item" href = "#">HTML-5</a>
<a class = "dropdown-item" href = "#">CSS-3</a>
<a class = "dropdown-item" href = "#">Bootstrap-4</a>
</div>
</li>

Page | 3
minisoft

</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-
label="Search">
<button class="btn btn-outline-success my-2 my-sm-0"
type="submit">Search</button>
</form>
</nav>
<div class="container-fluid p-0 my-3" id="outer">
<header>
<nav class="navbar navbar-expand-lg navbar-light " style="background-color:
#400c5e;"><!--e3f2fd-->
<a class="navbar-brand" href="#">
<img src="\[Link]" width="10%" height="10%" alt=""> Movie
Theater </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarNav" aria-controls="navbarSupportedContent" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="[Link]">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="[Link]">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="[Link]">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="[Link]"><i class="fa fa-
facebook text-info"></i> Faceb</a>
</li>
<li class="nav-item">
<a class="nav-link" href="[Link]"><i class="fa fa-
google-plus text-info"></i></a>
</li>
</ul>
</div>
</nav>
</header>
<h2 class="sr-only">Carousel with Caption</h2>
<div class="row justify-content-center my-2">
<div id = "carouselwithIndicators" class = "carousel slide w-50 " data-ride =
"carousel">
<ol class = "carousel-indicators">
<li data-target = "#carouselExampleIndicators" data-slide-to = "0" class =
"active"></li>
<li data-target = "#carouselExampleIndicators" data-slide-to = "1"></li>
<li data-target = "#carouselExampleIndicators" data-slide-to = "2"></li>
</ol>
<div class = "carousel-inner ">
<div class = "carousel-item active">
<img class = "d-block w-100"
src = "image/images%20(4).jpg"
alt = "First slide">
<div class = "carousel-caption d-none d-md-block">
<h2 class="animated bounceInRight" style="animation-delay:
1s">html</h2>
<p class="animated bounceInDown" style="animation-delay:
2s">Hypertext Markup Language</p>

Page | 4
minisoft

</div>
</div>
<div class = "carousel-item">
<img class = "d-block w-100"
src = "image/images%20(3).jpg"
alt = "Second slide">
<div class = "carousel-caption d-none d-md-block">
<h2 class="animated rotateOutUpRight" style="animation-delay:
1s"> CSS</h2>
<p class="animated rotateOut" style="animation-delay: 2s">
Cascading Style Sheets</p>
</div>
</div>
<div class = "carousel-item">
<img class = "d-block w-100"
src = "image/images%20(2).jpg"
alt = "Third slide">
<div class = "carousel-caption d-none d-md-block">
<h2 class="animated zoomIn" style="animation-delay: 1s">PHP</h2>
<p class="animated zoomOutRight" style="animation-delay: 2s">
Hypertext Preprocessor</p>
</div>
</div>
</div>
<a class = "carousel-control-prev" href = "#carouselwithIndicators" role =
"button" data-slide = "prev">
<span class = "carousel-control-prev-icon" aria-hidden = "true"></span>
<span class = "sr-only">Previous</span>
</a>
<a class = "carousel-control-next" href = "#carouselwithIndicators" role ="
button" data-slide = "next">
<span class = "carousel-control-next-icon" aria-hidden = "true"></span>
<span class = "sr-only">Next</span>
</a>
</div>
</div>
</div>
</body>
</html>

Page | 5
minisoft

Sticky Navbar and Card Example

[Link]
@import url("//[Link]/font-awesome/4.7.0/css/[Link]");
.navbar-icon-top .navbar-nav .nav-link > .fa {
position: relative;
width: 36px;
font-size: 24px;
top: 3px;
line-height: 12px;
}
.navbar-icon-top .navbar-nav .nav-link > .fa > .badge {
font-size: 0.75rem;
position: absolute;
right: 0;
font-family: sans-serif;
top: -10px;
}
@media (min-width: 576px) {
.[Link]-expand-sm .navbar-nav .nav-link {
text-align: center;
display: table-cell;
height: 70px;
vertical-align: middle;
padding-top: 0;
padding-bottom: 0;
}
.[Link]-expand-sm .navbar-nav .nav-link > .fa {
display: block;
width: 48px;

Page | 6
minisoft

margin: 2px auto 4px auto;


top: 0;
line-height: 24px;
}
.[Link]-expand-sm .navbar-nav .nav-link > .fa > .badge {
top: -7px;
}
}
@media (min-width: 768px) {
.[Link]-expand-md .navbar-nav .nav-link {
text-align: center;
display: table-cell;
height: 70px;
vertical-align: middle;
padding-top: 0;
padding-bottom: 0;
}
.[Link]-expand-md .navbar-nav .nav-link > .fa {
display: block;
width: 48px;
margin: 2px auto 4px auto;
top: 0;
line-height: 24px;
}
.[Link]-expand-md .navbar-nav .nav-link > .fa > .badge {
top: -7px;
}
}
@media (min-width: 992px) {
.[Link]-expand-lg .navbar-nav .nav-link {
text-align: center;
display: table-cell;
height: 70px;
vertical-align: middle;
padding-top: 0;
padding-bottom: 0;
}

.[Link]-expand-lg .navbar-nav .nav-link > .fa {


display: block;
width: 48px;
margin: 2px auto 4px auto;
top: 0;
line-height: 24px;
}

.[Link]-expand-lg .navbar-nav .nav-link > .fa > .badge {


top: -7px;
}
}

@media (min-width: 1200px) {


.[Link]-expand-xl .navbar-nav .nav-link {
text-align: center;
display: table-cell;
height: 70px;
vertical-align: middle;
padding-top: 0;
padding-bottom: 0;
}

.[Link]-expand-xl .navbar-nav .nav-link > .fa {


display: block;

Page | 7
minisoft

width: 48px;
margin: 2px auto 4px auto;
top: 0;
line-height: 24px;
}

.[Link]-expand-xl .navbar-nav .nav-link > .fa > .badge {


top: -7px;
}
}

.breadcrumb-dot .breadcrumb-item+.breadcrumb-item::before {

content: "•";
color: #408080;

}
#description {
display: none;
}

.arr-right .breadcrumb-item+.breadcrumb-item::before {

content: "›";
vertical-align:top;
color: #408000;
font-size:35px;
line-height:18px;

}.carousel-item {
height: 50vh;
min-height: 150px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body{
font-family: 'Arrus Blk BT', cursive;}
header .[Link]{
height:100vh;
}
.carousel-caption{
padding-bottom:150px;
}
.carousel-caption h2{
font-size: 50px;
text-transfrorm:uppercase;
}
.[Link]{
background-image: none;
}
.[Link]{
background-image: none;
}
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sticky Navbar</title>
<!-- <link rel="stylesheet" href="style/[Link]">-->

Page | 8
minisoft

<link rel="stylesheet" href="font-awesome-4.7.0/css/[Link]" >


<link rel="stylesheet" href="style/[Link]" class="">
</head>
<body>

<body style="height:1000px" class="bg-dark">

<div class="container-fluid">

<h1 style="color:green;text-align:center;">
GeeksforGeeks
</h1>

<h2 style="text-align:center;">Sticky Navbar</h2>


</div>

<nav class="navbar navbar-expand-sm bg-success navbar-dark sticky-top">

<!------ Include the above in your HEAD tag ---------->

<nav class="navbar navbar-icon-top navbar-expand-lg ">


<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">


<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">
<i class="fa fa-home"></i>
Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-envelope-o">
<span class="badge badge-danger">11</span>
</i>
Link
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">
<i class="fa fa-envelope-o">
<span class="badge badge-warning">11</span>
</i>
Disabled
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-envelope-o">
<span class="badge badge-primary">11</span>
</i>
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>

Page | 9
minisoft

<a class="dropdown-item" href="#">Another action</a>


<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-bell">
<span class="badge badge-info">11</span>
</i>
Test
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-globe">
<span class="badge badge-success">11</span>
</i>
Test
</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search"
aria-label="Search">
<button class="btn btn-outline-dark my-2 my-sm-0"
type="submit">Search</button>
</form>
</div>
</nav>

</nav>

<div class="container-fluid" style="margin-top:30px">

<div class="card-columns">
<div class="card bg-transparent text-white">
<img class="card-img-top rounded-circle" src="image/[Link]" alt="Card
image cap">
<div class="card-body ">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below
as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source
Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img class="card-img-top rounded-circle" src="image/[Link]" alt="Card
image cap">
<div class="card-body">

Page | 10
minisoft

<h5 class="card-title">Card title</h5>


<p class="card-text">This card has supporting text below as a natural
lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins
ago</small></p>
</div>
</div>
<div class="card bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
posuere erat.</p>
<footer class="blockquote-footer">
<small>
Someone famous in <cite title="Source Title">Source
Title</cite>
</small>
</footer>
</blockquote>
</div>
</div>
<script src="[Link]
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script
src="[Link]
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<link rel="stylesheet"
href="[Link]
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<script src="[Link]
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</div>
</body>
</body>
</html>
Full Page Image Slider

Page | 11
minisoft

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Carousel Slide page 53</title>
<link rel="stylesheet" href="style/[Link]">
<link rel="stylesheet" href="font-awesome-4.7.0/css/[Link]">
<link rel="stylesheet" href="style/[Link]">
</head>
<body >
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>

Page | 12
minisoft

<header>
<div class="row justify-content-center mt-5">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">

<li data-target="#carouselExampleIndicators" data-slide-to="0"


class="active">
<!-- <img class="d-block w-100"
src="[Link] alt="First slide">-->
<img class="d-block w-100" src="image/images%20(88).jpg" alt="Third
slide">
</li>

<li data-target="#carouselExampleIndicators" data-slide-to="1">


<img class="d-block w-100" src="image/images%20(99).jpg" alt="Third
slide">
</li>

<li data-target="#carouselExampleIndicators" data-slide-to="2">


<img class="d-block w-100" src="image/images%20(100).jpg" alt="Third
slide">
</li>

</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<!-- <div class="carousel-item active" style="background-image:
url('[Link]
<div class="carousel-item active w-100">
<img src="image/images%20(88).jpg" alt="" class="img-fluid "
style="width:600px;height:400px" >
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">First Slide</h2>
<p class="lead">This is a description for the first slide.</p>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item w-100">
<img src="image/images%20(99).jpg" alt="" class="img-fluid"
style="width:600px;height:400px" >
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Second Slide</h2>
<p class="lead">This is a description for the second slide.</p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item w-100">
<img src="image/images%20(100).jpg" alt="" class="img-fluid "
style="width:600px;height:400px" >
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Third Slide</h2>
<p class="lead">This is a description for the third slide.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators"
role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators"
role="button" data-slide="next">

Page | 13
minisoft

<span class="carousel-control-next-icon" aria-hidden="true"></span>


<span class="sr-only">Next</span>
</a>
</div>
</div>
</header>

<!-- Page Content -->


<section class="py-5">
<div class="container">
<h1 class="display-4">Full Page Image Slider</h1>
<p class="lead">The background images for the slider are set directly in the
HTML using inline CSS. The images in this snippet are from <a
href="[Link] taken by <a
href="[Link] Kosinska</a>!</p>
</div>
</section>

<script src="[Link] integrity="sha384-


A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
crossorigin="anonymous"></script>
<script src="[Link]
integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
crossorigin="anonymous"></script>
<script
src="[Link]
integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
crossorigin="anonymous"></script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rounded Button</title>
<link rel="stylesheet"
href="[Link]
[Link]">
<style>
.fa {
padding: 20px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;

Page | 14
minisoft

.fa:hover {
opacity: 0.7;
}

.fa-facebook {
background: #3B5998;
color: white;
}

.fa-twitter {
background: #55ACEE;
color: white;
}

.fa-google {
background: #dd4b39;
color: white;
}

.fa-linkedin {
background: #007bb5;
color: white;
}

.fa-youtube {
background: #bb0000;
color: white;
}

.fa-instagram {
background: #125688;
color: white;
}

.fa-pinterest {
background: #cb2027;
color: white;
}

.fa-snapchat-ghost {
background: #fffc00;
color: white;
text-shadow: -1px 0 black,
0 1px black,1px 0 black, 0 -1px black;
}

.fa-skype {
background: #00aff0;
color: white;
}

.fa-android {
background: #a4c639;
color: white;
}

.fa-dribbble {
background: #ea4c89;
color: white;
}

Page | 15
minisoft

.fa-vimeo {
background: #45bbff;
color: white;
}

.fa-tumblr {
background: #2c4762;
color: white;
}

.fa-vine {
background: #00b489;
color: white;
}

.fa-foursquare {
background: #45bbff;
color: white;
}

.fa-stumbleupon {
background: #eb4924;
color: white;
}

.fa-flickr {
background: #f40083;
color: white;
}

.fa-yahoo {
background: #430297;
color: white;
}

.fa-soundcloud {
background: #ff5500;
color: white;
}

.fa-reddit {
background: #ff5700;
color: white;
}

.fa-rss {
background: #ff6600;
color: white;
}
</style>
</head>
<body>

<h2>Style Social Media Buttons</h2>

<!-- Add font awesome icons -->


<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-google"></a>
<a href="#" class="fa fa-linkedin"></a>
<a href="#" class="fa fa-youtube"></a>
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-pinterest"></a>

Page | 16
minisoft

<a href="#" class="fa fa-snapchat-ghost"></a>


<a href="#" class="fa fa-skype"></a>
<a href="#" class="fa fa-android"></a>
<a href="#" class="fa fa-dribbble"></a>
<a href="#" class="fa fa-vimeo"></a>
<a href="#" class="fa fa-tumblr"></a>
<a href="#" class="fa fa-vine"></a>
<a href="#" class="fa fa-foursquare"></a>
<a href="#" class="fa fa-stumbleupon"></a>
<a href="#" class="fa fa-flickr"></a>
<a href="#" class="fa fa-yahoo"></a>
<a href="#" class="fa fa-reddit"></a>
<a href="#" class="fa fa-rss"></a>

</body>
</html>

Page | 17
minisoft

Home Work 2

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="[Link]
<link rel="stylesheet"
href="[Link]
<link rel="stylesheet"
href="[Link]
[Link]">
<script src="[Link] data-auto-
replace-svg></script>

</head>
<body class="container">
<span style="font-size: 3em; color: Tomato;">
<i class="fab fa-twitter"></i>
</span>
<span style="font-size: 3em; color: Dodgerblue;">
<i class="fab fa-facebook"></i>
</span>
<div class="row" >

<ul class="list-group">
<li class="list-group-item ">
<i class="fa fa-laptop mr-5"></i> Cras justo odio
</li>
<li class="list-group-item active">
<div class="md-v-line"></div><i class="fa fa-bomb mr-5"></i>Dapibus ac
facilisis in
</li>
<li class="list-group-item">
<div class="md-v-line"></div><i class="fa fa-code mr-5"></i>Morbi leo risus
</li>
<li class="list-group-item">
<div class="md-v-line"></div><i class="fa fa-gem mr-5"></i>Porta ac

Page | 18
minisoft

consectetur ac
</li>
<li class="list-group-item">
<div class="md-v-line"></div><i class="fa fa-cogs mr-5"></i>Vestibulum at eros
</li>
</ul>

</div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
body{margin:40px;}

.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}
.[Link]-md {
width: 50px;
height: 50px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 25px;
}
.[Link]-xl {
width: 70px;
height: 70px;
padding: 10px 16px;
font-size: 24px;
line-height: 1.33;
border-radius: 35px;
}

</style>
<body>
<link href="[Link]
rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet"
href="[Link]
[Link]">
<script src="[Link]
script>
<script src="//[Link]/[Link]"></script>

<div class="container">
<div class="row" >

<ul class="list-group">

Page | 19
minisoft

<li class="list-group-item ">


<button type="button" class="btn btn-primary btn-circle btn-md"><i
class="fa fa-facebook"></i> </button>Cras justo odio
</li>
<li class="list-group-item active">
<button type="button" class="btn btn-success btn-circle btn-md"><i
class="fa fa-twitter mr-5"></i></button> Dapibus ac facilisis in
</li>
<li class="list-group-item">
<button type="button" class="btn btn-info btn-circle btn-md"><i class="fa
fa-instagram mr-5"></i></button> Morbi leo risus
</li>
<li class="list-group-item">
<button type="button" class="btn btn-danger btn-circle btn-md"><i
class="fa fa-leaf mr-5"></i></button> Porta ac consectetur ac
</li>
<li class="list-group-item">
<button type="button" class="btn btn-dark btn-circle btn-md"><i class="fa
fa-play mr-5"></i></button> Vestibulum at eros
</li>
</ul>

</div>
</div></body>
</html>
Rounded Pagination

Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pagination Exa</title>
<link rel="stylesheet" href="style/[Link]">
<link rel="stylesheet" href="font-awesome-4.7.0/css/[Link]">
<style>
.pagination > li > a, .pagination > li > span{
border-radius: 100px;
width: 50px;
height: 50px;
margin-left: 10px;
padding-top: 13px;
text-align: center;
}
.pagination > li:first-child > a, .pagination > li:first-child >
span,.pagination > li:last-child > a, .pagination > li:last-child > span {
border-radius: 100px;
}
</style>

</head>
<body>
<nav aria-label="Page navigation example">
<ul class="pagination rounded-circle pg-blue">
<li class="page-item disabled"><a class="page-link">First</a></li>
<li class="page-item disabled">

Page | 20
minisoft

<a class="page-link" aria-label="Previous">


<span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item active"><a class="page-link">1</a></li>
<li class="page-item"><a class="page-link">2</a></li>
<li class="page-item"><a class="page-link">3</a></li>
<li class="page-item"><a class="page-link">4</a></li>
<li class="page-item"><a class="page-link">5</a></li>
<li class="page-item">
<a class="page-link" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span>
</a>
</li>
<li class="page-item"><a class="page-link">Last</a></li>
</ul>
</nav>
<script src="[Link] integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script
src="[Link]
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="[Link]
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>

</html>

Page | 21

You might also like