Category Archives: formatting

Bootstrap: simple example

Posted on by
1

useful online CSS formatter here.

Here for the code:

main.css:

.section-content {
 margin: 10px;
 padding: 1px;
 background-color: maroon;
}
.section-title {
 font-weight: bold;
 padding: 10px;
 background-color: blue;
 color: antiquewhite
}
.section-text {
 padding: 10px;
 background-color: hotpink;
}
.center {
 text-align: center
}
#footer {
 text-align: center;
 font-family: Georgia, 'Times New Roman', Times, serif;
 font-size: xx-small;
 color: crimson
}

index.html:

<!doctype html>
<html>

<head>
    <title>Simple example with Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    		<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" media="screen"></link>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    		<link rel="stylesheet" href="css\main.css">
</head>

<body>
<div class="container">
<h1>The stream to Oakley</h1>
<div class="row">
<div id="banner" class="span12">
<div class="center">
                    <img src="images/WalkToOakley.jpg" height="200" border="5" /></div>
</div>
</div>
<div class="row">
<div id="main-content" class="span8">
<ul>
	<li>Took about 3 hours</li>
	<li>From a photo I took during a walk</li>
	<li>I invented the stream and therefore its vanishing point</li>
</ul>
<hr/>
<div class="span4">
<div class="section-title">The text belonging to section-title - parent</div>
<div class="section-text">Acrylic is one medium</div>
<div class="section-content">
<div class="section-title">The text belonging to section-title - child</div>
<div class="section-text">Oil is another</div>
</div>
<div class="section-content">
<div class="section-title">The text belonging to section-title - child</div>
<div class="section-text">And you might use pencil, but it wouldn't have the impact</div>
</div>
</div>
</div>
<div class="row">
<div id="footer" class="span12"> &copy; Lucius Verenus</div>
</div>
</div>
</body>

</html>



The editor I used is Visual Studio Code, as usual for me and HTML.


The art is from my painting on my Flickr site here.