I’m using my own site, Imageandaspect.com, as an example:

Bootstrap Navigation

I’m using the default bootstrap navigation code found here

<nav class=”navbar navbar-default navbar-custom navbar-fixed-top”>
<div class=”container-fluid”>

The Brand and toggle items get grouped together here for better mobile display:
<div class=”navbar-header page-scroll”>

<button class=”navbar-toggle” type=”button” data-target=”#bs-example-navbar-collapse-1″ data-toggle=”collapse”>

My “hamburger menu” will be a rectangle that displays the word “Menu”:
span class=”sr-only”>Toggle navigation/span>Menu/button>

Here’s where I add my brand, Imageandaspect, to the upper left of the navigation bar:
a class=”navbar-brand” href=”index.html”>IMAGEANDASPECT/a>/div>

Now, collect the nav links, forms, and other content for collapsing/toggling:

div id=”bs-example-navbar-collapse-1” class=”collapse navbar-collapse”>

Add the navigation links to an un-ordered list:

<ul class=”nav navbar-nav navbar-right”>
<li><a href=”philosophy.html”>Philosophy</a></li>
<li><a href=”concierge.html”>Personal Services</a></li>
<li><a href=”products.html”>Products</a> </li>
<li><a href=”gallery.html”>Gallery</a></li>
<li><a href=”blog.html”>Blog</a> </li>
<li><a href=”contact.html”>Contact</a></li>
</ul>

Notice that the data-target “#bs-example-navbar-collapse-1 and the div id=”bs-example-navbar-collapse-1 must be exactly the same name. You can change the default name, but it must match in both places or the collapsed menu will not open.

The CSS:

I’m using Bootstrap 3 and the bootstrap CSS available here: https://getbootstrap.com/docs/3.3/css/

Customization:

Make customizations in your own CSS document. Not a good idea to change the Bootstrap CSS.

To change the text color to Aqua:

.navbar-custom .navbar-header .navbar-toggle {
color: #57BBBF;
font-weight: normal;
font-size: .4em;
}

NAVBAR BRAND TEXT SIZE AND COLOR CUSTOMIZATION:

.navbar-custom .navbar-brand {
font-weight: normal;
font-size: 1.em;
color: #FFF;
}

Makes nav bar transparent on bigger screens, displaying white nav links:

.navbar-default {
background-color: transparent;
color: #FFFFFF;
}

Use a media query to remove the transparent background and change it to a color for easier viewing on smaller screens:

@media screen and (max-width:1024px) {

.nav li a {
color: #57BBBF;
background-color: #002633 !important;
}

}

Make sure to add the bootstrap scripts jquery.min.js and bootstrap.js to make the collapsed toggle nav work correctly. I add it right before the closing body tag, for faster page loading.

(See my website: Imageandaspect.com as an example of how the navigation displays differently on different sized devices)

Questions?

[email protected]

My Contact Page

Other articles you might like:

-Using images: Tips to improve your SEO rankings

-6 Tips to Make Your Blog Post SEO Friendly

-Use a customer thank-you page to avoid missed opportunities

 

About the author

I developed Image and Aspect because I believe that professionals need to have an impactful web presence. One that showcases their unique talents, skills, and abilities as well as their values and style. A presence that focuses on social engagement and connection.

I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.

I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.

I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.

‘Tips and Snips’ is my blog, and it’s full of information and inspiration to help transform any online persona from “meh” to AMAZING! Sign-up HERE to get blog posts right to your in-box every Friday! I write about Design, Marketing, Search Engine Optimization, Branding, Vlogging, Color Theory, HTML5, CSS3, Bootstrap, WordPress, Social Media…anything you’d want to know to get yourself noticed online.

Visit Image and Aspect to learn more about your web presence options

Diane M. Metcalf, M.S.

2. Download and save the bootstrap stylesheet- bootstrap.min.css -to your root directory.

3. Use CSS to make it circular and add other styling:

• Create a class name that makes sense to you and add that class to the image as well.
• Add some additional css to style it (border, margin, width, height). You can make the image more or less transparent, by using the “opacity” property and changing its’ value. See below-

.yourclassname {
border: 10px solid transparent;
margin-bottom: 25px;
width: 80%;
height: 80%;
opacity: 0.7;
}

4. Using the same class, add other styling, for exampe, make a light gray border appear when the image is hovered.

.yourclassname:hover {
border-color: #f1f1f1;
}

n your HTML:

1. Put the path to your image where you want it to appear, and remember to add the bootstrap class “img-circle”:

<img src=”your_image_name.jpg”  alt=”description here” class = “img-circle” class=”yourclassname”>

Other articles you might like:

-How your personal brand makes the difference

-Using images: Tips to improve your SEO rankings

-5 Tips to Stay Sane when Working from Home

 

About the author

I developed Image and Aspect because I believe that professionals need to have an impactful web presence. One that showcases their unique talents, skills, and abilities as well as their values and style. A presence that focuses on social engagement and connection.

I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.

I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.

I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.

‘Tips and Snips’ is my blog, and it’s full of information and inspiration to help transform any online persona from “meh” to AMAZING! Sign-up HERE to get blog posts right to your in-box every Friday! I write about Design, Marketing, Search Engine Optimization, Branding, Vlogging, Color Theory, HTML5, CSS3, Bootstrap, WordPress, Social Media…anything you’d want to know to get yourself noticed online.

Visit Image and Aspect to learn more about your web presence options

Diane M. Metcalf, M.S.

Here’s a comprehensive downloadable PDF of previously published current Bootstrap CSS classes, including descriptions, that I aggregated here for quick reference.

Questions?

[email protected]

My Contact Page

Other articles you might like:

-How your personal brand makes the difference

-Using images: Tips to improve your SEO rankings

-5 Tips to Stay Sane when Working from Home

 

About the author

I developed Image and Aspect because I believe that professionals need to have an impactful web presence. One that showcases their unique talents, skills, and abilities as well as their values and style. A presence that focuses on social engagement and connection.

I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.

I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.

I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.

‘Tips and Snips’ is my blog, and it’s full of information and inspiration to help transform any online persona from “meh” to AMAZING! Sign-up HERE to get blog posts right to your in-box every Friday! I write about Design, Marketing, Search Engine Optimization, Branding, Vlogging, Color Theory, HTML5, CSS3, Bootstrap, WordPress, Social Media…anything you’d want to know to get yourself noticed online.

Visit Image and Aspect to learn more about your web presence options

Diane M. Metcalf, M.S.

Check the head and make sure you have the meta tags correct. (The 3rd tag is necessary to display the page on mobile devices.)

<head>

<meta charset=”utf-8″>
<meta content=”IE=edge” http-equiv=”X-UA-Compatible”>
<meta content=”width=device-width, initial-scale=1″ name=”viewport”>

The above 3 meta tags must come first in the head; the other head content comes after them.

<title>Page Title Here</title>

Next is the Bootstrap core css:
<link href=”css/bootstrap.css” rel=”stylesheet”> OR
<link href=”css/bootstrap.min.css” rel=”stylesheet”>

Your own style sheets come next
<link href=”css/mystyle.css” rel=”stylesheet” />
</head>

The Bootstrap Core JavaScript files (jquery.min.js and bootstrap.js) are at the end, right before the closing body tag, so the pages will load faster.

Which Bootstrap css version should you use? It depends whether you want to be able to read it or not. Bootstrap.min.css is a mini version of bootstrap.css. All of the white space and other extra characters have been removed, to decrease the file size. This version is usually used in production. When you’re developing, it’s helpful to use the regular version because it’s legible.

Read more at https://getbootstrap.com/docs/3.3/getting-started/

Questions? Contact me:

[email protected]

or

My Contact Page

Other articles you might like:

-How your personal brand makes the difference

-Using images: Tips to improve your SEO rankings

-Use a customer thank-you page to avoid missed opportunities

 

About the author

I developed Image and Aspect because I believe that professionals need to have an impactful web presence. One that showcases their unique talents, skills, and abilities as well as their values and style. A presence that focuses on social engagement and connection.

I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.

I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.

I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.

‘Tips and Snips’ is my blog, and it’s full of information and inspiration to help transform any online persona from “meh” to AMAZING! Sign-up HERE to get blog posts right to your in-box every Friday! I write about Design, Marketing, Search Engine Optimization, Branding, Vlogging, Color Theory, HTML5, CSS3, Bootstrap, WordPress, Social Media…anything you’d want to know to get yourself noticed online.

Visit Image and Aspect to learn more about your web presence options

Diane M. Metcalf, M.S.