Boostrap 3
by DiegoTc
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<h3>Connecting a Push Button to BeagleBone Black</h3>
<img src="https://learn.adafruit.com/system/guides/images/000/000/339/medium310/overview_web.jpg" alt="Sample Image">
<div class="caption">
<p>In this tutorial, you will learn how to connect a push button switch to a BeagleBone Black and have it display a message when the button is pressed.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<h3>Controlling a Servo with a BeagleBone Black</h3>
<img src="https://learn.adafruit.com/system/guides/images/000/000/329/medium310/BeagleBone_Black_Large.jpg" alt="Sample Image">
<div class="caption">
<p>In this tutorial, you will learn how to control a servo from Python using a BeagleBone Black (BBB). A Python test program will allow you to set the angle of the servo between 0 and 180 degrees.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<h3>Introduction to the BeagleBone Black Device Tree</h3>
<img src="https://learn.adafruit.com/system/guides/images/000/000/324/medium310/project_big_servo_web.jpg?" alt="Sample Image">
<div class="caption">
<p>The BeagleBone...
CSS
.thumbnail img{
width: 180px;
height: 120px;
}
.thumbnail{
width: 380px;
height: 380px;
}
.thumbnail h3{
height: 100px;
}