Showing posts with label Bootstrap. Show all posts

Thursday, September 22, 2016

How to make Testimonial Slider

Intoduction :-
Hii Friends...
Today I explain how to make a bootstrap Testimonial Slider. Testimonial is a formal statement testifying to someone's character and qualifications. A Testimonial or show consists of a person's written or spoken statement extolling the virtue of a product.

HTML & CSS Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>

    <style>
    .carousel-control.left,.carousel-control.right {background:none;width:25px;}
.carousel-control.left {left:-25px;}
.carousel-control.right {right:-25px;}
.broun-block {
    background: url("http://myinstantcms.ru/images/bg-broun1.jpg") repeat scroll center top rgba(0, 0, 0, 0);
    padding-bottom: 34px;
}
.block-text {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 3px 0 #2c2222;
    color: #626262;
    font-size: 14px;
    margin-top: 27px;
    padding: 15px 18px;
}
.block-text a {
color: #7d4702;
    font-size: 25px;
    font-weight: bold;
    line-height: 21px;
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.mark {
    padding: 12px 0;background:none;
}
.block-text p {
    color: #585858;
    font-family: Georgia;
    font-style: italic;
    line-height: 20px;
}

.sprite-i-triangle {
    background-position: 0 -1298px;
    height: 44px;
    width: 50px;
}
.block-text ins {
    bottom: -44px;
    left: 50%;
    margin-left: -60px;
}

.block {
    display: block;
}
.zmin {
    z-index: 1;
}
.ab {
    position: absolute;
}

.person-text {
    padding: 10px 0 0;
    text-align: center;
    z-index: 2;
}
.person-text a {
    color: #ffcc00;
    display: block;
    font-size: 14px;
    margin-top: 3px;
    text-decoration: underline;
}
.person-text i {
    color: #fff;
    font-family: Georgia;
    font-size: 13px;
}
.rel {
    position: relative;
}

    </style>

</head>
<body>
    <form id="form1" runat="server">
    <div>

<div class="carousel-reviews broun-block">
    <div class="container">
        <div class="row">
            <div id="carousel-reviews" class="carousel slide" data-ride="carousel">

                <div class="carousel-inner">
                    <div class="item active">
                        <div class="col-md-4 col-sm-6">
                            <div class="block-text rel zmin">
                                <a title="" href="#">Sheetal</a>
                                <div class="mark">My rating: <span class="rating-input"><span data-value="0" class="glyphicon glyphicon-star"></span><span data-value="1" class="glyphicon glyphicon-star"></span><span data-value="2" class="glyphicon glyphicon-star"></span><span data-value="3" class="glyphicon glyphicon-star"></span><span data-value="4" class="glyphicon glyphicon-star-empty"></span><span data-value="5" class="glyphicon glyphicon-star-empty"></span> </span></div>
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.</p>
                                <ins class="ab zmin sprite sprite-i-triangle block"></ins>
                            </div>
                           <div class="person-text rel">
                                <img src="https://media.licdn.com/mpr/mpr/shrink_100_100/AAEAAQAAAAAAAAf_AAAAJGQ4NWEyZmUwLWEyNTgtNDJmMC04OWQ1LWRiZDQwNjRkOTAzMQ.jpg" style="border-radius: 50px;"/>
                               <a title="" href="#">Sheetal</a>
                               <i>from Bharatpur</i>
                           </div>
                       </div>
                       <div class="col-md-4 col-sm-6 hidden-xs">
                            <div class="block-text rel zmin">
                                <a title="" href="#">Deepika</a>
                                <div class="mark">My rating: <span class="rating-input"><span data-value="0" class="glyphicon glyphicon-star"></span><span data-value="1" class="glyphicon glyphicon-star"></span><span data-value="2" class="glyphicon glyphicon-star-empty"></span><span data-value="3" class="glyphicon glyphicon-star-empty"></span><span data-value="4" class="glyphicon glyphicon-star-empty"></span><span data-value="5" class="glyphicon glyphicon-star-empty"></span> </span></div>
                               <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.</p>
                                <ins class="ab zmin sprite sprite-i-triangle block"></ins>
                            </div>
                           <div class="person-text rel">
                                <img style="border-radius: 50px;" src="https://yt3.ggpht.com/-_lPdJSkjvkg/AAAAAAAAAAI/AAAAAAAAAAA/qmSPcvl81E0/s100-c-k-no-rj-c0xffffff/photo.jpg"/>
                                <a title="" href="#">Deepika</a>
                               <i>United States</i>
                           </div>
                       </div>
                       <div class="col-md-4 col-sm-6 hidden-sm hidden-xs">
                           <div class="block-text rel zmin">
                               <a title="" href="#">Jorge</a>
                               <div class="mark">My rating: <span class="rating-input"><span data-value="0" class="glyphicon glyphicon-star"></span><span data-value="1" class="glyphicon glyphicon-star"></span><span data-value="2" class="glyphicon glyphicon-star"></span><span data-value="3" class="glyphicon glyphicon-star"></span><span data-value="4" class="glyphicon glyphicon-star"></span><span data-value="5" class="glyphicon glyphicon-star"></span> </span></div>
                               <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.</p>
                               <ins class="ab zmin sprite sprite-i-triangle block"></ins>
                           </div>
                           <div class="person-text rel">
                               <img style="height: 100px; border-radius: 50px;" src="https://pbs.twimg.com/profile_images/555227960026746880/0tqN73Qj_400x400.jpeg"/>
                               <a title="" href="#">Jorge</a>
                               <i>Indonesia</i>
                           </div>
                       </div>
                    </div>
                    <div class="item">
                        <div class="col-md-4 col-sm-6">
                            <div class="block-text rel zmin">
                                <a title="" href="#">Denim</a>
                                <div class="mark">My rating: <span class="rating-input"><span data-value="0" class="glyphicon glyphicon-star"></span><span data-value="1" class="glyphicon glyphicon-star"></span><span data-value="2" class="glyphicon glyphicon-star"></span><span data-value="3" class="glyphicon glyphicon-star"></span><span data-value="4" class="glyphicon glyphicon-star-empty"></span><span data-value="5" class="glyphicon glyphicon-star-empty"></span> </span></div>
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.</p>
                                <ins class="ab zmin sprite sprite-i-triangle block"></ins>
                            </div>
                           <div class="person-text rel">
                               <img src="https://media.licdn.com/mpr/mpr/shrink_100_100/AAEAAQAAAAAAAAf_AAAAJGQ4NWEyZmUwLWEyNTgtNDJmMC04OWQ1LWRiZDQwNjRkOTAzMQ.jpg" style="border-radius: 50px;"/>

                               <a title="" href="#">Denim</a>
                               <i>from Glasgow, Scotland</i>
                           </div>
                       </div>
                       <div class="col-md-4 col-sm-6 hidden-xs">
                            <div class="block-text rel zmin">
                                <a title="" href="#">Spedd</a>
                                <div class="mark">My rating: <span class="rating-input"><span data-value="0" class="glyphicon glyphicon-star"></span><span data-value="1" class="glyphicon glyphicon-star"></span><span data-value="2" class="glyphicon glyphicon-star-empty"></span><span data-value="3" class="glyphicon glyphicon-star-empty"></span><span data-value="4" class="glyphicon glyphicon-star-empty"></span><span data-value="5" class="glyphicon glyphicon-star-empty"></span> </span></div>
                               <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.</p>
                                <ins class="ab zmin sprite sprite-i-triangle block"></ins>
                            </div>
                           <div class="person-text rel">
                               <img style="border-radius: 50px;" alt="" src="https://yt3.ggpht.com/-_lPdJSkjvkg/AAAAAAAAAAI/AAAAAAAAAAA/qmSPcvl81E0/s100-c-k-no-rj-c0xffffff/photo.jpg">
                                <a title="" href="#">Spedd</a>
                               <i>United States</i>
                           </div>
                       </div>
                       <div class="col-md-4 col-sm-6 hidden-sm hidden-xs">
                           <div class="block-text rel zmin">
                               <a title="" href="#">Firrll</a>
                               <div class="mark">My rating: <span class="rating-input"><span data-value="0" class="glyphicon glyphicon-star"></span><span data-value="1" class="glyphicon glyphicon-star"></span><span data-value="2" class="glyphicon glyphicon-star"></span><span data-value="3" class="glyphicon glyphicon-star"></span><span data-value="4" class="glyphicon glyphicon-star"></span><span data-value="5" class="glyphicon glyphicon-star"></span> </span></div>
                               <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.</p>
                               <ins class="ab zmin sprite sprite-i-triangle block"></ins>
                           </div>
                           <div class="person-text rel">
                               <img style="height: 100px; border-radius: 50px;" alt="" src="https://pbs.twimg.com/profile_images/555227960026746880/0tqN73Qj_400x400.jpeg">
                               <a title="" href="#">Firrll</a>
                               <i>Indonesia</i>
                           </div>
                       </div>
                    </div>
                    <div class="item">
                        <div class="col-md-4 col-sm-6">
                            <div class="block-text rel zmin">
                                <a title="" href="#">Sheetal</a>
                                <div class="mark">My rating: <span class="rating-input"><span data-value="0" class="glyphicon glyphicon-star"></span><span data-value="1" class="glyphicon glyphicon-star"></span><span data-value="2" class="glyphicon glyphicon-star"></span><span data-value="3" class="glyphicon glyphicon-star"></span><span data-value="4" class="glyphicon glyphicon-star-empty"></span><span data-value="5" class="glyphicon glyphicon-star-empty"></span> </span></div>
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.</p>
                                <ins class="ab zmin sprite sprite-i-triangle block"></ins>
                            </div>
                           <div class="person-text rel">
                           <img style="height: 100px; border-radius: 50px;" src="https://pbs.twimg.com/profile_images/555227960026746880/0tqN73Qj_400x400.jpeg"/>
                               <a title="" href="#">Sheetal</a>
                               <i>from Glasgow, Scotland</i>
                           </div>
                       </div>
                       <div class="col-md-4 col-sm-6 hidden-xs">
                            <div class="block-text rel zmin">
                                <a title="" href="#">Angel</a>
                                <div class="mark">My rating: <span class="rating-input"><span data-value="0" class="glyphicon glyphicon-star"></span><span data-value="1" class="glyphicon glyphicon-star"></span><span data-value="2" class="glyphicon glyphicon-star-empty"></span><span data-value="3" class="glyphicon glyphicon-star-empty"></span><span data-value="4" class="glyphicon glyphicon-star-empty"></span><span data-value="5" class="glyphicon glyphicon-star-empty"></span> </span></div>
                               <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.</p>
                                <ins class="ab zmin sprite sprite-i-triangle block"></ins>
                            </div>
                           <div class="person-text rel">
                               <img style="height: 100px; border-radius: 50px;" src="https://pbs.twimg.com/profile_images/555227960026746880/0tqN73Qj_400x400.jpeg"/>
                                <a title="" href="#">Angel</a>
                               <i>United States</i>
                           </div>
                       </div>
                       <div class="col-md-4 col-sm-6 hidden-sm hidden-xs">
                           <div class="block-text rel zmin">
                               <a title="" href="#">Denim</a>
                               <div class="mark">My rating: <span class="rating-input"><span data-value="0" class="glyphicon glyphicon-star"></span><span data-value="1" class="glyphicon glyphicon-star"></span><span data-value="2" class="glyphicon glyphicon-star"></span><span data-value="3" class="glyphicon glyphicon-star"></span><span data-value="4" class="glyphicon glyphicon-star"></span><span data-value="5" class="glyphicon glyphicon-star"></span> </span></div>
                               <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.</p>
                               <ins class="ab zmin sprite sprite-i-triangle block"></ins>
                           </div>
                           <div class="person-text rel">
                               <img style="height: 100px; border-radius: 50px;" src="https://pbs.twimg.com/profile_images/555227960026746880/0tqN73Qj_400x400.jpeg"/>
                               <a title="" href="#">Denim</a>
                               <i>Indonesia</i>
                           </div>
                       </div>
                    </div>
                </div>
                <a class="left carousel-control" href="#carousel-reviews" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="right carousel-control" href="#carousel-reviews" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>
        </div>
    </div>
</div>
    </div>
    </form>
</body>
</html>

Creating Alert Messages in Bootstrap

Unknown 5:44 AM Bootstrap No comments

Intoduction :-
Hii Friends...
Alert boxes are used quite often to stand out the information that requires immediate attention of the end users such as warning, error or confirmation messages. With Bootstrap you can easily create elegant alert messages box for various purposes. You can also add an optional close button to dismiss any alert.

DEMO:-

Example :-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dotnetmodules</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>Alerts</h2>

<div class="alert alert-success">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
    <strong>Success!</strong> This alert box indicate a successful or positive action.
</div>
<div class="alert alert-info">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
    <strong>Info!</strong> This alert box indicate a neutral informative change or action.
</div>
<div class="alert alert-warning">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
    <strong>Warning!</strong> This alert box indicate a warning that might need attention.
</div>
<div class="alert alert-danger">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
    <strong>Danger!</strong> This alert box indicate a dangerous or potentially negative action.
</div>
</div>

</body>
</html>

Bootstrap Model

Unknown 9:48 AM Bootstrap No comments

Intoduction :-

Hii Friends...

Today I explain how to make a bootstrap model in asp.net . Its not so complicated its easy. here some terms that we use in this code so i explain them.

data-toggle="modal" opens the modal window
data-target="#myModal" points to the id of the modal

HTML & CSS Code

<body>

<div class="container">

<h2> Bootstrap Modal </h2>



<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>



<div class="modal fade" id="myModal" role="dialog">

<div class="modal-dialog">





<div class="modal-content">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal">×</button>

<h4 class="modal-title">This is Header</h4>

</div>

<div class="modal-body">

<p>Welcome on Asp.net Module.</p>

</div>

<div class="modal-footer">

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

</div>

</div>



</div>

</div>



</div>

</body>

Demo:-

How To Create a Carousel In Bootstrap

Unknown 10:28 AM Bootstrap 1 comment

Introduction :-

Hii Friends..

Today I explain how to make a carousel in bootstrap . The class="carousel" specifies that this <div> contains a carousel. The .slide class adds a CSS transition and animation effect, which makes the items slide when showing a new item. Omit this class if you do not want this effect.

Step : 1 The Code goes here :->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Asp.Net Modules</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap.theme.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/custom_HomePage.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="container">
<div class="row">
<div class="col-lg-3">
   </div>
<div class="col-lg-9">

<div id="myslider" class="carousel slide" data-interval="2000">

<ol class="carousel-indicators">
<li data-target="#myslider" data-slide-to="0" class="active"></li>
<li data-target="#myslider" data-slide-to="1"></li>
<li data-target="#myslider" data-slide-to="2"></li>
<li data-target="#myslider" data-slide-to="3"></li>
<li data-target="#myslider" data-slide-to="4"></li>
   </ol>

<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" src="img/slide1.jpg" alt="">
</div>
<div class="item">
<img class="img-responsive" src="img/slide2.jpg" alt="">
</div>
<div class="item">
<img class="img-responsive" src="img/slide3.jpg" alt="">
</div>

<div class="item">
<img class="img-responsive" src="img/slide4.jpg" alt="">
</div>
<div class="item">
<img class="img-responsive" src="img/slide5.jpg" alt="">
</div>
    </div>

<a class="left carousel-control" href="#myslider" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myslider" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
   </div>


<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

</body>

</html>

Here some js and css are already given by bootstrap you can easily download css from (getbootstrap.com) and js from (https://jquery.com/download/) .

DEMO:-

How to make a image responsive in bootstrap

Unknown 11:04 AM Bootstrap No comments

Introduction:-

Hii....Friends,

Today I explain that how to make a image responsive in bootstrap. This is not a complicated case the bootstrap provide only a pre-define class that is "img-responsive_no".

Step:1 The designing code goes here.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="description" content="">

<meta name="author" content="">

<link rel="icon" href="../../favicon.ico">

<title>Asp.Net Modules</title>

<link href="css/bootstrap.min.css" rel="stylesheet">

<link href="css/bootstrap.theme.min.css" rel="stylesheet">

<link href="css/style.css" rel="stylesheet">

<link href="css/custom_HomePage.css" rel="stylesheet">

</head>

<body>

<div class="container">

<div class="row">

<div class="col-sm-6">

<h3>How to use it</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>

<div class="row">

<div class="col-sm-6">

<div class="portfolio-item">

<a href="#">

<img class="img-responsive_no" src="img\second.jpg" alt="">

</a>

</div>

<div class="col-sm-6">

<p>rsus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>

<a href="#" class="btn btn-default ">Download</a>

</div>

<div class="col-sm-6">

<h3>About Me</h3>

<a href="#" class="btn btn-success btn-lg ">Know more about this</a>

</div>

<hr />

</div>

<!-- Bootstrap core JavaScript

================================================== -->

<script src="js/jquery.js"></script>

<script src="js/bootstrap.min.js"></script>

</body>

</html>

Here some js and css are already given by bootstrap you can easily download css from (getbootstrap.com) and js from (https://jquery.com/download/) .

DEMO:-

How to make a nav-bar in bootstrap

Unknown 10:15 AM Bootstrap No comments

Introduction:-

Hi.. Friends,

Today I explain that how to make a nav-bar in bootstrap so i explain this practically.

Step:1 The designing code goes here.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="description" content="">

<meta name="author" content="">

<link rel="icon" href="../../favicon.ico">

<title>Asp.Net Modules</title>

<link href="css/bootstrap.min.css" rel="stylesheet">

<link href="css/bootstrap.theme.min.css" rel="stylesheet">

<link href="css/style.css" rel="stylesheet">

<link href="css/custom_HomePage.css" rel="stylesheet">

</head>

<body>

<div class="navbar navbar-inverse navbar-fixed-top">

<div class="container">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="#">ASP.NET MODULES</a>

<div class="collapse navbar-collapse">

<ul class="nav navbar-nav navbar-right">

<li class="active"><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li class="dropdown">

<a class="dropdown-toggle" data-toggle="dropdown" href="#">

AspModules<span class="caret"></span></a>

<ul class="dropdown-menu">

<li><a href="#"> HTML</a></li>

<li class="divider"></li>

<li><a href="#">CSS</a></li>

<li class="divider"></li>

<li><a href="#">JS</a></li>

</ul>

</li>

</ul>

</div>

<!-- Bootstrap core JavaScript

================================================== -->

<script src="js/jquery.js"></script>

<script src="js/bootstrap.min.js"></script>

</body>

</html>

Here some js and css are already given by bootstrap you can easily download css from (getbootstrap.com) and js from (https://jquery.com/download/) .

DEMO:-

How to use well in bootstrap

Unknown 9:56 AM Bootstrap No comments

Introduction

Hi.. Friends,

Today I explain that how to use wells in bootstrap.The wells class adds a rounded border around an element with a gray background color and some padding.

Step:1 The designing code goes here.

<!DOCTYPE html>

<html lang="en">
<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

</div> 

<hr />

</div>

<!-- Bootstrap core JavaScript

================================================== -->

<script src="js/jquery.js"></script>

<script src="js/bootstrap.min.js"></script>

</body>

</html>

Here some js and css are already given by bootstrap you can easily download css from (getbootstrap.com) and js from (https://jquery.com/download/) .

DEMO:-

Thursday, September 22, 2016

How to make Testimonial Slider

HTML & CSS Code

HTML & CSS Code

Monday, June 20, 2016

Creating Alert Messages in Bootstrap

Friday, February 5, 2016

Bootstrap Model

Intoduction :-

Hii Friends...

Today I explain how to make a bootstrap model in asp.net . Its not so complicated its easy. here some terms that we use in this code so i explain them.

HTML & CSS Code

Saturday, October 10, 2015

How To Create a Carousel In Bootstrap

Wednesday, October 7, 2015

How to make a image responsive in bootstrap

Introduction:-

Tuesday, October 6, 2015

How to make a nav-bar in bootstrap

Introduction:-

How to use well in bootstrap

Introduction

Popular Posts

Blog Archive

About Me