What is Bootstrap?
Bootstrap is the most popular front-end framework for building responsive, mobile-first apps.
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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
<!doctype html> <html lang="en"> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Responsive Page</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> </head> <body class="homepage"> <header id="header"> <nav class="navbar navbar-inverse" role="banner"> <div class="container"> <div class="navbar-header"> <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> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div style="font-size:25px; color:white; padding:5px">Company Name</div> </div> <div class="collapse navbar-collapse navbar-right"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li ><a href="#">Link 1</a></li> <li ><a href="#">Link 2</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <i class="fa fa-angle-down"></i></a> <ul class="dropdown-menu"> <li><a href="#">Dropdown 1</a></li> <li><a href="#">Dropdown 2</a></li> <li><a href="#">Dropdown 3</a></li> <li><a href="#">Dropdown 4</a></li> </ul> </li> <li ><a href="#">Link 4</a></li> <li ><a href="#">Link 5</a></li> <li ><a href="#">Link 6</a></li> </ul> </div> </div> </nav> </header> <section id="blog"> <div class="container"> <div class="blog"> <div class="row"> <div class="col-md-8"> <h2>At vero eos et accusam et justo</h2> <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p> </div> <aside class="col-md-4"> <h2>At vero eos</h2> <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p> </aside> </div> </div> </div> </section> <section id="bottom"> <div class="container"> <div class="row"> <div class="col-md-5 col-sm-5"> <h3>Company Name</h3> </div> <div class="col-md-7 col-sm-7"> <div class="row"> <div class="col-md-4 col-sm-4"> <div class="widget"> <h3>Bottom Menu 1</h3> <ul> <li><a href="#">Option 1</a></li> <li><a href="#">Option 2</a></li> <li><a href="#">Option 3</a></li> <li><a href="#">Option 4</a></li> <li><a href="#">Option 5</a></li> </ul> </div> </div> <div class="col-md-4 col-sm-4"> <div class="widget"> <h3>Bottom Menu 2</h3> <ul> <li><a href="#">Option 1</a></li> <li><a href="#">Option 2</a></li> <li><a href="#">Option 3</a></li> <li><a href="#">Option 4</a></li> <li><a href="#">Option 5</a></li> <li><a href="#">Option 6</a></li> <li><a href="#">Option 7</a></li> <li><a href="#">Option 8</a></li> </ul> </div> </div> <div class="col-md-4 col-sm-4"> <div class="widget"> <h3>Bottom Menu 3</h3> <ul> <li><a href="#">Option 1</a></li> <li><a href="#">Option 2</a></li> <li><a href="#">Option 3</a></li> </ul> <br /> <h3>Bottom Menu 4</h3> <ul> <li><a href="#">Option 1</a></li> <li><a href="#">Option 2</a></li> </ul> </div> </div> </div> </div> </div> </div> </section> <footer id="footer"> <div class="container"> <div class="row"> <div class="col-sm-12"> © <a target="_blank" href="" title="tile">Copyright </div> </div> </div> </footer> </body> </html> |