Bootstrap About Me Page

Ganttproject free download

  1. Bootstrap Page Layout
  2. Bootstrap Page Examples
  3. Bootstrap Page Footer

Create a Theme: 'Simply Me'

Find the Bootstrap aboutus that best fits your project. The best free aboutus snippets available. Design elements using Bootstrap, javascript, css, and html. MyResume is a creative resume and portfolio Bootstrap template. It's best suited for digital professionals, designers, programmers, photographers, freelancers any other who wants to.

This page will show you how to build a Bootstrap theme from scratch.

We will start with a simple HTML page, and then add more and more components, until we have a fully functional, personal and responsive website.

The result will look like this, and you are free to modify, save, share, use or do whatever you want with it:

HTML Start Page

We will start with the following HTML page:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Theme Simply Me</title>
<meta charset='utf-8'>
<meta name='viewport'>
</head>
<body>
<h3>Who Am I?</h3>
<img src='bird.jpg' alt='Bird'>
<h3>I'm an adventurer</h3>
</body>
</html>

Add Bootstrap CDN and Put Elements in Container

Add Bootstrap CDN and a link to jQuery and put HTML elements inside a container:

Example

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Theme Simply Me</title>
<meta charset='utf-8'>
<meta name='viewport'>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js'></script>
</head>
<body>
<div>
<h3>Who Am I?</h3>
<img src='bird.jpg' alt='Bird'>
<h3>I'm an adventurer</h3>
</div>
</body>
</html>

Result:

Try it Yourself »

Add Background Color and Center Text

1. Add a custom class (.bg-1) to the container to add a background color.

2. Add the .text-center class to center the text inside the container:

Example

<head>
<style>
.bg-1 {
background-color: #1abc9c; /* Green */
color: #ffffff;
}
</style>
</head>
<body>
<div>
<h3>Who Am I?</h3>
<img src='bird.jpg' alt='Bird'>
<h3>I'm an adventurer</h3>
</div>
</body>

Result:

Try it Yourself »

Circle Image

Shape the image to a circle with the .img-circle class:

Example

<img src='bird.jpg' alt='Bird'>

Result:

Bootstrap Page Layout

Try it Yourself »

More Content

Add more content and put it inside new containers:

Example

<head>
<style>
.bg-1 {
background-color: #1abc9c; /* Green */
color: #ffffff;
}
.bg-2 {
background-color: #474e5d; /* Dark Blue */
color: #ffffff;
}
.bg-3 {
background-color: #ffffff; /* White */
color: #555555;
}
</style>
</head>
<body>
<div>
<h3>Who Am I?</h3>
<img src='bird.jpg' alt='Bird'>
<h3>I'm an adventurer</h3>
</div>
<div>
<h3>What Am I?</h3>
<p>Lorem ipsum.</p>
</div>
<div>
<h3>Where To Find Me?</h3>
<p>Lorem ipsum.</p>
</div>
</body>
Bootstrap

Result:

What Am I?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Where To Find Me?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Try it Yourself »

Add Padding

Lets make the containers look good by adding some padding:

Example

About
<style>
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
</style>

Result:

What Am I?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Where To Find Me?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Try it Yourself »

Add a Button

Add a button to the mid container:

Example

<div>
<h3>What Am I?</h3>
<p>Lorem ipsum.</p>
<a href='#'>Search</a>
</div>

Result:

What Am I?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

SearchTry it Yourself »

Add an Icon

Add a Search icon on the 'Search' button:

Example

<a href='#'>
<span></span> Search
</a>

Result:

Try it Yourself »

Modify The Third Container (Add Grid)

Add three columns of equal width inside the third container (.col-sm-4):

Example

<div>
<h3>Where To Find Me?</h3>
<div>
<div>
<p>Lorem ipsum.</p>
<img src='birds1.jpg' alt='Image'>
</div>
<div>
<p>Lorem ipsum.</p>
<img src='birds2.jpg' alt='Image'>
</div>
<div>
<p>Lorem ipsum.</p>
<img src='birds3.jpg' alt='Image'>
</div>
</div>
</div>

Result:

Where To Find Me?

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Try it Yourself »

Make The Images Responsive

Add the .img-responsive class to all images.

Add display:inline to the first image to force it to be centered (the .img-responsive class adds display:block to the image, which makes it jump to the left of the screen).

If you want the image to span the entire width of the screen when it starts to stack, add width:100% to the image.

When opening the example, remember to resize the screen to see the responsive effect:

Example

<!-- The circular bird -->
<img src='bird.jpg' alt='Bird'>
<!-- The birds in our grid: -->
<img src='birds1.jpg' alt='Image'>
<img src='birds2.jpg' alt='Image'>
<img src='birds3.jpg' alt='Image'>
Try it Yourself »

Add a Navbar

Bootstrap Page Examples

Add a standard navigation bar at the top of the page with and make it collapsible on smaller screens:

Example

<nav>
<div>
<div>
<button type='button'>
<span></span>
<span></span>
<span></span>
</button>
<a href='#'>Me</a>
</div>
<div>
<ul>
<li><a href='#'>WHO</a></li>
<li><a href='#'>WHAT</a></li>
<li><a href='#'>WHERE</a></li>
</ul>
</div>
</div>
</nav>

Result:

Try it Yourself »

Style The Navbar

Use CSS to customize the navigation bar:

Example

.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
}
.navbar-nav li a:hover {
color: #1abc9c !important;
}

Result:

Try it Yourself »

Add a Footer

Add a footer and use CSS to style it:

Example

<style>
.bg-4 {
background-color: #2f2f2f;
color: #ffffff;
}
</style>
<footer>
<p>Bootstrap Theme Made By <a href='https://www.w3schools.com'>www.w3schools.com</a></p>
</footer>

Result:

Try it Yourself »

Final Touch

Personalize your Theme by adding a font that you like. We have used 'Montserrat' from Google's Font Library.

Link to the font in the <head> section:

<link href='https://fonts.googleapis.com/css?family=Montserrat'>

Then you can use it in the page:

Example

body {
font: 20px 'Montserrat', sans-serif;
line-height: 1.8;
color: #f5f6f7;
}
p {font-size: 16px;}

We have also created a 'helper' margin class to add extra space where we think it's needed; usually after each <h3> and <img> element.

Example

Try it Yourself »

Complete 'Simply Me' Theme