"Paragraph Show more show less "
Bootstrap 3.3.0 Snippet by imsachin

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700|Roboto:300,400,500,700" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
<link rel="stylesheet" href="./css/font-awesome.min.css">
<link rel="icon" href="./images/favicon.png" type="image/x-icon" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<!--header-->
<header class="mainNav">
<div class="container">
<div class="row">
<div class="col-md-4 col-xs-12">
<!-- Logo -->
<div class="logoBox">
<a class="" href="/">
<img src="/images/logo.png" alt="Image" title="" class="img-responsive">
</a>
<a class="mCall visible-xs" href="tel:0000000000" title="Call"><i class="fa fa-phone" aria-hidden="true"></i> Call </a>
</div>
</div>
<div class="col-md-4 col-xs-12"></div>
<div class="col-md-4 col-xs-12 hidden-xs">
<div class="phone-no">
<small>Call (24 x 7) </small>
<a href="tel:0000000000" title="Call" class="mob mobBlink"> <i class="fa fa-phone-square"></i> 0000000000</a>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
html,body {/*font-family: 'Roboto', sans-serif;*/ font-family: 'Josefin Sans', sans-serif;color:#000;}
ul li{margin:0px;padding:0px;}
/* Common */
.mr0 {margin: 0;}
.pd0 {padding: 0;}
.mrT10 {margin-top: 10px;}
.mrT20 {margin-top: 20px;}
.mrT30 {margin-top: 30px;}
.mrT40 {margin-top: 40px;}
.mrB10 {margin-bottom: 10px;}
.mrB20 {margin-bottom: 20px;}
.mrB30 {margin-bottom: 30px;}
.pT10 {padding-top: 10px;}
.pT20 {padding-top: 20px;}
.pB10 {padding-bottom: 10px;}
.pB20 {padding-bottom: 20px;}
.relative {position: relative;}
.width100 {width: 100%;}
.colorG {color: #21c6b9;}
.colorw{color:#fff;}
.pdr15{padding-right: 15px;}
.pdl15{padding-left: 15px;}
.pdR {padding-right:5px;}
.pdL {padding-left:5px;}
* -- Main Nav -- */
.mainNav { background-color: #ffffff; border-color: #ffffff;margin-bottom: 0;padding-top: 10px;}
.mainNav .logoBox {position: relative;}
.mainNav .logoBox img {height: 59px;width: 200px;}
.mainNav .phone-no {position: relative; float: right;}
.mainNav .phone-no a {font-size: 24px;font-weight: 700;margin-top: 15px;color: #009ade;float: left;}
.mainNav .phone-no a:hover {color: #009ade;text-decoration: none;}
.mainNav .phone-no a i {color: #009ade;}
.mainNav .phone-no small {position: absolute;top: 1px;left: 25px;color: #000;}
.mainNav .navbar-default {background-color: #009ade;background-image: linear-gradient(0deg,#009ade,#009ade,#19ade8,#009ade);border-color: transparent;border-radius: 0;margin-bottom: 0;padding: 8px 0; min-height: auto;}
/* .mainNav .navbar-default .navbar-nav > li:first-child > a {font-size: 28px;padding: 4px 10px;} */
/* .mainNav .navbar-default .navbar-nav > li:first-child > a.active {padding: 8px 14px;color: #fff;text-decoration: none;background-color: #009ade;font-size:16px;} */
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Bootstrap Wizard
Creating password field text hide show via a single class
Show Dropdown Hover & Caret Up

Questions / Comments: