Friday, October 2, 2015

Bootstrap Call to Action snippet free

No comments: Posted by Sibichan at 12:53 AM Labels:

Simple Bootstrap Call to Action snippet that you can use for website by just copy/paste the code.


<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Call to Action</title>
<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="keywords" content="Call to Action,Callouts">
<meta name="description" content="Bootstrap Call to Action free html code">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
.callouts{
background:#6666ff;
padding:10px 0px;
color:#fff
}
</style>
</head>
<body>
<div class="container">
    <div class="row callouts text-center">
        <div class="col-md-12">
            <h2>Want to work with us?</h2>
            <p class="lead">agnis modipsae que voloratati andigen daepeditem quiate re porem aut labor.<br> Laceaque quiae sitiorem rest non restibusaes maio es dem tumquam.</p>
            <a class="btn btn-default btn-lg" href="#">GET IN TOUCH</a>
        </div>
    </div>
</div>
</body>
</html>
Read More

Friday, November 21, 2014

How to enable Responsive Youtube Video Embeds using Bootstrap

No comments: Posted by Sibichan at 8:55 AM Labels:
Adding videos to your responsive website can cause many issues with how the site responds to different screen sizes. iframes are by default a fixed size. By adding bootstrap embeded class,you can make your video responsive.


The first thing that you need is the YouTube iframe embed code, grab that in your video share options from the YouTube site.




 Place the iframe code on your page inside the div tag with class ".embed-responsive embed-responsive-16by9" for 16:9 aspect ratio and ".embed-responsive embed-responsive-4by3" for 4:3 aspect ratio


 <!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe width="560" height="315" src="//www.youtube.com/embed/o9kr9ZhydK0" frameborder="0" allowfullscreen></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe width="560" height="315" src="//www.youtube.com/embed/o9kr9ZhydK0" frameborder="0" allowfullscreen></iframe>
</div>


All done. Now check YouTube video in tablet/mobile device
Read More

Thursday, November 20, 2014

Bootstrap Memeber Login form

1 comment: Posted by Sibichan at 9:40 AM Labels:
Free Memeber Login form using Bootstrap 3 panel

 

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Memeber Login form</title>
<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="keywords" content="Bootstrap Memeber Login,Login,sign in">
<meta name="description" content="Bootstrap Memeber Login">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="col-md-4">
    <div class="panel panel-primary">
        <div class="panel-heading"><h2>Memeber Login</h2></div>
            <div class="panel-body">
            <p class="text-muted">Login with your username and password below:</p>
                <form role="form" class="" accept-charset="UTF-8" action="" method="POST">
                    <div class="form-group">
                    <input type="text" name="admin_username" autofocus="autofocus" required="required" placeholder="Username" class="form-control input-lg">
                    </div>
                    <div class="form-group">
                    <input type="password" value="" name="admin_password" required="required" placeholder="Password" class="form-control input-lg">
                    </div>
                        <div class="form-group">
                        <div class="checkbox">
                        <label>
                        <input type="checkbox" value="1" name="remember"> <span class="text-muted">Remember me on this computer</span>
                        </label>
                        </div>
                        </div>
                    <div class="form-group">
                    <input type="submit" value="Log In" name="login" class="btn btn-primary login-btn">
                    <div class="forgotpassword pull-right">
                    <a class="btn" title="Forgot password" href="">Forgot password?</a>
                    </div>
                </div>
                </form>
            </div>
    </div>
</div>
</body>
</html>
Read More

Create Bootstrap Signup form in Minutes

No comments: Posted by Sibichan at 9:26 AM Labels:
The following html code will create Twitter Bootstrap registration form with name,email and password feilds

 <!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap signup form</title>
<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="keywords" content="Registration form,Bootstrap signup form">
<meta name="description" content="Bootstrap signup form">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="row">
        <form role="form">
            <div class="col-lg-6 well">
                <div class="form-group">
                    <label for="InputName">Enter Name</label>
                    <div class="input-group">
                        <input type="text" class="form-control" name="InputName" id="InputName" placeholder="Enter Name" required>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="InputEmail">Enter Email</label>
                    <div class="input-group">
                        <input type="email" class="form-control" id="InputEmailFirst" name="InputEmail" placeholder="Enter Email" required>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="InputEmail">Confirm Email</label>
                    <div class="input-group">
                        <input type="email" class="form-control" id="InputEmailSecond" name="InputEmail" placeholder="Confirm Email" required>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
                    </div>
                </div>
   
                <div class="form-group">
                    <label for="InputEmail">Password</label>
                    <div class="input-group">
                        <input type="email" class="form-control" id="InputEmailSecond" name="InputEmail" placeholder="Password" required>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
                    </div>
                </div>

                <input type="submit" name="submit" id="submit" value="Submit" class="btn btn-success">&nbsp;
                <input type="submit" name="submit" id="submit" value="Reset" class="btn btn-danger">
            </div>
        </form>
    </div>
</div>
</body>
</html>


Read More

How to change Bootstrap Navbar background color ?

No comments: Posted by Sibichan at 8:41 AM Labels:
You can overwrite most of the bootstrap rules inside your own stylesheet, you don't need to touch the bootstrap.css stylesheet at all. This way when the bootstrap is updated you can just update that right away and all of your changes will remain, and also in this manner you can overwrite the boostrap styles to fit your needs of your site.

You can also use TWBSColor to Generate your own Bootstrap navbar

Here are the main colors and their usage :

    #F8F8F8 : navbar background
    #E7E7E7 : navbar border
    #777 : default color
    #333 : hover color (#5E5E5E for .nav-brand)
    #555 : active color
    #D5D5D5 : active background

I used below css to get a blue color navbar

 .navbar-default {
    background-color: #000000;
    border-color:#000000;
}
.navbar-default .navbar-nav > li > a {
    color: #fff;
}
.navbar-default .navbar-brand {
    color: #fff;
}

Following is full source code

<!DOCTYPE html>
<html lang="en">
<head>
<title>Boostrap Navbar</title>
<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="keywords" content="boostrap Navbar,boostrap menu,boostrap navigation">
<meta name="description" content="boostrap Navbar">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
.navbar-default {
    background-color: #000099;
    border-color:#000099;
}
.navbar-default .navbar-nav > li > a {
    color: #fff;
}
.navbar-default .navbar-brand {
    color: #fff;
}
</style>
</head>
<body>
    <div class="container">

      <!-- Static navbar -->
      <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Site Name</a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">Home</a></li>
              <li><a href="#">About Us</a></li>
              <li><a href="#">Services</a></li>
              <li><a href="#">Contact</a></li>
              </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>

    </div> <!-- /container -->
    </body>
</html>
Read More

Wednesday, November 19, 2014

Web Hosting Pricing table using Bootstrap

No comments: Posted by Sibichan at 8:26 AM Labels: ,
Created webhosting 3 column package using bootstrp 3 panel.

Check the fiddle here


Following is the HTML code

 <!DOCTYPE html>
<html lang="en">
<head>
<title>Boostrap Price Table</title>
<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="keywords" content="boostrap price table">
<meta name="description" content="boostrap price table">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
.price h1{background-color:#eee;padding:10px;margin:0px}
</style>
</head>
<body>
<div class="row text-center">
<div class="col-md-4">
<div class="panel panel-primary">
  <div class="panel-heading"><h2 class="panel-title"><strong>STARTER Plan</strong></h2></div>
<div class="price"><h1>$10.00</h1></div>
  <ul class="list-group">
    <li class="list-group-item">100 MB Web Space</li>
    <li class="list-group-item">1 GB Bandwidth</li>
    <li class="list-group-item">10 Emails</li>
  </ul>
<div class="panel-footer text-center">
<a href="" class="btn btn-primary" role="button">ORDER NOW</a>
</div>
</div>

</div>

<div class="col-md-4">

<div class="panel panel-success">
  <div class="panel-heading"><h2 class="panel-title"><strong>ECONOMY Plan</strong></h2></div>
<div class="price"><h1>$20.00</h1></div>
  <ul class="list-group">
    <li class="list-group-item">1 GB Web Space</li>
    <li class="list-group-item">2 GB Bandwidth</li>
    <li class="list-group-item">15 Emails</li>
  </ul>
<div class="panel-footer text-center">
<a href="" class="btn btn-success" role="button">ORDER NOW</a>
</div>
</div>
</div>

<div class="col-md-4">

<div class="panel panel-danger">
  <div class="panel-heading"><h2 class="panel-title"><strong>ADVANCED Plan</strong></h2></div>
<div class="price"><h1>$30.00</h1></div>
  <ul class="list-group">
    <li class="list-group-item">10 GB Web Space</li>
    <li class="list-group-item">20 GB Bandwidth</li>
    <li class="list-group-item">50 Emails</li>
  </ul>
<div class="panel-footer text-center">
<a href="" class="btn btn-danger" role="button">ORDER NOW</a>
</div>
</div>
</div>

</div>

 </body>
</html>
Read More

Friday, November 14, 2014

What is Bootstrap?

No comments: Posted by Sibichan at 9:03 AM Labels:
Bootstrap is a free collection of HTML, CSS, and JS framework for creating responsive, mobile friendly websites and web applications developed by the team at Twitter.
You can download it from by clicking the below below Download Bootstarp
 Why i like Use Bootstrap?
1.) Responsive web design: Bootstrap's responsive CSS adjusts to Desktops, Tablets, and Mobile phone

 2). Browser support: Bootstrap is supported by all popular browsers like google chrome,mozila firefox,opera internet explorer

3). Easy to get started: With just the knowledge of HTML and CSS anyone can get started with Bootstrap

4). Grid system : Bootstrap is built on responsive 12-column grids, layouts and components. Whether you need a fixed grid or a responsive, its only matter of a few changes. Offsetting & Nesting of columns is also possible in both fixed and fluid width layouts. Another useful set of features are the responsive utility classes using which you can make a certain block of content appear or hide only on devices based on the size of their screen. Very handy when you want to hide some content based on screen size. Adding a class such as .visible-desktop to a element, will make it visible only for desktop users. There are similar classes for tablets and phones

5). Pre styled components such as Dropdowns Button Groups Navigation Bar Breadcrumbs Labels & Badges Alerts Progress Bar and more....
Read More
Subscribe to: Posts (Atom)