Thursday, 4 August 2016

Bootstrap Modal

Bootstrap Modal 

<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>


output:
Bootstrap Modal
Bootstrap Modal

Posted by at No comments:

Wednesday, 3 August 2016

Bootstrap Alert code

Bootstrap Alert Code 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <title>Bootstrap alert code </title>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  8.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  9.   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  10. </head>
  11. <body>
  12. <div class="container">
  13.   <h2>Bootstrap Alerts </h2>
  14.   <div class="alert alert-success">
  15.     <strong>Success!</strong> This alert box could indicate a successful or positive action.
  16.   </div>
  17.   <div class="alert alert-info">
  18.     <strong>Info!</strong> This alert box could indicate a neutral informative change or action.
  19.   </div>
  20.   <div class="alert alert-warning">
  21.     <strong>Warning!</strong> This alert box could indicate a warning that might need attention.
  22.   </div>
  23.   <div class="alert alert-danger">
  24.     <strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
  25.   </div>
  26. </div>
  27. </body>
  28. </html>
Bootstrap alert code
Bootstrap Alert Code

Posted by at No comments:

Bootstrap Responsive table

Bootstrap Responsive table Code 
<!DOCTYPE html>

 <html lang="en">

 <head>
  <title>Bootstrap  Table Example</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.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

 <body>

 <div class="container">
  <h2>Responsive Table</h2>
 <div class="responsive-table">
  <table class="table">
    <thead>
      <tr class="info">
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr class="success">
        <td>Gaurav</td>
        <td>yadav</td>
        <td>gauravyadav10118@gmail.com</td>
      </tr>
      <tr class="danger">
        <td>Praveen</td>
        <td>Yadav</td>
        <td>Praveenyadav@gmail.com</td>
      </tr>
      <tr class="info">
        <td>Arun </td>
        <td>Yadav</td>
        <td>arunyadav@gmail.com</td>
      </tr>
 <tr class="success">
        <td>Gaurav</td>
        <td>yadav</td>
        <td>gauravyadav10118@gmail.com</td>
      </tr>
      <tr class="danger">
        <td>Praveen</td>
        <td>Yadav</td>
        <td>Praveenyadav@gmail.com</td>
      </tr>
      <tr class="info">
        <td>Arun </td>
        <td>Yadav</td>
        <td>arunyadav@gmail.com</td>
      </tr>
 <tr class="success">
        <td>Gaurav</td>
        <td>yadav</td>
        <td>gauravyadav10118@gmail.com</td>
      </tr>
      <tr class="danger">
        <td>Praveen</td>
        <td>Yadav</td>
        <td>Praveenyadav@gmail.com</td>
      </tr>
      <tr class="info">
        <td>Arun </td>
        <td>Yadav</td>
        <td>arunyadav@gmail.com</td>
      </tr>
 <tr class="success">
        <td>Gaurav</td>
        <td>yadav</td>
        <td>gauravyadav10118@gmail.com</td>
      </tr>
      <tr class="danger">
        <td>Praveen</td>
        <td>Yadav</td>
        <td>Praveenyadav@gmail.com</td>
      </tr>
      <tr class="info">
        <td>Arun </td>
        <td>Yadav</td>
        <td>arunyadav@gmail.com</td>
      </tr><tr class="success">
        <td>Gaurav</td>
        <td>yadav</td>
        <td>gauravyadav10118@gmail.com</td>
      </tr>
      <tr class="danger">
        <td>Praveen</td>
        <td>Yadav</td>
        <td>Praveenyadav@gmail.com</td>
      </tr>
      <tr class="info">
        <td>Arun </td>
        <td>Yadav</td>
        <td>arunyadav@gmail.com</td>
      </tr>
    </tbody>
  </table>
 </div>
</div>

 </body>
</html>

 output:


Posted by at No comments:

Bootstrap Responsive table

Bootstrap Responsive table Code 
<!DOCTYPE html>

 <html lang="en">
<head>
  <title>Bootstrap  Table Example</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.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

 <div class="container">
  <h2>Responsive Table</h2>
 <div class="responsive-table">
  <table class="table">
    <thead>
      <tr class="info">
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr class="success">
        <td>Gaurav</td>
        <td>yadav</td>
        <td>gauravyadav10118@gmail.com</td>
      </tr>
      <tr class="danger">
        <td>Praveen</td>
        <td>Yadav</td>
        <td>Praveenyadav@gmail.com</td>
      </tr>
      <tr class="info">
        <td>Arun </td>
        <td>Yadav</td>
        <td>arunyadav@gmail.com</td>
      </tr>
 <tr class="success">
        <td>Gaurav</td>
        <td>yadav</td>
        <td>gauravyadav10118@gmail.com</td>
      </tr>
      <tr class="danger">
        <td>Praveen</td>
        <td>Yadav</td>
        <td>Praveenyadav@gmail.com</td>
      </tr>
      <tr class="info">
        <td>Arun </td>
        <td>Yadav</td>
        <td>arunyadav@gmail.com</td>
      </tr>
 <tr class="success">
        <td>Gaurav</td>
        <td>yadav</td>
        <td>gauravyadav10118@gmail.com</td>
      </tr>
      <tr class="danger">
        <td>Praveen</td>
        <td>Yadav</td>
        <td>Praveenyadav@gmail.com</td>
      </tr>
      <tr class="info">
        <td>Arun </td>
        <td>Yadav</td>
        <td>arunyadav@gmail.com</td>
      </tr>
 <tr class="success">
        <td>Gaurav</td>
        <td>yadav</td>
        <td>gauravyadav10118@gmail.com</td>
      </tr>
      <tr class="danger">
        <td>Praveen</td>
        <td>Yadav</td>
        <td>Praveenyadav@gmail.com</td>
      </tr>
      <tr class="info">
        <td>Arun </td>
        <td>Yadav</td>
        <td>arunyadav@gmail.com</td>
      </tr><tr class="success">
        <td>Gaurav</td>
        <td>yadav</td>
        <td>gauravyadav10118@gmail.com</td>
      </tr>
      <tr class="danger">
        <td>Praveen</td>
        <td>Yadav</td>
        <td>Praveenyadav@gmail.com</td>
      </tr>
      <tr class="info">
        <td>Arun </td>
        <td>Yadav</td>
        <td>arunyadav@gmail.com</td>
      </tr>
    </tbody>
  </table>
 </div>
</div>

 </body>
</html>

 output:


Posted by at No comments:

Latest Bootstrap 3.3.7 Download

Currently release Bootstrap 3.3.7 with some new classes and new features ..
Free download bootstrap 
Click Here  Free Download Latest Bootstrap File 
Posted by at No comments:

Friday, 29 July 2016

Responsive Design With Bootstrap By: Gaurav Yadav : What is Bootstrap and Basic Structure of Bootstrap...

Responsive Design With Bootstrap By: Gaurav Yadav : What is Bootstrap and Basic Structure of Bootstrap...: Boot s trap is an open source project originally created by Twitter to enable creation of responsive, mobile first web pages. Bootstrap ha...
Posted by at No comments:

Wednesday, 27 July 2016

Bootstrap Basic Classes

Container class :

Use .container for a responsive fixed width container.

Css for container in ---   .container{width:1170px;} 

<div class="container">  ...</div>


Use .container-fluid for a full width container, spanning the entire width of your viewport.

Css for container-fluid in ---  .container-fluid{width:100%;}

<div class="container-fluid">  ...</div>


Basic Structure Code :

How to Use Bootstrap :

STEP 1: Download Bootstrap.zip file 


STEP 2: Link Bootstrap Css    in <head></head>  tag 

<link rel="stylesheet" href="css/bootstrap.css" />
<script src="js/jquery.min.js"  ></script >
<script src="js/bootstrap.min.js"></script>



  1. <!DOCTYPE html><html lang="en">
  2. <!---Start head section --->
  3. <head> 
  4.  <title>Bootstrap Case</title> 
  5.  <meta charset="utf-8"> 
  6. <meta name="viewport" content="width=device-width, initial-scale=1"> 
  7. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

  9. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
  10. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
  11. </head>
  12. <!---End head section --->
  13. <body>  <!---Start Bootstrap Class here section --->

  15. <div class="container"> <!---Container class use here --->

  17. <div class="row">  <!--- Start 1st row class use here --->
  18. <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12   "   style=" min-height: 150px !important;    background: #31961f !important">
  19. <h2 align="center" >Col-3</h2>
  20. </div>
  21. <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12"  style="min-height: 150px !important;    background: red !important">
  22. <h2 align="center" >Col-9</h2>
  23. </div>
  24. </div>  <!--- End 1st row class use here --->

  26. <div class="row">  <!--- Start 2st row class use here --->
  27. <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"  style=" min-height: 400px !important;    background: #ddd !important">
  28. <h2 align="center" >Col-12</h2>
  29. </div>
  30. </div> <!--- End  2st row class use here --->

  32. <div class="row">  <!--- Start 3st row class use here --->
  33. <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12" style=" min-height: 150px !important;    background: #000 !important">
  34. <h2 align="center" >Col-2</h2>
  35. </div>

  37. <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12" style=" min-height: 150px !important;    background: #31961f !important">
  38. <h2 align="center" >Col-2</h2></div>

  40. <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12" style=" min-height: 150px !important;    background: #000 !important">
  41. <h2 align="center" >Col-2</h2>
  42. </div>

  44. <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12" style=" min-height: 150px !important;    background: #31961f !important">
  45. <h2 align="center" >Col-2</h2>
  46. </div>

  48. <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12" style=" min-height: 150px !important;    background: #000 !important"><h2 align="center" >Col-2</h2></div>


  51. <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12" style=" min-height: 150px !important;    background: #31961f !important"><h2 align="center" >Col-2</h2></div>

  53. </div> <!--- End  3st row class use here --->

  55. </div> <!--- End Container class here  --->
  56. <!---End Bootstrap Class here section --->
  57. </body>
  58. </html>


Output :


Posted by at No comments:

Monday, 11 July 2016

What is Bootstrap and Basic Structure of Bootstrap

Bootstrap is an open source project originally created by Twitter to enable creation of responsive, mobile first web pages. Bootstrap has a standard set of classes that allow developers to quickly create applications that scale to devices of all sizes, and incorporate common components such as dialog boxes and validation. Bootstrap has become a defacto standard for web design.

So why should you choose Bootstrap? Here are 6 great reasons:

Reason #1. Easy to get started.

Reason #2. Great grid system.

Reason #3. Base styling for most HTML elements.

Reason #4. Extensive list of components.

Reason #5. Bundled Javascript plugins.

Reason #6. Good documentation.

Basic structure of Bootstrap 

bootstrap/
  ├── css/
  │   ├── bootstrap.css
  │   ├── bootstrap.min.css
  ├── js/
  │   ├── bootstrap.js
  │   ├── bootstrap.min.js
  └── img/
      ├── glyphicons-halflings.png
      └── glyphicons-halflings-white.png

Bootstrap 

  • CSS FOLDER 
    • Bootstrap.css
    • Bootstrap.min.css
    • Bootstrap.theme.css
    • Bootstrap.theme.min.css

  • JS FOLDER
    • Bootstrap.js
    • Bootstrap.min.js
    • Jquery.js
  • Fonts


Posted by at No comments:
Subscribe to: Posts (Atom)