"user-interface"
Bootstrap 3.3.0 Snippet by debjit

Post to Facebook Tweet this

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!----------------------LOCAL BOOTSTRAP FOLDER---------------------> <link rel="stylesheet" href="bootstrap/css/w3.css"> <!----------------- Optional Bootstrap theme -------> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <title>PSAU- CVM</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="description" content=""> <meta name="author" content=""> </head> <html> <body> <div class="container-fluid" style="background-color:#125477"> </div> <div class="container-fluid"> <div class="container"> <h2 style="color:green;font-family:Angsana New;text-align:center;">COLLEGE OF VETERINARY MEDICINE</h2> </div> <div class="container" style="height:300;"> <div class="panel-footer" id="foundationbanner"> <button type="button" class="btn btn-success btn-lg pull-right" style="position:bottom;margin-top:0;"> <i class="fa fa-dollar fa-lg"></i> Donate Now</button> <br> <a href=""> <img src="https://image.freepik.com/free-vector/people-avatars_23-2147501881.jpg" class="img-thumbnail hidden-xs" height="280" width="200" style="margin-top:130;"> </a> </div> </div> <br> <div class="container"> <div class="panel-footer"> <ol class="breadcrumb pull-right"> <li><a href="Cvm-home.html" data-toggle="tooltip" data-placement="top"title="Home"> Home </a></li> <li><a href="Cvm-admission.html#">Admission</a></li> <li><a href="Cvm-alumni.html">Alumni</a></li> <li><a href="Cvm-history.html" data-toggle="tooltip" data-placement="top"title="Know about the history ofcvm and milestone">History</a></li> <li><a href="Cvm-V&M.html">V & M</a></li> <li><a href="Cvm-facilities.html">Facilities</a></li> <li><a href="Cvm-faculty.html">Faculty</a></li> <li><a href="Cvm-students.html">Students</a></li> <li><a href="Cvm-library.html">Library</a></li> <li><a href="Cvm-brotherhood.html" data-toggle="tooltip" data-placement="top"title="learn more about CVM Brotherhood VKV/VSAS">Brotherhood</a></li> <li><a href="Cvm-mystatus.html">My Status</a></li> </ol> </div> </div> <br> <div class="container"> <div class="row"> <div class="col-lg-3 hidden-sm hidden-xs"> <div class="panel-footer" style="height:330;"> <br> <ul class="w3-ul"> <li class="w3-hover-red">Home</li> <li class="w3-hover-red">Profile</li> <li class="w3-hover-red">Activities</li> <li class="w3-hover-red">Topic one</li> <li class="w3-hover-red">Topic two</li> <li class="w3-hover-red">Topic three</li> <li class="w3-hover-red">more Link here</li> <li class="w3-hover-red">more Link here</li> <li class="w3-hover-red">more Link here</li> </ul> </div> <div class="panel-footer"> <a class="twitter-timeline" href="https://twitter.com/Jhean_Yhu" data-widget-id="731156277431140352">Tweets by @Jhean_Yhu</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </div> </div> <div class="col-lg-9"> <div class="panel-footer" style="height:1000px;max-width:1000px;"> <h5 class="text-info"><b> LIVE UPDATES </b></h5> <div class="tabbable-panel"> <div class="tabbable-line"> <ul class="nav nav-tabs "> <li class="active"> <a href="#tab_default_1" data-toggle="tab"> News</a> </li> <li> <a href="#tab_default_2" data-toggle="tab"> Activities </a> </li> <li> <a href="#tab_default_3" data-toggle="tab"> History </a> </li> <li> <a href="#tab_default_4" data-toggle="tab"> Videos </a> </li> <li> <a href="#tab_default_5" data-toggle="tab"> Pictures </a> </li> <li> <a href="#tab_default_6" data-toggle="tab"> Help </a> </li> <li> <a href="#tab_default_7" data-toggle="tab"> CVM-Partners </a> </li> <li> <a href="#tab_default_7" data-toggle="tab"> Community </a> </li> <li> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">Post New</button> <!-- Modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Write new news feed</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btnbtn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab_default_1" active> <h1>ENTER TITLE CONTENT HERE</h1> <p>Enter your images / paragraphhs here </p> </div> <div class="tab-pane" id="tab_default_2"> <h1>ENTER TITLE CONTENT HERE</h1> <p>Enter your images / paragraphhs here </p> </div> <div class="tab-pane" id="tab_default_3"> <h1>ENTER TITLE CONTENT HERE</h1> <p>Enter your images / paragraphhs here </p> </div> <div class="tab-pane" id="tab_default_4"> <h1>ENTER TITLE CONTENT HERE</h1> <p>Enter your images / paragraphhs here </p> </div> <div class="tab-pane" id="tab_default_5"> <h1>ENTER TITLE CONTENT HERE</h1> <p>Enter your images / paragraphhs here </p> </div> <div class="tab-pane" id="tab_default_6"> <h1>ENTER TITLE CONTENT HERE</h1> <p>Enter your images / paragraphhs here </p> </div> <div class="tab-pane" id="tab_default_7"> <h1>ENTER TITLE CONTENT HERE</h1> <p>Enter your images / paragraphhs here </p> </div> </div> </div> </div> </div> </div> </div> </div> <br> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="row"> <div class="col-lg-6"> <div class="panel-footer"> <h3 style="font-family:AR BONNIE;text-align:center;"> Our foundation Ambassadors. </h3> <div class="row"> <div class="col-lg-4"> <center><img src="https://image.freepik.com/free-vector/people-avatars_23-2147501881.jpg" class="img-circle" alt="Cinque Terre" width="139" height="139"> <a href="https://twitter.com/Jhean_Yhu"> <p>John Yumang</p> </a> <h5>John Niro Yumang</h5> <p class="text-muted">President</p> </center> </div> <div class="col-lg-4"> <center><img src="https://image.freepik.com/free-vector/people-avatars_23-2147501881.jpg" class="img-circle" alt="Cinque Terre" width="139" height="139"> <a href="https://twitter.com/Jhean_Yhu"> <p>John Yumang</p> </a> <h5>John Niro Yumang</h5> <p class="text-muted">Ambassador to youth</p> </center> </div> <div class="col-lg-4"> <center><img src="https://image.freepik.com/free-vector/people-avatars_23-2147501881.jpg" class="img-circle" alt="Cinque Terre" width="139" height="139"> <a href="https://twitter.com/Jhean_Yhu"> <p>John Yumang</p> </a> <h5>John Niro Yumang</h5> <p class="text-muted">Ambassador Internationa</p> </center> </div> </div> </div> </div> <div class="col-lg-6"> <div class="panel-footer"> <h3 style="font-family:AR BONNIE;text-align:center;height:140;"> VISIT US TODAY. </h3> <script src='https://image.freepik.com/free-vector/people-avatars_23-2147501881.jpg'></script><div style='overflow:hidden;height:150px;width:350px;'><div id='gmap_canvas' style='height:190px;width:350px;'></div><div><small><a href="http://embedgooglemaps.com"> embed google maps </a></small></div><div><small><a href="http://www.autohuren.world/locaties/ibiza/">auto huren ibiza</a></small></div><style>#gmap_canvas img{max-width:none!important;background:none!important}</style></div><script type='text/javascript'>function init_map(){var myOptions = {zoom:10,center:new google.maps.LatLng(51.58250734077006,0.2883488777343901),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(51.58250734077006,0.2883488777343901)});infowindow = new google.maps.InfoWindow({content:'<strong>Jean Yu</strong><br>London, United Kingdom<br>'});google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);</script> </div> </div> </div> </div> </div> </div> <br> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="panel-footer"> <div class="row"> <div class="col-lg-2"> <ul class="list-unstyled"> <li><h4 class="text-primary">PRODUCT</h4><li> <li><a href="#" id="footercompanyinfo">Cloud</a></li> <li><a href="#" id="footercompanyinfo">Online store</a></li> <li><a href="#" id="footercompanyinfo">Musicjam</a></li> <li><a href="#" id="footercompanyinfo">Videojam</a></li> <li><a href="#" id="footercompanyinfo">Storypad</a></li> <li><a href="#" id="footercompanyinfo">WorldJob</a></li> <li><a href="#" id="footercompanyinfo">Chatroom</a></li> <li><a href="#" id="footercompanyinfo">Community</a></li> <li><a href="#" id="footercompanyinfo">Games</a></li> </ul> </div> <div class="col-lg-2"> <ul class="list-unstyled"> <li><h4 class="text-primary">TOOLS</h4><li> <li><a href="#" id="footercompanyinfo">Console</a></li> <li><a href="#" id="footercompanyinfo">Open Graph Debugger</a></li> <li><a href="#" id="footercompanyinfo">JavaScript Console</a></li> <li><a href="#" id="footercompanyinfo">Cloud Analytics</a></li> </ul> <ul class="list-unstyled"> <li><h4 class="text-primary">SUPPORT</h4><li> <li><a href="#" id="footercompanyinfo">Platform Status</a></li> <li><a href="#" id="footercompanyinfo">Developers Group</a></li> <li><a href="#" id="footercompanyinfo">Marketing Partners</a></li> <li><a href="#" id="footercompanyinfo">Bugs</a></li> </ul> </div> <div class="col-lg-2"> <ul class="list-unstyled"> <li><h4 class="text-primary">RESOURCES</h4><li> <li><a href="#" id="footercompanyinfo">Documentation</a></li> <li><a href="#" id="footercompanyinfo">Forum</a></li> <li><a href="#" id="footercompanyinfo">Blogs</a></li> <li><a href="#" id="footercompanyinfo">W3School</a></li> <li><a href="#" id="footercompanyinfo">StackOverflow</a></li> <li><a href="#" id="footercompanyinfo">Bootstrap 3.3.6</a></li> <li><a href="#" id="footercompanyinfo">Bootsnip</a></li> <li><a href="#" id="footercompanyinfo">Oracle java</a></li> <li><a href="#" id="footercompanyinfo">Php 5</a></li> <li><a href="#" id="footercompanyinfo">Free Lance Programmer</a></li> </ul> </div> <div class="col-lg-2"> <ul class="list-unstyled"> <li><h4 class="text-primary">NEWS</h4><li> <li><a href="#" id="footercompanyinfo">Blog</a></li> <li><a href="#" id="footercompanyinfo">Roadmap</a></li> <li><a href="#" id="footercompanyinfo">Case Studies</a></li> <li><a href="#" id="footercompanyinfo">Community</a></li> </ul> </div> <div class="col-lg-2"> <ul class="list-unstyled"> <li><h4 class="text-danger">GET INSTALLS</h4><li> </ul> </div> </div> </div> </div> </div> </div> <br><br><br> </div> </html> <style> body {background-color:lightgray;} #footercompanyinfo {color:gray;font-size:12px;} #foundationbanner {background-color;white; background-image: url("http://www.planwallpaper.com/static/images/494303a2cb59b5103ed095867f3d5dbd.jpg"); background-repeat:no-repeat; background-attachment:center; background-position:right; background-size:100%,100%;

Related: See More

Light Bootstrap Dashboard Angular
Instagram Style User Online
My User Login Page
Bootstrap 4 User Rating Form / Comment Form

Questions / Comments: