Fostrap bootstrap

Showing posts with label bootstrap. Show all posts

Home » Posts filed under bootstrap

March 13, 2016

30+ Bootstrap Modal Animation Effects with Material Design Style

bootstrap material design modal Unknown 3/13/2016 No comments

3/13/2016

Fostrap - The modal plugin is dialog box / popup that make a page focused on one section / box.
Today, I want to tutorial and share code snippets Bootstrap Modal Animation Effects Example with Material Design Style. Very much effect that FadeIn, Flip, Slide Down, Slide Up, etc.

Demo Download

First, setting Bootstrap, JQuery, and Velocity.js

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.ui.min.js'></script>

You can copy Modal Dialog that you want, example :

I Want Modal Animation Effects Fade In

Just copy script that you already download, just search class .fadeIn, see screenshot above :

Then, copy The Javascript

$(".modal").each(function(l){$(this).on("show.bs.modal",function(l){var o=$(this).attr("data-easein");"shake"==o?$(".modal-dialog").velocity("callout."+o):"pulse"==o?$(".modal-dialog").velocity("callout."+o):"tada"==o?$(".modal-dialog").velocity("callout."+o):"flash"==o?$(".modal-dialog").velocity("callout."+o):"bounce"==o?$(".modal-dialog").velocity("callout."+o):"swing"==o?$(".modal-dialog").velocity("callout."+o):$(".modal-dialog").velocity("transition."+o)})});

If you want to change with Material Design Style, copy The CSS below :

.modal-content {
border: none;
border-radius: 2px;
box-shadow: 0 16px 28px 0 rgba(0,0,0,0.22),0 25px 55px 0 rgba(0,0,0,0.21);
}
.modal-header{
border-bottom: 0;
padding-top: 15px;
padding-right: 26px;
padding-left: 26px;
padding-bottom: 0px;
}
.modal-title {
font-size: 34px;
}
.modal-body{
border-bottom: 0;
padding-top: 5px;
padding-right: 26px;
padding-left: 26px;
padding-bottom: 10px;
font-size: 15px;
}
.modal-footer {
border-top:0;
padding-top: 0px;
padding-right:26px;
padding-bottom:26px;
padding-left:26px;
}
.btn-default,.btn-primary {
border: none;
border-radius: 2px;
display: inline-block;
color: #424242;
background-color: #FFF;
text-align: center;
height: 36px;
line-height: 36px;
outline: 0;
padding: 0 2rem;
vertical-align: middle;
-webkit-tap-highlight-color: transparent;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
letter-spacing: .5px;
transition: .2s ease-out;
}
.btn-default:hover{
background-color: #FFF;
box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15);
}
.btn-primary {
color: #FFF;
background-color: #2980B9;
}
.btn-primary:hover{
background-color: #2980B9;
box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15);
}

Demo Download

Diposkan oleh Unknown

March 12, 2016

Customize Bootstrap Accordion With Arrow

accordion bootstrap Unknown 3/12/2016 1 comment

3/12/2016

Fostrap - Collapse is flexible plugin that utilizes a handful of classes for easy toggle behavior. Today, I want to share code snippets bootstrap accordion / collapse with arrow. I made 2 version, Light and Dark. And arrows that I use is Font Awesome

Demo Download

1. Light Version Bootstrap Accordion Collapse With Arrow

First, setting bootstrap and JQuery, you can use Bootstrap CDN Links

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

1. The HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-light">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<i class="indicator fa fa-caret-right">
</i>
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Liebe ist eine Frucht der Gefühle die starke Zuneigung und persönlichen Interessen. Im Zusammenhang mit der Philosophie der Liebe, die geerbt die Natur des guten Yg das ganze Gefühl der Güte, Mitgefühl und Zuneigung.
</div>
</div>
</div>
<div class="panel panel-light">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<i class="indicator fa fa-caret-right">
</i>
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Liebe ist eine Frucht der Gefühle die starke Zuneigung und persönlichen Interessen. Im Zusammenhang mit der Philosophie der Liebe, die geerbt die Natur des guten Yg das ganze Gefühl der Güte, Mitgefühl und Zuneigung.
</div>
</div>
</div>
<div class="panel panel-light">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<i class="indicator fa fa-caret-right">
</i>
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
Liebe ist eine Frucht der Gefühle die starke Zuneigung und persönlichen Interessen. Im Zusammenhang mit der Philosophie der Liebe, die geerbt die Natur des guten Yg das ganze Gefühl der Güte, Mitgefühl und Zuneigung.
</div>
</div>
</div>
</div>

2. The CSS

/********************/
/* Panel light color */
/********************/
.panel-light {
background: #E0E0E0;
border: 0;
border-radius: 0 !important;
box-shadow: 0px 0px 0px transparent;
color: #000;
margin-top:0;
}
.panel-light .panel-heading {
padding: 0;
}
.panel-light .panel-light {
background: #E0E0E0;
}
.panel-light .panel-body {
border-color: rgba(255, 255, 255, 0.10) !important;
border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
box-shadow: 0px -1px 0px #BDBDBD;
}
.panel-light .panel-title > a {
color: #000;
display: block;
padding: 10px 15px;
text-decoration: none !important;
}
.panel-light .panel-title > a:hover {
background: rgba(0, 0, 0, 0.1);
}
.panel-light .panel-title > a:focus {
outline: none;
}

3. The Javascript

function toggleChevron(e) {
$(e.target)
.prev('.panel-heading')
.find("i.indicator")
.toggleClass('fa-caret-right fa-caret-down');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);
$('#accordion2').on('hidden.bs.collapse', toggleChevron);
$('#accordion2').on('shown.bs.collapse', toggleChevron);

2. Dark Version Bootstrap Accordion With Arrow

First, setting bootstrap and JQuery, you can use Bootstrap CDN Links

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

1. The HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
<div class="panel panel-dark">
<div class="panel-heading" role="tab" id="headingOneDark">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseOneDark" aria-expanded="true" aria-controls="collapseOneDark">
<i class="indicator fa fa-caret-right">
</i>
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOneDark" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOneDark">
<div class="panel-body">
Liebe ist eine Frucht der Gefühle die starke Zuneigung und persönlichen Interessen. Im Zusammenhang mit der Philosophie der Liebe, die geerbt die Natur des guten Yg das ganze Gefühl der Güte, Mitgefühl und Zuneigung.
</div>
</div>
</div>
<div class="panel panel-dark">
<div class="panel-heading" role="tab" id="headingTwoDark">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwoDark" aria-expanded="false" aria-controls="collapseTwoDark">
<i class="indicator fa fa-caret-right">
</i>
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwoDark" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwoDark">
<div class="panel-body">
Liebe ist eine Frucht der Gefühle die starke Zuneigung und persönlichen Interessen. Im Zusammenhang mit der Philosophie der Liebe, die geerbt die Natur des guten Yg das ganze Gefühl der Güte, Mitgefühl und Zuneigung.
</div>
</div>
</div>
<div class="panel panel-dark">
<div class="panel-heading" role="tab" id="headingThreeDark">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseThreeDark" aria-expanded="false" aria-controls="collapseThreeDark">
<i class="indicator fa fa-caret-right">
</i>
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThreeDark" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThreeDark">
<div class="panel-body">
Liebe ist eine Frucht der Gefühle die starke Zuneigung und persönlichen Interessen. Im Zusammenhang mit der Philosophie der Liebe, die geerbt die Natur des guten Yg das ganze Gefühl der Güte, Mitgefühl und Zuneigung.
</div>
</div>
</div>
</div>

2. The CSS

/********************/
/* Panel dark color */
/********************/
.panel-dark {
background: #424242;
border: 0;
border-radius: 0 !important;
box-shadow: 0px 0px 0px transparent;
color: #FFF;
margin-top:0;
}
.panel-dark .panel-heading {
padding: 0;
}
.panel-dark .panel-dark {
background: #616161;
}
.panel-dark .panel-body {
border-color: rgba(255, 255, 255, 0.10) !important;
border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
box-shadow: 0px -1px 0px #212121;
}
.panel-dark .panel-title > a {
color: #FFF;
display: block;
padding: 10px 15px;
text-decoration: none !important;
}
.panel-dark .panel-title > a:hover {
background: rgba(0, 0, 0, 0.1);
}
.panel-dark .panel-title > a:focus {
outline: none;
}

3. The Javascript

function toggleChevron(e) {
$(e.target)
.prev('.panel-heading')
.find("i.indicator")
.toggleClass('fa-caret-right fa-caret-down');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);
$('#accordion2').on('hidden.bs.collapse', toggleChevron);
$('#accordion2').on('shown.bs.collapse', toggleChevron);

Demo Download

Diposkan oleh Unknown

March 10, 2016

Bootstrap 3 Outline Buttons Snippet

bootstrap buttons web design Unknown 3/10/2016 1 comment

3/10/2016

Demo Download

First, setting bootstrap, you can use Bootstrap CDN Links

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Second, setup The HTML

<div class="container">
<div class="row">
<h2>
Bootstrap Outline Buttons</h2>
Add the class <code>.outline</code> to any Bootstrap button style.<br />
<a class="btn btn-primary outline" href="https://www.blogger.com/null">Primary Button</a>
<a class="btn btn-success outline" href="http://www.fostrap.com/">Success Button</a>
<a class="btn btn-warning outline" href="http://www.fostrap.com/">Warning Button</a>
<a class="btn btn-danger outline" href="http://www.fostrap.com/">Danger Button</a>
<a class="btn btn-default outline" href="http://www.fostrap.com/">Default Button</a>
<br />
<h3>
Button Sizes</h3>
<a class="btn btn-primary outline btn-lg" href="http://www.fostrap.com/">Large Button</a>
<a class="btn btn-success outline btn-sm" href="http://www.fostrap.com/">Small Button</a>
<a class="btn btn-danger outline btn-xs" href="http://www.fostrap.com/">Extra Small Button</a>
</div>
</div>

Then, setup The CSS

body {
background-color : #ecf0f1
}
.outline {
background-color: transparent;
color: inherit;
transition: all .25s;
}
.btn-primary.outline {
color: #428bca;
}
.btn-success.outline {
color: #5cb85c;
}
.btn-info.outline {
color: #5bc0de;
}
.btn-warning.outline {
color: #f0ad4e;
}
.btn-danger.outline {
color: #d9534f;
}
.btn-primary.outline:hover,
.btn-success.outline:hover,
.btn-info.outline:hover,
.btn-warning.outline:hover,
.btn-danger.outline:hover {
color: #fff;
}

Diposkan oleh Unknown

March 9, 2016

Tutorial Styling Responsive Table Bootstrap (With Dark Color)

bootstrap table web design Unknown 3/09/2016 No comments

3/09/2016

Demo Download

First, setting bootstrap, you can use Bootstrap CDN Links

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Second, setup The HTML

<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="table-responsive costum-table-dark">
<table class="table">
<thead>
<tr>
<th width="2%">
No
</th>
<th>
First Name
</th>
<th>
Last Name
</th>
<th>
Username
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
Mark
</td>
<td>
Otto
</td>
<td>
@mdo
</td>
</tr>
<tr>
<td>
2
</td>
<td>
Jacob
</td>
<td>
Thornton
</td>
<td>
@fat
</td>
</tr>
<tr>
<td>
3
</td>
<td>
Larry
</td>
<td>
the Bird
</td>
<td>
@twitter
</td>
</tr>
<tr>
<td>
4
</td>
<td>
Mark
</td>
<td>
Otto
</td>
<td>
@mdo
</td>
</tr>
<tr>
<td>
5
</td>
<td>
Jacob
</td>
<td>
Thornton
</td>
<td>
@fat
</td>
</tr>
<tr>
<td>
6
</td>
<td>
Larry
</td>
<td>
the Bird
</td>
<td>
@twitter
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

Then, setup The CSS

.costum-table-dark .table th {
padding: 15px 10px !important;
background-color: #212121;
color: #EC7149;
border-top: 0 !important;
border-bottom: 2px solid #505050 !important;
}
.costum-table-dark .table tr:hover {
background-color: #3A3A3A;
}
.costum-table-dark .table {
background: #434242;
color: #FFF;
}
.costum-table-dark {
border: 0;
}
.costum-table-dark .table> tbody> tr> td, .costum-table-dark .table> tbody> tr> th, .costum-table-dark .table> tfoot> tr> td, .costum-table-dark .table> tfoot> tr> th, .costum-table-dark .table> thead> tr> td, .costum-table-dark .table> thead> tr> th {
border-top: 1px solid #505050;
text-align: left;
}

Diposkan oleh Unknown

March 6, 2016

Bootstrap Responsive Material Design Card

bootstrap card layout Unknown 3/06/2016 2 comments

3/06/2016

Fostrap - Tutorial make material cards based on bootstrap

Demo Download

First, setting bootstrap, you can use Bootstrap CDN Links

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Second, setup The HTML

<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="card">
<a class="img-card" href="http://www.fostrap.com/">
<img src="--------- YOUR IMAGE URL ----------" />
</a>
<br />
<div class="card-content">
<h4 class="card-title">
<a href="http://www.fostrap.com/">
Your title card
</a>
</h4>
<div class="">
Your description card
</div>
</div>
<div class="card-read-more">
<a class="btn btn-link btn-block" href="http://www.fostrap.com/">
Read More
</a>
</div>
</div>
</div>
</div>
</div>

Then, setup The CSS

.card {
display: block;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
transition: box-shadow .25s;
}
.card:hover {
box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
.img-card {
width: 100%;
height:200px;
border-top-left-radius:2px;
border-top-right-radius:2px;
display:block;
overflow: hidden;
}
.img-card img{
width: 100%;
height: 200px;
object-fit:cover;
transition: all .25s ease;
}
.card-content {
padding:15px;
text-align:left;
}
.card-title {
margin-top:0px;
font-weight: 700;
font-size: 1.65em;
}
.card-title a {
color: #000;
text-decoration: none !important;
}
.card-read-more {
border-top: 1px solid #D4D4D4;
}
.card-read-more a {
text-decoration: none !important;
padding:10px;
font-weight:600;
text-transform: uppercase
}

Demo Download

Diposkan oleh Unknown

March 2, 2016

Bootstrap 3 Carousel Fade Effect

bootstrap carousel Unknown 3/02/2016 No comments

3/02/2016

Fostrap - Create a slide show is a tough job for the new learn CSS because it essentially Slide Show made with Javascript. For me, Javascript is a programming language that is a bit complicated, so for creating action such as the slide show is also difficult.

But after I learned Bootstrap makes a slide show is a very easy job.

And now, Fostrap will be giving a Tutorial to make a carousel bootstrap by adding more wonderful effect fadein & out

Demo

Lets Make Bootstrap Carousel Effect FadeIn and FadeOut

1. Copy The HTML Below

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
</link>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css"/>
</link>
<div class="carousel slide carousel-fade" data-ride="carousel" id="carouselFade">

<br />
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="carousel-caption">
<h3>
First slide label
</h3>
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>
Second slide label
</h3>
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>
Third slide label
</h3>
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
</div>
</div>
</div>

<a class="left carousel-control" data-slide="prev" href="https://www.blogger.com/blogger.g?blogID=8927574837029310736#carouselFade" role="button">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-left">
</span>
<span class="sr-only">
Previous
</span>
</a>
<a class="right carousel-control" data-slide="next" href="https://www.blogger.com/blogger.g?blogID=8927574837029310736#carouselFade" role="button">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-right">
</span>
<span class="sr-only">
Next
</span>
</a>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js">
</script>

2. Copy The CSS Below

   

.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
  opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-control {
  z-index: 2;
} 
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
} 
.carousel-caption {
    text-shadow: 0 1px 4px rgba(0,0,0,.9);
  font-size:17px
}
.carousel-caption h3 {
  font-size: 30px;
  font-family: 'Lato', sans-serif;
}
    html,
    body,
    .carousel,
    .carousel-inner,
    .carousel-inner .item {
      height: 100%;
    } 
    .item:nth-child(1) {
      background: url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/HZZKGVVJ6I.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
    }
    .item:nth-child(2) {
      background: url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/D2ROMCUEIV.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
    }
    .item:nth-child(3) {
      background: url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/PU9HHZB5QW.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
    }

3. Copy The Javascript Below

   

$('#carouselFade').carousel();

Note

: If you want to change the background, just edit The CSS, edit in :

.item:nth-child(1) {
background: url('-----------Your Background Image-----------');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.item:nth-child(2) {
background: url('-----------Your Background Image-----------');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.item:nth-child(3) {
background: url('-----------Your Background Image-----------');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}