The correct order for using Bootstrap tags

If you notice that your page isn’t displaying properly; like maybe Bootstrap is using its’ default styles
instead of your custom css, or maybe your drop-down menu isn’t working, it could be that you need to
check the order of your Bootstrap tags.

The order of the tags is very important for your page to look and work like you want it to.

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

diane-author-300x181 The correct order for using Bootstrap tags

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.

Read more

Summary
bootstrap The correct order for using Bootstrap tags
Article Name
The correct order for bootstrap tags
Description
The order of bootstrap tags makes a difference in how your page displays
Diane Metcalf
Image and Aspect
Imageandaspect.com