Bootstrap

Bootstrap Theme Simply Me

What Is “Simply Me”?

Originally introduced by W3Schools, “Simply Me” is a beginner-friendly Bootstrap theme built using Bootstrap 3. It demonstrates how to create a minimal, personal portfolio site from scratch. The tutorial gradually introduces themes with containers, background styles, centered text, circular images, and simple grid layout blocks Reddit+13W3Schools+13w3bai.com+13.

️ Step-by-Step Overview

1. Initial HTML Setup

Start with a minimal page:

html
<h3>Who Am I?</h3>
<img src="bird.jpg" alt="Bird">
<h3>I'm an adventurer</h3>

2. Adding Bootstrap and Container

Include Bootstrap CDN (v3.3.x) and wrap content:

html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="container-fluid">
<h3>Who Am I?</h3>
<img src="bird.jpg" alt="Bird">
<h3>I'm an adventurer</h3>
</div>

This ensures responsive behavior automatically Reddit+2W3Schools+2Bootstrap+2w3bai.com.

3. Custom Background Colors & Centered Text

Add CSS classes like .bg-1, .bg-2, .bg-3 for colored sections and .text-center for centering text:

css
.bg-1 { background-color: #1abc9c; color: #fff; }
.bg-2 { background-color: #474e5d; color: #fff; }
.bg-3 { background-color: #fff; color: #555; }

4. Circular & Responsive Images

Use img-circle for rounding and img-responsive for responsive images that adapt to screen width W3Schools.

5. Grid Section

Create a three-column layout for the last section using:

html
<div class="row">
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
</div>

6. Navbar and Footer

Add a collapsible navbar and a styled footer with social links or credits. CSS enhancements like spacing, hover color effects, and fonts (e.g., Google Fonts Montserrat) give the theme a polished look DEV Community+2W3Schools+2Reddit+2W3Schools.

✅ Why “Simply Me” Is Useful

  • Ideal for beginners: Step-by-step build from nothing to complete responsive page.

  • Hands-on learning: Covers Bootstrap layout, styling, navigation, and components.

  • Highly customizable: Colors, fonts, images, and sections easily modified.

Complete “Simply Me” Structure

Here’s a simplified structure outline:

html
<head>
<!-- Bootstrap CSS & Google Fonts -->
</head>
<body>
<nav>…</nav>

<div class="container-fluid bg-1 text-center">
<h3>Who Am I?</h3>
<img class="img-circle img-responsive" src="bird.jpg">
<h3>I’m an adventurer</h3>
</div>

<div class="container-fluid bg-2 text-center">
<h3>What Am I?</h3>
<p>...</p>
<a class="btn btn-default btn-lg">Search</a>
</div>

<div class="container-fluid bg-3 text-center">
<h3>Where To Find Me?</h3>
<div class="row">
<div class="col-sm-4"><img src="birds1.jpg"><p>…</p></div>
<div class="col-sm-4"><img src="birds2.jpg"><p>…</p></div>
<div class="col-sm-4"><img src="birds3.jpg"><p>…</p></div>
</div>
</div>

<footer class="container-fluid bg-4 text-center">
<p>Made By <a href="#">YourName</a></p>
</footer>
</body>

This is based on the full tutorial and demo available from W3Schools W3Schools+1bakolscript.github.io+1.

Where to Go from Here?

  • Use Bootstrap 4 or 5 to modernize the theme with updated components and layout classes.

  • Add your own sections: portfolio, testimonials, blog posts, contact form.

  • Swap static images with your personal photos and icons.

  • Optimize for SEO and speed.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *