Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web Design Course - Lecture 21 - Bootstrap Jumbotron, Thumbnails, Alerts, Progress Bar, List Group, Modal

Web Design Course - Lecture 21 - Bootstrap Jumbotron, Thumbnails, Alerts, Progress Bar, List Group, Modal

  • Login to see the comments

  • Be the first to like this

Web Design Course - Lecture 21 - Bootstrap Jumbotron, Thumbnails, Alerts, Progress Bar, List Group, Modal

  1. 1. WEB DESIGN
  2. 2. BOOTSTRAP Jumbotron1 2 Thumbnails2 Alerts3 2 Progress Bar4 2 List Group5 2 Modal6 2
  3. 3. Jumbotron <div class="jumbotron"> <h1>Hello, world!</h1> <p>...</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> </div>
  4. 4. Thumbnails <div class="row"> <div class="col-xs-6 col-md-3"> <a href="#" class="thumbnail"> <img src="..." alt="..."> </a> </div> ... </div>
  5. 5. Alerts <div class="alert alert-success" role="alert">...</div> <div class="alert alert-info" role="alert">...</div> <div class="alert alert-warning" role="alert">...</div> <div class="alert alert-danger" role="alert">...</div> <div class="alert alert-warning alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria- hidden="true">&times;</span></button> <strong>Warning!</strong> Better check yourself, you're not looking too good. </div>
  6. 6. Progress Bar <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 60% </div> </div> .progress-bar-success .progress-bar-info .progress-bar-warning .progress-bar-danger .progress-bar-striped
  7. 7. List Group <ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul>
  8. 8. Modal
  9. 9. THANK YOU

×