Lists
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com
/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
#left {
background-color: red;
text-align: center;
}
.first-row {
height: 300px;
}
#right {
background-color: yellow;
text-align: right;
}
</style>
</head>
<body>
<div class = “row”>
<div id="left" class="col-md-6 first-row">
<h1>This is the left</h1>
</div>
<div id="right" class="col-md-6 first-row">
<p>This is the right</p>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
</style>
</head>
<body>
<div class = “row”>
<div id="header" class="col-md-12">
</div>
</div>
<div class = “row”>
<div id="ingredients" class="col-md-4">
</div>
<div id="instructions" class="col-md-4">
</div>
<div id="milkshake" class="col-md-4">
</div>
</div>
</body>
</html>Delete the code that is in your Mozilla Thimble file. Copy and paste the following code into your thimble.
Margin and padding read from the top and then clockwise. So the code below would put 5px of space above the paragraph, 10px to the right of the paragraph, 15px below the paragraph, and 20px to the left of the paragraph
p {
margin-top: 10px;
}
p {
margin-right: 10px;
}
p {
margin-bottom: 10px;
}
p {
margin-left: 10px;
}You can make margins individually as well
Different kinds of Borders
#name {
border: solid red 8px;
}
#first {
border-right: groove black 5px;
}
#second {
border-bottom: dotted green 3px;
}
#third {
border-left: dashed blue 7px;
}
#fourth {
border-top: ridge yellow 3px;
}Recipes
Lists
By Delaine Wendling
Lists
Teacher View
