Getting a person’s attention is an increasingly difficult task. As a web designer, one of your jobs is to make sure the viewer of your webpage is drawn to the information they need.
One way to do it, is with a clear, and simple design. Here’s a link to an Introduction to Visual Design if you’ve forgotten about those simple rules for design.
Once you are understand those design principles, you can look to Bootstrap to help you implement some of those principles, and get your viewer to take action.
Making Text Stand OUT
Standing out from a crowded page is a key issue many websites have. I was looking at one today, and there were just lines and lines and lines of text, with little to no break out. It was hard to read, and harder to find the info I was looking for.
Luckily Bootstrap gives us a couple of solutions to make things stand out.
Headings
Heading in a web page (the h1 through h6 tags) are supposed to define your sections. The lower the number (h1) the higher the importance. In good design and layout, an h1, could have an h2 under it, like you would find in an English Paper Outline. However, an h3 would never have an h2 as a sub tag.
In years past, search engines would put emphasis on what is between the header tags. However, recent updates have reduced or even eliminated any bump from that, because of widespread abuse.
That doesn’t mean you shouldn’t use it. Instead, use it correctly. H1 tags can be used for page titles, or main sections of the web page. Many pages will have h2 tags, but fewer have h3 and lower.
You do not need to do anything special to use the header tags in Bootstrap. They all exist and are already styled to meet the typography designs of the framework.
Faux Headings
Sometimes, you want your text larger, like in a heading, but you cannot either set the heading, or it wouldn’t be an appropriate heading to set.
In those cases, Bootstrap has provided classes .h1 through .h6 which will mimic the tags h1 through h6. They have the exact same styles, but you can append them to a paragraph tag, and not break the hierarchical flow of the page outline.
Still those are designed really for when you want to use a header tag, but the system you are using won’t let you.
Display Headings
When you don’t really want to use a header tag, or class, you can use the display heading classes. Specified as .display-1 through .display-4 they let you increase the size of the text, without breaking the outline or flow.
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>As you can see in the example, you can apply them to even heading tags, as well as spans, paragraphs, and other tags. These are even larger than what you’d normally find in a header tag – and make for good headlines, or part of a call to action.
Using Colors
Using colors is a great way to grab a person’s attention. Bootstrap gives us several default colors. If you are using a different color library or not, it will still work – just you’re colors will be different.
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>From this example, you can see that you can change the color of text, but apply a class with the prefix of text- and then specify what you are looking for, primary, secondary, etc.
Classes starting with bg- define a background color. Below is a more complete lists.
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>Notice how you can use multiple classes together at one time, so you can achieve the look you really desire.
Defining Alerts
An alert is going to provide users with a contextual feedback message. Typically this could be something like letting them know they added something to a shopping cart, sent a message, etc.
Alerts have a background color and their text is automatically colored correctly. If you have a link, you’ll need to add an .alert-link class to the link inside of the alert.
<div class="alert alert-primary" role="alert">
A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>Use the color names to define which color you want you’re alert to be.
Advanced Alerts
You can have more than just a standard alert. You can add extra text, and even headers to the alert.
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>You successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>Notice the .alert-heading class on your heading.
The <hr> tag is used to create a horizontal line.
You can also make an alert dismissable with some JavaScript. You can learn more here.
Jumbotron
The Jumbotron is designed to showcase “hero” content. Content that you want to stand out on a homepage, or a landing page.
It provides a background color variation, and lots of space to make sure that content stands out.
<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>The paragraph with the .lead class is used to display slightly larger text, to once again make it stand out. It doesn’t need to be huge, and Bootstrap makes it work for us.
You’ll notice that a button is also used to lead users to take an action. This is called a Call To Action (CTA) and is used to get a user to do something, like fill out a form, send an email, add to their shopping cart, etc.
You can additionally use the .jumbotron-fluid class with the .jumbotron to make sure you use 100% of the parent container’s width.
Getting Your Viewer’s Attention with Bootstrap was originally found on Access 2 Learn
