In the last section we nailed down the structure of our html page. In this section we are going to work on the second part of our design goal and improve the look and feel of our website.
We also delved in a bit into CSS (Cascading Style Sheets) in the last section. CSS is a technology that let’s you style your web pages. In the last section we did this manually. During development of a website it’s a good practice to test your webpages on many different browsers; Internet Explorer, Google Chrome, Safari, etc.
And not only should you test on many different browsers, but also all the different platforms you want your website to render correctly on;
Smart Phones, iPhones, Androids, different types of Androids like Samsung or Droid, Tablets, and so on.
This was already difficult in the 90’s when the Internet was in it’s infancy. I remember being a webmaster for an association and developing a new look and feel for their website. I had my PC where I was developing and testing against IE 4, IE 5, Netscape 4 ,and Netscape 6. Then I would turn around to a MAC and test a couple of these browsers on there. Some development shops would set up test benches with multiple platform PCs and different browsers and versions. (Thankfully there are plenty of testing tools for that now embedded in browsers and development tools). Back then the standards were not as well defined and agreed upon. It was the age of the browser wars. And different browser providers would add features outside of the HTML, CSS, and JavaScript standards to try and make their browser stand out. So CSS and JavaScript might behave differently from one browser and platform to another.
To address these problems the W3C (World Wide Web Consortium) came out with recommendations and standards on Web Technologies such as HTML, CSS, and JavaScript.
And companies started making client-side libraries for CSS and JavaScript that do the work of and take care of the rendering and behavioral differences between browsers and platforms.
One of these libraries is Twitter Bootstrap.
Bootstrap is an easy to use CSS library. One of the great things about Bootstrap is that it is responsive. This means that when you design your webpage, it will automatically render correctly on mobile and tablet devices as well.
We are going to use Bootstrap to address some of the problems described at the end of the last module.
You can download the completed version of fredscars.html for this module with the completed HTML here.
Adding Bootstrap
Let’s start by adding in Bootstrap to our html file. Modify the contents of the <head> element in fredscars.html with the code below:
[BY THE WAY]
To save space whenever there is a small change I’ll just post the change in bold/blue and put
<!– … –>
comments for the surrounding code so that the tutorial pages aren’t so long.
<html>
<head>
<title>Fred's Cars, Trucks & Jeeps</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">
<style>
<!-- ... -->Using jsDelivr
I wouldn’t expect you to type in all of this. Especially the integrity attribute’s information on the link element. You can cut and paste this code into your file by going to getbootstrap.com (Version 5.3.3). Scroll down to where it says CDN via jsDelivr and click the “Copy to clipboard” icon.
Now paste into your code as shown above. We only need the first line of code referencing the <link> element for CSS in this module. We do not need the second line of code referencing the <script> element for JavaScript. Unfortunately, the Bootstrap site doesn’t provide the CSS and JavaScript with separate copy buttons anymore like it did in Version 5.1.3. So once you paste the code into FredsCars.html, you’ll have to remove the line for the <script> element. Here is the new HTML with the modified code again for reference:
<html>
<head>
<title>Fred's Cars, Trucks & Jeeps</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">
<style>
<!-- ... -->Save your file, refresh your browser and your webpage should look similar to the following:
Well we haven’t solved our left margin problem yet. But it still looks much better right away. Bootstrap adds a default font and I think it looks much better then the browser’s default font.
Let’s try to see what font Bootstrap uses with the web development tools. In your browser press the F12 key to bring up the web development tools. By default the web development tools will show up on the right hand side of your browser. I like my web development tools to show up on the bottom of the browser. If you’re like me and you want to set up your real-estate that way, Click the three dot’s on the top bar of the web-dev tools and click the “Dock to bottom” button:
Then click the Elements tab in the top navbar of the Web Development Tools pane.
You can see here that Bootstrap uses a variable called bs-body-font-family for the CSS font-family property targeting the body element.
And if you now click the “bs-body-font-family” link it will navigate to the styling for the <body> element.
In the picture above you can see the bs-font-sans-serif global bootstrap variable defined.
The header element retains the arial font we gave it in our custom CSS in the last module and overrides the default bs-body-font-family variable’s CSS.
Dotting the I’s and crossing the T’s
Bootstrap requires the HTML5 doctype tag to work correctly.
According to the Bootstrap documentation:
Without it, you’ll see some funky and incomplete styling.
Let’s go ahead and add that now. Modify the contents of fredscars.html with the contents below:
<!doctype html>
<html>
<head>
<!- ... ->Save your file and refresh the browser. If you watch carefully you may see the bottom edge of the top black bar shift up a little bit.
Bootstrap Containers
Let’s finally get rid of that left margin problem.
Modify the contents of fredscars.html with the following and refresh your browser.
<!doctype html>
<html>
<head>
<title>Fred's Cars, Trucks & Jeeps</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<style>
body{
/* margin: 0; */
display: flex;
flex-direction: column;
min-height: 100vh;
}
header{
padding:5;
background-color:black;
color: white;
text-align:center;
font-size: 16pt;
font-weight: bold;
font-family: arial;
}
.spacer {
flex: 1;
}
</style>
</head>
<body>
<header>
Fred's Cars, Trucks & Jeeps
</header>
<div class="container m-4">
<h1>Welcome to Fred's Cars!</h1>
Thank you for visiting our site!
</div>
<div class="spacer"></div>
<footer style="background-color:black;
color: white;
text-align:center">
Contact us: (555)555-5555<br />
121 Fredway St.<br />
Cartown USA
</footer>
</body>
</html>Your browser should look similar to the following:
Finally! We now have a nice margin to the left and the top of the content in our webpage.
In the code above we added a div tag around our main content and gave it two bootstrap classes.
container: Bootstrap uses containers to contain, align, and pad your content. We used the bootstrap container class to, “contain” our main content.
m-4: And we used the margin class and specified 4 pixels of margin on the top, bottom, left and right of the main content using the m-4 syntax.
We also commented out the margin property of the body tag in our css inside of the <style> tag. We no longer need the margin setting since Bootstrap takes care of that. It sets all of the margins of the body element to 0 for us.
Bootstrap continued
Responsive rendering
If you want your webpage to render properly on smart phones and tablets like mentioned above, we’ll need to add the “Responsive meta tag”.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fred's Cars, Trucks & Jeeps</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<!-- ... ->Let’s make one more tweak to our webpage before we move on. Make the following changes to fredscars.html, save the file, and refresh your browser:
<!-- ... ->
<body>
<header>
Fred's Cars, Trucks & Jeeps
</header>
<div class="container m-4 text-center">
<h1>Welcome to Fred's Cars!</h1>
Where you'll always find the right car, truck, or jeep.<br />
Thank you for visiting our site!
</div>
<!-- ... ->Your browser should look similar to the following:
In the code above, in the container div class for our main content, we added another bootstrap class called “text-center” in order to center our welcome message.
Looks great right? But is it really centered? I want to show you another trick with the web development tools. But first lets add a border style to our main content div. Make the modification below to FredsCars.html and refresh your browser.
<!-- Previous Content -->
<div class="container m-4 text-center"
style="border: 1px solid red;">
<h1>Welcome to Fred's Cars!</h1>
Thank you for visiting our site!
</div>
<!-- Following Content -->Your browser should look similar to the following screenshot.
We’ve added a one pixel solid red border to the main content div so we can see exactly how much width and height it takes up. Press the F12 key to open up your web development tools. If you drag the side of your browser window the width and height dimensions show up in the upper right.
In the above screenshot I have made the browser window about 1754 pixels wide. Now with our red border on our main content we can see the text really isn’t centered is it? Let’s fix it. Modify fredscars.html with the code below, save the file, and refresh your browser .
<div class="container-fluid my-4 text-center"
style="border: 1px solid red;">
<h1>Welcome to Fred's Cars!</h1>
Thank you for visiting our site!
</div>Your browser should look similar to the following screenshot.
In the code above we changed the Bootstrap style from container to container-fluid which makes the container take the full width of the screen rather then stopping at specific break points for specific devices. You can read more about break points in the Bootstrap documentation and how they apply to containers. We also changed the m-4 Bootstrap style to my-4. Now instead of the margins of the main content div being on the top, bottom, left and right, we have specified to only give four pixel margins on the top and bottom of the div. The ‘y’ in ‘my-4’ specifies the y axis. If you only wanted the x axis, or just the left and right margins to take affect, you would use ‘mx-4’.
my-4 /* vertical axis spacing: add margins to the element, four pixels top and bottom */
mx-4 /* horizontal axis spacing: add margins to the element, four pixels left and right */
m-4 /* all margins. Both vertical and horizontal */Padding works the same way as margins. Margins space the outside border of elements from the rest of the content. Padding spaces the inside content of an element from it’s own borders. Padding has the same variations as margins.
py-4 /* vertical axis spacing: pad element by four pixels top and bottom */
px-4 /* horizontal axis spacing: pad element by four pixels left and right */
p-4 /* all spacing. Both vertical and horizontal */Now for the last step remove the red border style and refresh your browser and it should look similar to the following.
We made a lot of improvements in this module. We have a nicer default Bootstrap font, we got our main content from cramming up against the left edge of the browser window, and we truly centered the content.
Below is the complete up to date code for this module.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fred's Cars, Trucks & Jeeps</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<style>
body{
/*margin:0;*/
display: flex;
flex-direction: column;
min-height: 100vh;
}
header{
padding:5;
background-color:black;
color: white;
text-align:center;
font-size: 16pt;
font-weight: bold;
font-family: arial;
}
.spacer {
flex: 1;
}
</style>
</head>
<body>
<header>
Fred's Cars, Trucks & Jeeps
</header>
<div class="container-fluid my-4 text-center">
<h1>Welcome to Fred's Cars!</h1>
Where you'll always find the right car, truck or jeep.
Thank you for visiting our site!
</div>
<div class="spacer"></div>
<footer style="background-color:black;
color: white;
text-align:center">
Contact us: (555)555-5555<br />
121 Fredway St.<br />
Cartown USA
</footer>
</body>
</html>What’s Next
Up to this point we have worked on the structure of our html page and improved the appearance a bit with Bootstrap. In the next section we are going to get into defining what the content area between the header and footer should look like. We’ll finally be getting into the meat of the project.