Bootstrap 4 Basics

Defaults - 2.0

Moving on, building on our container learnings, tables, form elements and content wrappers... How do we style content text and add texture? We will briefly cover text, title text, color and more. The Bootstrap framework is built with the following default settings:

Defaults

• font-size: 16px
• line-height: 1.5
• font-family: "Helvetica Neue", "Helvetica", "Arial", "sans-serif"
• p {margin: 0 1rem;}

Typography

• <h1> - Title Text: h1 - h6 or sizes 1 - 6
• .display-1 - Display Text: display-1 - display-4 or sizes 1 - 4
• <small> - Secondary Text
• <mark> - Highleted/Marked Text
• <abbr> - Abbreviation text
• <blockquote> - Quoted text
• <dl> - List Title Strong Weight
• <code> - Code text, used throughout the site
• <kbd> - Keyboard Actions
• <pre> - Separated contextual code or multi-lined code examples. Those are shared throughout the site.

Defaults: Many, many examples below, Ctrl + Paste examples below. We've included Default title text, paragraph text, secondary text, quoted text, code examples, keyboard key code and more. All served up in a form that are plug and play. Probably more than you need to get your Bootstrap'n journey started... Go ahead, Give it a shot.

Bootstrap 4 Basics

Typography, Colors - 2.1

Theme Colors, Backgrounds - 2.1.1

Pargraph on colors used in context and those defined with the Bootstrap framework or default text colors/backgrounds. *Although we are only providing four examples below, all classes are provided over on our 'Reference' section for additional classes and uses in your Bootstrap'n journey. An abbreviated section on colors, adding text color values/hues, opacity and percentages. Continuing the typography discussion above, we can push the typography classes a bit further, including body text, button classes and the concept of 'expression' through color.

Typography Color

• .text-primary - Primary, Blue Text
• .text-success - Success text, may be used for form success
• .text-info - Message text, more information
• .text-warning - Warning Text, used for warning messages
• .text-danger - Danger, used for errors or incomplete transactions or form issues.

Typography Backgrond Colors

• .bg-primary - ditto
• .bg-success - ditto
• .bg-info - ditto
• .bg-warning - ditto
• .bg-danger - ditto

Additional Colors, Opacity and Shades

• .text-muted - Muted color palette
• .text-white - Text white, handy when using background colors
• .text-black - Text white, handy when using background colors
• .text-white-50 - Text white, 50% opacity
• .text-black-50 - Text black, 50% opacity
• .text-dark - Handy when adding text to light or subtle background shades, gradients or images.

Typography Colors, Opacity and Background Improvements: We are including an old favorite of ours, 'The quick brown fox jumps over the lazy dog. Purpose, all characters used in a nice, little sentence. We are only showing a few examples while others can be found on the references page. Better yet, head over to the Bootstrap site for specifics on the Bootstrap SASS color library.

Alerts

Alerts - 2.2

Ok, might be a good time to tie in alerts, color and text predefined in the Bootstrap Framework. Although you have the ability to change and/or append or alter css styles to fit your website needs. You can use the predefined classes to stlye important messaging for your users using the same color classes above.

• .alert - Spacing, padding for alert messages
• .alert-success - Styled for a succesful message
• .alert-danger - Alert the user that some action has resulted in a failure or an adverse result to the input or system process.
• .alert-link - An alert containing a link to perform some action in order to proceed. Alert links might contain an "X" or "Close" for example. When a user is presented with a Modal Window, an "X" or close button might be use so that a user might return to the main or primary experience.
• .alert-success fade show - Finally, timing or slowing down time might improve a users experience, effectively drawing attention to such alert message, alert message or action.

Alert: Alerts can be fun, important and impactful. Find ways to 'inject' messages to your customers. It's important to share the latest and greatest alert types with you customers. We choose a softhearted subject per alert example below, key here is icons, text and links to address or take action now.

Buttons

Buttons - 2.3

Buttons, General Functionality - 2.3.1

Button are styled simularily as those elements above, using similar color classification with the button element. Where links use primary and secondary relationships. Although we don't use outlines, borders very often, there is a case for outlined or buttons with borders. Buttons can vary in color, outline, size, shape and action. Feel free to use classes for color here as well i.e. .btn-success, .btn-warning, .btn-danger etc. Please note, the button class can be used in various areas of the site, same with elements. Elements such as links, buttons and input fields which we covered in the containers section. We covered the basics, including size, 100% width and actionable buttons (meaning active and disabled).

• .btn - Button Class
• .btn btn-primary - Button Class Primary/Default Button Treatment
• .btn btn-outline-primary - Outline Button Primary Button
• .btn btn-secondary - Button Class Secondary Button Treatment
• .btn btn-outline-secondary - Outline Secondary Button Treatment
• .btn btn-primary active - Active Class, Current Page
• .btn btn-primary disabled - Disabled Class, hidden link
• .btn btn-primary btn-block - 100% Width Button
• .btn btn-primary btn-sm - Small Button Variety
• .btn btn-primary - Default Primary
• .btn btn-primary btn-lg - Large Button Variety

Buttons, Defaults: With greater variety, comes greater responsibility to place elements of 'interaction'. That being said, a call-to-action might have a button or link to provide an opportunity to the user to move elsewhere, learning more information or purchase some goods or service. All in all, let's not overdo it... There are links and buttons everywhere, make it 'make sense'.

Button Groups

Button Groups - 2.0

Button Groups - 2.3.2

Continuing with our look at buttons, we must touch on button groupings, or a series of buttons that might act together. We can use the button group class to bound buttons together in a group format. Button groupings can maintain inline (horizontal) properies and vertical treatments for screen widths which have limited space on the x-axis. Or perhaps a tablet, or mobile device is in portrait mode or held in the portrait orientation. We will skip dropdowns, nesting buttons and split buttons for now, as we would direct you to the button reference section for further examples or tutorials.

• .btn-group - Button grouping on the x-axis (horizontal)
• .btn-group-vertical - Button grouping on the y-axis (vertical)

Button Groups: Groupings included, showing button groups side-by-side and in a vertical fashion. Also, another showing multiple groups of buttons running in parellel inline. We skipped dropdowns here in this case, however dropdown help with limited space while showing sub-child (teritary) content by child (secondary) categories.

Pagination

Pagination - 2.4

We cover sorting 'pages' by alpha-numerical values, breadcrumbs (identifying direction and location within a site). Also, covering directional element used in various blog treatments and archival pages. Pagination and breadcrumbs are not always used, however if you would like to include a quick and easy way to imprement pagination your site... your in the right spot. We will cover the basic pagination and breadcrumb implementations below. Covering alignment, sizing and action another time. We've covered action and sizing above in buttons and button grouping section. Alignment is covered elsewhere, while skipping floats, absolute positioned elements and clear.

• .pagination - Pagination draped over a UL (Unordered List)
• .page-item & .page-link - Links within the unordered list
• .breadcrumb - Breadcrumb trail...
• .breadcrumb-item & .page-link - links down through navigation funnel

Note: More navigational elements, pre/post container sections. Drive continual usage, maintain customer interaction and provide apths to-and-fro, page-to-page, card-to-card etc. We will come back to this at some point and add our own pagination and breadcrumbs to the site. However, at this time we are taking an agile approach and sticking to a continuous delivery model; groom and broom, development and delivery. Hightest value, highest return pushed to prod. daily. More to come.

Images

Images - 2.5

Images... finally something to spruce up the site... bring life to the textutal elements, colors and structure. Now we introduce images to the mix. We'll cover most, leaving alignement to another topic as the float attribute is used to move images left, center and right. Cutting through the classes, responsive images is the main focus as Bootstrap is mobile first, scaling to the tablets and desktop devices with ease.

• .rounded - Self-contained image, rectangular with rounded corners
• .rounded-circle - Self-contained image, rounded to a circle
• .img-thumbnail - Self-contained image, thumbnail space and border
• .mx-auto d-block - Self-contained image, auto grow to given width
• .img-fluid - Self-contained image, fluid image based on screen

Images: including a few styles, aligment and spacing. We will provide examples throughout the sight so you can gain a feeling for what a few of these examples might look like in the wild..

---

---

Code Snippet - Images

<div class='example border p-5'>
<div class='container-fluid'>
<div class='row d-flex justify-content-center'> </div>
</div>


Tooltip

Tooltip - 2.6

Need more explaination, add a tooltip with a mouse visual queue for the user. Quickly and easily deploy tooltip 'popup box' providing more information upon user action. This is one of the first reference we use to call another programming lanugage, using the data tag/attribute to provide the expected experience. The script is required inorder to create/interact with the tooltip method. Toggletip might be used for the following: define the total number of followers a users might have as connections or define number of followers 'currently' online.

Tooltip Code

• data-toggle="tooltip" title="(Include Text)" - include the following data-toggle JQuery snippet and title content to implement this code.

JQuery Code Snippet - Toggle Method

          <script>
          $(document).ready(function(){
            $('[data-toggle="tooltip"]').tooltip();
          });
          </script>
        

Tooltips: More tools, more tips for your customers. Need a quick hover-type experience to share top-of-system information? Tooltips might be what you are looking for. Tooltips is actived when a user mouses/hovers over the active area while triggering text for further detail.

Popover

Popover - 2.7

In the future we may move Popovers to share space with tooltips. However for now, although similar both are similar from a UX perspective. A user takes some action by clicking on a link, JQuery does some quick wizardry and theres a popover further defining the element selected. So, the example would also include a small JQeury code snippet to create this user interaction.

Popover Code

• data-content="popover" title="(Include Text)" -

JQuery Snippet - Popover Method

	<script>
	$(document).ready(function(){
	$('[data-toggle="popover"]').tooltip();
	});
	</script>
	

Popover: Another hover treatment, with some helpful text on where to go next..

Icons

Icons - 2.8

Although Bootstrap Version 4 no longer uses the "Glypicons" icon library... We suggest popping over to Font Awesome.com for the latest iconography libraries. Or just simply include the Font Awesome libray link like the one shared here: borg2borg's Font Awesome Library. Margins, alignement, sizing styles still apply, we will cover this more in detail in a few short weeks in the reference section. More to come.

In the meantime, what to useFont Awesome libraries and more? Simply signup, no cost as there is a free-to-premium model used for additional libraries, include files and such.

• .fas - Call Icon class, fas
• .fas fa-envelope - envelope class
• .fab - Brands, call icon class
• .fab fa-pinterest - TikTok class

Icons: Icons, don't forget to include your Font Awesome code and bring your site to life. We include two examples, .fas(6) and .fab(6) classes below