Today we are moving to freeCodeCamp to learn about Bootstrap, a responsive CSS framework. Bootstrap makes it possible for developers to make your HTML elements fit on all different screen sizes without creating a separate mobile version of a website. That is the beauty of responsive design!
You just need a little bit of code to design for any size screen you want. In this post, I'm going to go over the first nine lessons of freeCodeCamp's Bootstrap section from the Front End. You can follow along using your freeCodeCamp account.
==> Click here to visit the Free Code Camp website!
Just sign up for a free account on the freeCodeCamp website. Once you made your new account, click Map in the navigation. Look for "Responsive Design with Bootstrap".
Click to see all the lessons in this course. Just click the first one and follow along with the rest of this post. I will also be using CodePen to recreate the sample Cat Photo App project used throughout the course.
Aren't ready for Bootstrap? Keep practicing HTML & CSS with any of the coding posts featured in the Skillcrush 101 and Skillcrush Portfolio series. You can also review HTML & CSS with freeCodeCamp's HTML & CSS section.
How to Add Bootstrap
Bootstrap is easy to add to any website or app. In your HTML file, you will add the following link inside your head tag.
<link rel="stylesheet " href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
If you are using CodePen, it is even easier to add. Inside your pen, click on the gear icon in the corner of the CSS workspace. This will take you straight to the pen settings with a variety of different tabs.
Click on the CSS tab. Scroll to the bottom where you will see "Add External CSS" where there are two gray bars (see the image below). In this section, go to quick add and pick Bootstrap 3. Save and close when you are done.
1. Use Responsive Design with Bootstrap Fluid Containers.
The first lesson is nesting all the HTML elements in a div tag with container-fluid. Container-fluid changes a fixed-width grid layout into a full-width layout. All you need to do is change the class name to container-fluid.
If you look at the sample project's editor or the Free Code Camp editor, you should see the code below. When I look at the preview of my site, the elements nested in between the container-fluid class will extend to the full width or fill the entire width of the page.
<div class="container-fluid">All your content</div>
2. Make Images mobile responsive.
Developers can use a little bit of Bootstrap to make images fit the width they need for a website. All you need to do is add an image-responsive class to your image tag. It should look like this:
<img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
When the computer reads this class, it will make your images change to fit the width of the page.
3. Center text with Bootstrap.
Bootstrap doesn't make elements fit a specific width we are looking for. We can even do a little bit of CSS styling. If you want to center your text, you just need to add the class text center to any text tags you want to be centered.
In the cat photo app, I'm going to add a text center to my h2 tag. When it comes to adding more classes to any tag, I will just separate them with spaces. If you look at my code, it should look like this in your text editor:
<h2 class="red-text text-center">Cat Photo App</h2>
If you take a look at the site, the headline two will be in the center of the page regardless of what size the screen is.
4. Create a Bootstrap button.
One of the greatest things about Bootstrap is creating buttons. Bootstrap buttons are unlike HTML buttons because they let you add a little bit of style. To create a button with Bootstrap, use the button tag.
Give the button tag a class name btn like the example below. Inside your button tags, add the button text. When you check your site in the browser, you should have a button with the text inside.
<button class="btn">Like</btn>
5. Create a block element Bootstrap Button.
Once you have a button on your site, you can start customizing it to look a specific way. I'm going to change the width of the button using btn-block class. Buttons with the btn class will be only as wide as the text you want for your button.
In the Cat Photos App, the word "like" makes the button as wide as the word. When I add the btn-block class name to a button, the button will now stretch to fill the entire page horizontally. Any elements that follow will move to a new line below.
freeCodeCamp wants students to think of a button taking up 100% of the available width. Just make sure you don't delete the btn class. You should see the following in your text editor.
<button class = "btn btn-block">Like</button>
6. Taste the Bootstrap Button Color Rainbow.
This lesson is the start of a few lessons on changing the button color. Right now the button on the Cat Photo Site is gray. Bootstrap has classes that will let you change the color of buttons.
The first class is btn-primary. This changes the button color to blue. A developer might use btn-primary for buttons that users need to take such as liking a picture or tweeting a quote on their Twitter feed.
Just add this class to your button and run your code. Your code should look like the code below. The button color should now be blue.
<button class = "btn btn-block btn-primary">Like</button>
Notice how I'm putting spaces in between my class names? As long as you put spaces between the class names, you can add as many class names as you want.
7. Call out optional actions with button info.
Another class you might use for your buttons is btn-info. Just add this class after btn and btn-block then check your site in the browser. Use the example in the btn-primary example for reference.
The button will now be a lighter shade of blue. Developers can use this class to help call attention to other actions users can take. This a great class to use on less important buttons, but other actions a user might be interested in taking.
8. Warn your users of a dangerous action.
The final important button class to know is btn-danger. This class lets users know the button does a destructive action. This might be canceling an account to deleting something from the site. When the btn-danger class is added to your button, the button will be red when the code is run.
9. Use Bootstrap Grid to put elements side by side.
Want to put your elements into rows? Bootstrap uses a grid system that makes it easy for developers to do this just by using a Bootstrap class. This is often added to a div element and can customize the element's relative width.
Below is an illustration that shows what a 12-column Bootstrap grid layout looks like. So what do these abbreviations mean in the illustration? First, there is col-md.
This is the class that is being used. Col is the abbreviation for column. Md is short for medium. Md is used for the screen size.
So the md would help adjust the width for a medium-sized screen while an xs would adjust for a smaller screen size. After the md, you would put a number. When computers read this code, the number lets them know how many columns wide the element needs to be.
For example, let's say I want to make a button 3 columns wide for a laptop computer. I would give the button class "col-md-3". This lets the computer know the button will take up 3 columns.
Try this on your cat photo app with "col-xs-4". When you run your code, the buttons will be smaller, taking only 3 columns for each button. The last important Bootstrap class I'm covering today is row.
When you give a class row, all your elements will be lined up in a row. Do this with your buttons and they will side by side.
Time to stop for today!
Congratulations! You completed the first 10 Bootstrap lessons in the freeCodeCamp Bootstrap course. We covered some of the important fundamental skills of Bootstrap.
You learned how to add it to a website and how the Bootstrap grid system works. You learned how Bootstrap classes work and how to use them to make buttons for a website. Feel free to take a look at my pen for this project below and play with the window size to see how this affects the site elements.
Now that you know a little bit of Bootstrap, take some time to practice these new skills on your own and build some projects. Tomorrow, we will be back to Bootstrap. This time I'll show you how Bootstrap can be used to replace CSS. I also show you how to use Font Awesome icons for our buttons and give some style to the form in the Cat Photo App.
This post was originally published on January 10, 2018 on the blog The Original BritishPandaChick. I made minor changes to the original post to work here on CodeNewbie.
Top comments (1)
Look no further than buying dermal fillers from an online store. With the convenience of online shopping, you can easily find top-quality products like Nabota Botox to achieve your desired look. However, it's crucial to ensure the authenticity and safety of the products before purchase, so always buy from reputable sources.