Scribd
Upload
244 views7 pages

Bootstrap - Typography

The document provides code examples for using different Bootstrap components including typography, images, button groups, navbars, carousels, and panels. Specifically, it shows how to use Bootstrap's built-in classes to style headings, add image formatting, create button groups of varying sizes, construct a navigation bar with search functionality, build a image carousel slider, and design a basic panel with heading, body, and footer sections.

Uploaded by

Ragnar Main
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
244 views7 pages

Bootstrap - Typography

The document provides code examples for using different Bootstrap components including typography, images, button groups, navbars, carousels, and panels. Specifically, it shows how to use Bootstrap's built-in classes to style headings, add image formatting, create button groups of varying sizes, construct a navigation bar with search functionality, build a image carousel slider, and design a basic panel with heading, body, and footer sections.

Uploaded by

Ragnar Main
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

1.

Bootstrap - Typography:-      
Code: - 

<!DOCTYPE html>
<html>
<head>
<title>typography</title>
<link href="./css/bootstrap.min.css" rel="stylesheet"
type="text/css">
    <link href="./css/mystyle.css" rel="stylesheet"
type="text/css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jq
uery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/boo
tstrap.min.js"></script>
</head>
<body>
  <div>
    <h1> FrescoPlay </h1>
    <h2> FrescoPlay </h2>
    <h3> FrescoPlay </h3>
    <h4> FrescoPlay </h4>
    <h5> FrescoPlay </h5>
    <h6> FrescoPlay </h6>
  </div>
</body>
</html>

2. BootStrap - Images 
Code: - 

<!DOCTYPE html>
<html>
<head>
<title>Grab it!!!!</title>
<link href="./css/bootstrap.min.css" rel="stylesheet"
type="text/css">
    <link href="./css/mystyle.css" rel="stylesheet"
type="text/css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jq
uery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/boo
tstrap.min.js"></script>
</head>
<body>
  <img class="img-responsive"
src="https://upload.wikimedia.org/wikimedia/commons/8/85/Gf
p-missourl-st-louis-clubhouse-pond-and-scenery.jpg">
  <img class="img-circle"
src="https://upload.wikimedia.org/wikimedia/commons/8/85/Gf
p-missourl-st-louis-clubhouse-pond-and-scenery.jpg">
  <img class="img-thumbnail"
src="https://upload.wikimedia.org/wikimedia/commons/8/85/Gf
p-missourl-st-louis-clubhouse-pond-and-scenery.jpg">
</body>
</html>

3.Bootstrap - Button Groups


Code:-

<!DOCTYPE html>
<html>
<head>
<title>Grab it!!!!</title>
<link href="./css/bootstrap.min.css" rel="stylesheet"
type="text/css">
    <link href="./css/mystyle.css" rel="stylesheet"
type="text/css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jq
uery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/boo
tstrap.min.js"></script>
</head>
<body>
  <div class="btn-group btn-group-lg">
     <button type="button" class="btn btn-default">
Button1</button>
     <button type="button" class="btn btn-default">
Button2</button>
     <button type="button" class="btn btn-default">
Button3</button>
   </div>
   <div class="btn-group btn-group-sm">
     <button type="button" class="btn btn-default">
Button1</button>
     <button type="button" class="btn btn-default">
Button2</button>
     <button type="button" class="btn btn-default">
Button3</button>
   </div>
   <div class="btn-group btn-group-xs">
     <button type="button" class="btn btn-default">
Button1</button>
     <button type="button" class="btn btn-default">
Button2</button>
     <button type="button" class="btn btn-default">
Button3</button>
   </div>
</body>
</html>

4.Bootstrap - Navbar

Code:- 

<!DOCTYPE html>
<html>
<head>
<title>Grab it!!!!</title>
<link href="./css/bootstrap.min.css" rel="stylesheet"
type="text/css">
    <link href="./css/mystyle.css" rel="stylesheet"
type="text/css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jq
uery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/boo
tstrap.min.js"></script>
</head>
<body>
   <nav class="navbar navbar-default">
     <div class="navbar-head">
        <a class="navbar-brand" href="#"> Navbar </a>
     </div>
     <button class="navbar-toggler" data-
toggle="collapse" data-target = "#navbarCollapse">
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse"
id="navbarCollapse">
       <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#"> Home </a> </li>
        <li ><a href="#"> Contact us </a> </li>
        <li ><a href="#"> About us </a> </li>
       </ul>
      </div>
      <form class="navbar-form navbar-right"
role="search">
        <div class="form-group">
          <input type="text" class="form-control"
placeholder = "Search">
        </div>
        <button type="button" class="btn btn-default"
aria-label = "Left Align">
          <span class="glyphicon glyphicon-search"
aria-hidden="true"></span>
        </button>
      </form> 
    </nav>
</body>
</html>

5. Bootstrap - carousel 
Code:- 
<!DOCTYPE html>
<html>
<head>
<title>Grab it!!!!</title>
<link href="./css/bootstrap.min.css" rel="stylesheet"
type="text/css">
    <link href="./css/mystyle.css" rel="stylesheet"
type="text/css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jq
uery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/boo
tstrap.min.js"></script>
</head>
<body>
  <div id = "myCarousel" class = "carousel slide" data-
ride="carousel">

    <ol class="carousel-indicators ">


      <li data-target = "#myCarousel" data-slide-
to="0"  class="active"></li>
      <li data-target = "#myCarousel" data-slide-to="1"
></li>
      <li data-target = "#myCarousel" data-slide-to="2"
></li>
    </ol>

    <div class="carousel-inner">
      
      <div class="item active">
        <img src="https://images-na.ssl-images-
amazon.com/images/M/MV5BMjA3NTEwOTMxMV5BMI5BanXkFtZTgwMjMyO
DgxMzE@._V1_SX1500_CR0,0,1500,999_AL_.jpg" alt = "Los
Angeles" style = "width:100px;"> 
      </div>

      <div class="item ">


        <img src="https://images-na.ssl-images-
amazon.com/images/M/MV5BNDc1MGUyNzltNWRkOC00MjM1LWJjNjMtZTZ
lYWlxMGRmYzVlXkEyXkFqcGdeQXVyMzU3MDEyNjk@._V1_SX1777_CR0,0,
1777,999_AL_.jpg" alt = "Chicago" style = "width:100px;"> 
      </div>
       <div class="item ">
        <img src="https://images-na.ssl-images-
amazon.com/images/M/MV5BMTExMDk1MDE4NzVeQTJeQWpwZ15BbWU5MDM
4NDM0ODAx._V1_SX1500_CR0,0,1500,999_AL_.jpg" alt = "New
York" style = "width:100px;"> 
      </div>

    </div>

    <a class="left carousel-control" href="#myCarousel"


data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left">
</span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel"
data-slide="next">
      <span class="glyphicon glyphicon-chevron-right">
</span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</body>
</html>

6. Bootstrap - Panels
Code:-

<!DOCTYPE html>
<html>
<head>
<title>Grab it!!!!</title>
<link href="./css/bootstrap.min.css" rel="stylesheet"
type="text/css">
    <link href="./css/mystyle.css" rel="stylesheet"
type="text/css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jq
uery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/boo
tstrap.min.js"></script>
</head>
<body>
  <div class="panel panel-default">
    <div class="panel-heading"> Title </div>
    <div class= "panel-body"> FrescoPlay </div>
    <div class="panel-footer"> footer </div>
  </div>
</body>
</html>

You might also like