Setting up a proper html head with bootstrap and normalize.css?

Hello there,

I just started with freeCodeCamp and now i work on my first site using Brackets. I get a little bit distracted by the possibilities to set a clean start in the head tag. My idea was to use normalize.css and bootstrap, but I’m not sure in which order I should include them. Here is my head tag, any suggestions and help regarding sort order or removing/merging something would be really appreciated:

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!-- Normalize.css do I put this before Bootstrap? I would guess so?! -->
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- this is gonna be my actual "main.css", so it comes last -->
<link rel="stylesheet" type="text/css" href="css/main.css">

Does this make sense to you this way :)?

Best regards,
Wolli

yeh you got it :slight_smile:

definitely your reset first, - otherwise you reset bootstrap or your own styles
then vendors like bootstrap, - otherwise this will reset your custom styles
then fonts / fontawesome if using custom
then your own styles

same kind of thing before your closing </body> tage for your <script> tags.

jQuery first,
then bootstrap,
then your custom js

it goes in order of dependencies. Bootstrap being dependant on jquery, so it goes after.

2 Likes

Cool thanks for your reply. I just found this info on the bootstrap site. Seems they have normalize.css already included, so I don’t need to worry about it :).

You will still have to link to it though in your head. But locally like your main.css. They just give you the file.

You may as well use the cdn link tbh it’s quicker and google insights prefers it that way too

Worth pointing out I think you only get that file if you download bootstrap. If your just using a cdn then I don’t think it’s included. Not for your own css certainly.

Although it could be said that bootstrap is itself a reset for your own css.

I looked into bootstrap.min.css and into bootstrap.css.
Seems to me normalize.css is completly in bootstrap.css, but not or just a little bit in bootstrap.min.css.

My question now would be:

  • Should I just use bootstrap.min.css, because it has enough code to normalize the common browsers?
  • Should I use bootstrap.css instead? Isn’t it possible using cdn?
  • Or I could use normalize.css and then cdn bootstrap.min.css

This is generally how I setup my HTML webpages.


<!--
File Name: index.html
Date: 11/29/2016
Programmer: FirstName LastName
-->

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="author" content="YOUR_NAME">
    <meta name="subject" content="HTML WEBPAGE TITLE">
    <meta name="datecreated" content="20161129">
    <meta name="datereviewed" content="20161129">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML WEBPAGE TITLE</title>
	
	<!-- ALL CSS GOES IN THE META HEAD SECTION -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css" integrity="sha256-uHu2MAd1LvCOVEAhvMld4LpJi7dUGS7GVzvG/5B3hlo=" crossorigin="anonymous" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link href="YOUR_SITE.css" rel="stylesheet" />
</head>
<body>
 

 <!-- ALL JAVASCRIPT LINKS GOES RIGHT BEFORE THE ENDING BODY TAG -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="YOUR_JS_FILE.js"></script>
</body>
</html>

ok, so you don’t use a reset or normalize, just bootstrap.min.css.

Thanks for showing this template!

@wolli1234 This is only a very basic template. I add and change things based on the project requirements.

Yeh I see what you mean, tbh, I’d just use what ever’s convenient for now.

Maybe normailise.min and bootstrap.min is smaller overall but bootsrtap.fat is just one request.

Who knows!

yea i gues i’ll stick with normalize + bootstrap.min for now. Maybe I can remove normalize later on, if it’s redundant. Thanks for your input!