Jan 10, 2018

My Coding Journey: How to Center Text, Build Buttons, and Create Mobile Responsive Images

Copyright 2018 BritishPandaChick

The series My Coding Journey is back and ready for 2018. Last year, I demonstrated how HTML & CSS is used to create static websites. You even got a chance to build different projects using your new skills with Codeacademy and Skillcrush. The last post in this series was all about building the bonus project from Skillcrush 101. This project was based on a design comp Skillcrush provided for students to recreate. Click the link below to take a look at how I built this project.

===> Click here to see Rogue Pickings Bonus Project post

Today we are starting off the new year by moving to Free Code Camp 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 ten lessons of Free Code Camp's Bootstrap section from the Front End . You can follow along using your own Free Code Camp account. Just sign up for a free account on the Free Code Camp website. Once you made your new account, click Map in the navigation. Look for "Responsive Design with Bootstrap" and 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. Feel free to take a look at the project below if you would like to look at a bigger example. I recommend using this project to minimize and maximize the window size to see how this site would look on different screen sizes.

==> Click here to see my sample project!

Aren't ready for Bootstrap? 

Keep practicing HTML & CSS with any of the coding posts featured in the My Coding Journey series or use any of the other resources in the links section. You can also review HTML & CSS with FreeCodeCamp's HTML & CSS section of the Front End Development certification. This section covers most of the topics featured here on The Original BritishPandaChick and gives you chance to practice coding some more.

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 work space. 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.

Copyright 2018 BritishPandaChick

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 this.

<div class="container-fluid">All your content</div>

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.

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 img-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 of 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 centered.

In the cat photo app, I'm going to add 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 the 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 this example below.

<button class="btn">Like</btn>

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.

5. Create a block element Bootstrap Button.

Once you have a button on your site, you can start customize 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 a 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 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. Free Code Camp 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>

7. 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 which will let you change the color of buttons.

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 this:

<button class = "btn btn-block btn-primary">Like</button>

The button color should now be a blue color. 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.

8. 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 buttons that are less important, but other actions a user might be interested in taking.

9. 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 cancelling 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.

10. Use Bootstrap Grid to put elements side by side.

Want to put your elements into rows? Bootstrap uses a grid system which 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 a illustration which shows what a 12 column Bootstrap grid layout looks like.

Copyright 2018 Free Code Camp

So what do these abbreviations mean on 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 size 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 it 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 Free Code Camp Bootstrap course. We covered some of the important fundamental skills of Bootstrap such as adding 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 of this project below and play with the window size to see how this affects the site elements.

==> Click here to see the sample project!

Now that you know a little bit of Bootstrap, take a week to practice these new skills on your own and build some projects. When the My Coding Journey series returns, we will be back to Bootstrap. This time I'll show you how Bootstrap can be used to replace CSS, using Font Awesome icons for our buttons, and giving some style to the form in the Cat Photo App.


Mozilla Developer Network


Blog graphic and CodePen image belongs to BritishPandaChick. Bootstrap diagram belongs to FreeCodeCamp.

No comments:

Post a Comment

Important Announcement: Future of The Original BritishPandaChick

This week's topic for the Ambitionista Twitter chat was all about reinventing yourself. During the chat, we discussed what this means an...