Content Delivery Network

Bootstrap is also available via Bootstrap’s own content delivery network (CDN). A CDN enables a web site to frequently retrieve used public files from globally distributed servers. For example, when a user from the United States invokes your host in Germany, the CDN will ensure that the Bootstrap files are retrieved from a server in the United States. This relieves your server, the lines of the provider, and the Internet in general, resulting in a faster download for the user. Basically, this is a win–win situation. If you program on the intranet, a CDN is not to your advantage. If you expect only local users in Germany, there is no advantage to a CDN.

The JavaScript libraries are jQuery for Browser abstraction and DOM access, Popper for notifications, and Bootstrap.js for all the interactive Bootstrap components. If you don’t use the components you can remove all three links. If you don’t use notification, simply remove Popper. The CSS parts are entirely autonomous and don’t need any JavaScript.

Repository for Local Installation

To obtain a local copy, you would usually use the node package manager, npm.¹ Npm is both the repository for NodeJs and the tool to access the same. If you develop in Ruby on Rails, you should look for the gem “Bootstrap for Sass.”² Other environments may come with their own package repositories, but because Bootstrap is entirely for frontend development, a package manager from the JavaScript world is the best bet. Here, npm is the most important one. However, the code world is changing constantly and other providers arise all the time, so keep an eye out for new sites for download or public repositories.

Installation Using Npm

The files are now in the folder node_modules of your local project. This gets referenced by whatever development tool you use. Either you add the paths to index.html or another start file manually, or let a packer do this. (Packers are beyond the scope of this book, so you need to do your own research.) The example files provided in the Github repository for this book don’t use any such dependencies, and use the manual integration instead. This simplifies the setup for beginners.

Bootstrap was developed in version 4 with Sass.³ Sass is available on all platforms. Bootstrap uses Autoprefixer to work with the vendor prefixes in CSS. If you want to compile Bootstrap by using the Sass source and not use the supplied Gruntfile, you must use an Autoprefixer integrated into your own build process. If you use the precompiled Bootstrap files or the Gruntfile, the prefixes are already integrated. The procedure applies to Gulp and other taskRunners equivalent if they are to be used. The appendix reviews this in more depth.

Bootstrap can be downloaded in two types of packages: the compiled version and additionally minimized variants.

HTML5: The Role-Attribute

The role-attribute is set in the relevant HTML tags. It improves semantic markup and thus helps screen readers and other devices to present the correct output. It’s part of the effort to help advanced screen readers to render properly and make use of distinct local resources. There is a complete description available online.⁵

For example, imagine a device that has a hardware “search” button. On your page are two forms. One is for searching your site, one for sending a contact form. With <form role="search"> the device would be able to link the right form to the hardware button, making your page appear a lot more professionally designed.

Global Changes

The unit system has been changed from pixels (px) to rem (CSS) or em (Media Queries). The global font, which serves as the starting point, has been increased from 14 pixels to 16 pixels. This is mainly a reference to higher-resolution screens of mobile devices.

Grid System

So far there have been four raster layers: xs, sm, md, and lg. In the future, there will be another level: xl. This is designed to support extremely large displays (3,000 x 2,000 pixels and more).

Tables

Forms

Instead of the special class .form-horizontal, .row can now be used. All .control-- and .input--classes were unified to .form-control-. This means that the special classes .has-feedback and .help-block are obsolete.

Buttons

The classes .btn-default and .btn-info have been omitted in favor of .btn-secondary. Another new feature is .btn-xx-outline—a bezel button. The class .btn-xs is removed.

Pull-Down Menus

Instead of <ul><li>-structures , these can now be formatted using <div><a>-blocks directly. These are the classes .dropdown-item and .dropdown-menu. The class .dropdown-header can now be applied directly to <h1> and the like. Intervals are created with </div class="dropdown-divider"> rather than the previous method, which used <li>-tags.

Panels

The display forms Wells, Panels, and Thumbnails have been deleted and replaced by a new component with the name Card.

Other Updates

Progress bar can now be created with the HTML element <progress>. Quotations need the class .blockquote. Due to lack of browser support, this has some limitations.

Elements (Tags)

IDs

Classes

Frequently several elements are applied at the same time. To do this we use classes that are written in HTML in the class attribute. You can use multiple classes in the class attribute, divided by spaces, thereby combining rulesets in a smart way. This saves extensive definitions. Bootstrap utilizes this ability comprehensively and is able to achieve complex styling with only a few rulesets. A large number of modification options are available through class combinations. Unlike IDs, classes may occur more than once in a document.

Attributes

Logical Selection

Between a and b there is no link, so the rule is applied independently to both. The placeholders a and b in the example may be more complex selectors.

With the space between the elements, a child element is being addressed. Without, both classes must be used (like an AND operator). In this example, only the div elements “B” (line 12) and “C and D” (line 14) are properly formatted. The class “b” in <div class="a b"> can be omitted—it’s useless. If you change the ruleset .c.d into .c,.d (note the comma in the middle), the div elements “C” and “D” become green, too. The reason is that the comma is like an OR operator, so either the first or the second class definition is sufficient to fulfill the rule.

More Selectors

In practice, these selectors are not enough. The following table provides a compact overview of all the forms.

Hierarchy Selectors

Dealing with hierarchies is essential to be able to use CSS properly, because HTML documents are hierarchies, which are often called trees. Figure 2-1 shows the relationships between elements in the document tree.

Table 2-1

Simple CSS Selector

Selector	Description
*	Universal/all
tag	Element
.class	Class (Attribute class)
#id	ID (Attribute id)
[a]	Attribute presence
[a=v]	Attribute value
[a~=v]	Attribute contains a value as a stand-alone word
[a|=v]	Attribute contains no value
[a^=v]	Attribute starts with value
[a$=v]	Attribute ends with value
[a*=v]	Attribute contains a value

Table 2-2 shows the syntax for CSS.

Table 2-2

CSS Selectors for Hierarchies

Selector	Description
|e > f |	Selection if f is a child element of e
|e f   |	Selection if f is a descendant of e
|e + f |	Selection if f is a successor of e
|e ~ f |	Selection when e is sibling of f

In contrast to the possibilities of relationships, you might be missing the selectors for the ancestors, predecessors, and parents. You can often achieve this by swapping the elements.

Absolute Units

This is rounded up to 316 and generally marketed as 320 dpi. Divided by 96 gives a ratio of 1:3.33, which is rounded as 3 device pixels per virtual pixel.

Generally, absolute data should be used only if the output can be determined with certainty. This is possible only in the case of printers.

Relative Units

The unit em used in typography defines the size of the uppercase letter “M” as a measure of unity. This is not the case with CSS, where the value is comparable with the browser default font Times New Roman. Which concrete pixel value the browser uses is not clearly defined. The concrete pixel value is not 12 pixels as is often claimed, and even the more frequently encountered 16 pixels is not a guarantee.

Figure 2-2 shows the default font for Firefox. It uses 16 pixels for the letter “M,” which is equivalent to specifying 16px. The underline is 16 pixels wide. As font size was adjusted to 1 em or 16px at this screenshot, the achieved result is the same. That’s one of the reasons the Bootstrap framework defines an entry point for all font sizes as 16px. It ensures what would be otherwise just an assumption.

Blocks of the Box

The margin that formed the horizontal distances is absolutely valid. The vertical distance, in contrast, may under certain circumstances coincide (collapse). This occurs when no frame (border) or spacing (padding) is used and no exemption (clear) takes place. Here the lower edge of the upper box is overlaid with the upper edge of the lower box. If there are edges of different size, the wider edge is taken as the whole edge.

Box Model Extensions

Terminology

Both are controlled by a set of properties that CSS can apply. The actual element in HTML is not that important. While almost all examples use <div> elements, it is not limited to that.

Terminology

Grid Container Properties

This will create a grid that is four columns wide by three rows tall. The top row will be composed of the header area only. The middle row will be composed of two main areas, one empty cell, and one sidebar area. The bottom row is all footer.

The property grid-template is a shorthand for setting grid-template-rows, grid-template-columns, and grid-template-areas in one step.

According the other rules a property grid-gap exists, which is a shorthand for row-gap and column-gap properties.

Grid Item Properties

If no grid-column-end or grid-row-end is given, the item will span one track by default. Items can overlap if the placement enforces this. You can use the z-index rule to control their stacking order.

Syntax

Specifying a media type is a simple keyword, for example, screen.

The print media type ensures that the style sheet printer.css is used only when printing. On the other hand, on a screen (screen) monitor.css is activated.

The style sheet layout.css will apply when the display area of the output medium is at least 150 mm.

In this example, a style sheet is specified, which can be used both for print media type and the embossed media type.

This example shows how screens are assigned to a minimum 150 mm wide display area rules. A browser that understands media queries is ignoring the keyword only. By denying the query monochrome , the media that can deal with color can be utilized.

Parameters

The feature height describes, in continuous media, the height of the display area (viewport) and paged media as the height of a page. The prefixes min- and max- are allowed to specify limits.

In this example, the ratio value is assigned to the 4/3 variants of aspect-ratio-feature. The style sheet is processed if the aspect ratio of the display area (viewport) is exactly 4 to 3 equivalent (case 1). That is the case for example with a display area of 492 to 369 pixels. The style sheet in case 2 is applied if the aspect ratio is 4/3 or greater (e.g., 5/3 or 6/3). In case 3, the style sheet is processed accordingly only when the aspect ratio is 4/3 or less (for example, 2/3 or 1/3).

The feature device-aspect-ratio (the device’s aspect ratio) describes the ratio of the characteristic device-width to feature device-height. The application is similar to the feature aspect-ratio.

With touch devices, the font size and the padding of the input field are increased accordingly.

Because most devices have multiple input options, their use can not be predicted. It is possible to use any-pointer to find out whether there is any input device at all.

You can use pointer and any-pointer if you are unsure of certain devices. However, you can ascertain this in combination with the display width whether someone is on the go via smartphone or tablet, or at home with a desktop computer. This allows you to optimize web pages for specific devices accurately.

The feature resolution describes the resolution, which is the density of the pixels on an output medium. If the output medium does not use rectangular pixels (for example, printers), the characteristic may be used only in conjunction with a prefix.

Setting Viewport

The adjustment of the viewport can be very easily customized via an HTML element. You can adjust the viewport of any web site that does not have a standard width. This way you can ensure that content and display area match for narrower layouts, so no unnecessary space is wasted. The site will be shown in the maximum possible size. As seen in Figure 2-4, the left side shows apple.com on a desktop and the right side shows the zoomed section with larger words.

If the site is specifically created or optimized for mobile devices, you do not have to specify a fixed width for the viewport. For example, in portrait format a smartphone has a logical width of 320px, and 480px in landscape mode (physically, the value will be higher). This would mean that the same content would be shown only in a different zoom level in portrait and landscape modes.

The smartphone now has a width of 320px in portrait orientation, so precisely 320px on the site are shown (1:1 ratio). Likewise, 480px will then be shown in landscape orientation. This flexible approach is both device-independent and allows the landscape to have the extra space that makes sense in width.

Figure 2-5 demonstrates the effect. It shows a mobile device with a meta-element in the source code width=device-width (left) and without (right).

Viewport Settings

The Overall Structure of a Page

Settings of the Viewing Area

A definitely requirement here is that the zoom behavior and the scale be used at the beginning. The zoom behavior can be turned off with user-scalable=no. The application then feels a little like a native app on a mobile device. shrink-to-fit is specific for Safari browsers on Apple devices (especially iPads), and helps to prevent the device from applying smart zooming, which usually makes things worse.

Container

Containers of this type provide a solid, centered, and responsive grid. That is, the width adapts in the device’s viewport and then remains stable within a range. The effect is a jump to a new positioning once the range is left or reached. These jump areas are referred to as “breakpoints.” If you already know the concept of software development, note that the breakpoints in Bootstrap have nothing in common with this.

The Grid in Detail

The grid is formed by twelve (12) equal width columns. Predefined classes can be used to place elements on a given column and span a number of columns at a time.

The elements are placed in the columns. Eventually the last column is reached, either by a number of elements or elements that span more than one column. The entirety is called a row. After that, a new row begins. Quite often you will control such rows without the need to fill up all columns. That’s why we use .row classes.

If you use the class .col-xs-4 , you have three juxtaposing decorated elements (3 x 4 = 12). The higher (larger device) definition applies until it is overwritten. If you use class combinations such as col-md-2 col-lg-2, then “md” is not valid for very large devices.

Device-Specific Definitions

Small units with less than 768px will not be defined separately, because this class of device is already the default. The information contained in the variables are defined as follows:

• “xs”: < 576px

• “sm”: ≥ 576px and < 768px

• “md”: ≥ 768px and < 992px

• “lg”: ≥ 992px and < 1200px

• “xl”: ≥ 1200px

The following definitions are pulled from the Sass sources using mixins. You can read more about this technique in the appendix about Sass.

1   @media (min-width: @screen-sm-min) { ... }

2

3   @media (min-width: @screen-md-min) { ... }

4

5   @media (min-width: @screen-lg-min) { ... }

Table 3-2 shows the dimensions of the grid for specific container widths.

Table 3-2

Position of Breakpoints

Symbol	Device width	Container	Width
xs	<576px	automatically	automatically
sm	≥576px	750px	62px
md	≥768px	970px	81px
lg	≥992px	1170px	97px
xl	≥1200px	1570px	112px

The width of the spacing between columns is 30 pixels (15 on each side).

In Listing 3-2, only “md” classes are used. These are only valid as of the width of 970px. The div elements are therefore arranged among each other on small devices—only on desktops with sufficient width. The items appear next to each other.

 1   <div class="container">

 2     <div class="row">

 3       <div class="col-md-1">1</div>

 4       <div class="col-md-1">2</div>

 5       <div class="col-md-1">3</div>

 6       <div class="col-md-1">4</div>

 7       <div class="col-md-1">5</div>

 8       <div class="col-md-1">6</div>

 9       <div class="col-md-1">7</div>

10       <div class="col-md-1">8</div>

11       <div class="col-md-1">9</div>

12       <div class="col-md-1">10</div>

13       <div class="col-md-1">11</div>

14       <div class="col-md-1">12</div>

15     </div>

16     <div class="row">

17       <div class="col-md-8">1-8</div>

18       <div class="col-md-4">9-12</div>

19     </div>

20     <div class="row">

21       <div class="col-md-4">1-4</div>

22       <div class="col-md-4">5-8</div>

23       <div class="col-md-4">9-12</div>

24     </div>

25     <div class="row">

26       <div class="col-md-6">1-6</div>

27       <div class="col-md-6">7-12</div>

28     </div>

29   </div>

Listing 3-2

Pattern Grid (Grid.html)

With few extra styles to illustrate the areas it looks like Figure 3-1.

On a mobile device the same code produces the following screen:

It may happen that mobile devices provide adequate space, or represent some columns side by side. These are further definitions of .col-xs-- and .col-md--added classes.

The first row shows that on small devices every twelve of the first six columns are used. If the screen is bigger only eight or four columns are used (which are then wider). The second set uses 50% of the screen on small devices and 33% on large devices. The third row always uses 50% width, regardless of the size of the device (“sm” scales high when no further definition follows). See Listing 3-3.

 1   <div class="row">

 2     <div class="col-sm-12 col-md-8">12 or 8</div>

 3     <div class="col-sm-6 col-md-4">6 or 4</div>

 4   </div>

 5

 6   <div class="row">

 7     <div class="col-sm-6 col-md-4">50% or 33.4%</div>

 8     <div class="col-sm-6 col-md-4">50% or 33.4%</div>

 9     <div class="col-sm-6 col-md-4">50% or 33.4%</div>

10   </div>

11

12   <div class="row">

13     <div class="col-sm-6">.col-sm-6</div>

14     <div class="col-sm-6">.col-sm-6</div>

15   </div>

Listing 3-3

Pattern Grid (Grid_xs.html)

On a desktop, the code produces the output as shown in Figure 3-3:

On a mobile device the same code (Listing 3-3) produces the output as shown in Figure 3-4:

If more classes are being used, another gradation is possible. Some tablets, for example, could make use of the variant “sm” explicitly. See the example in Listing 3-4.

 1   <div class="row">

 2     <div class="col-12 col-md-6 col-lg-8">

 3       Small: 12 Tablet: 6 Large: 8

 4     </div>

 5     <div class="col-6 col-md-4">

 6       Small: 6 Large: 4

 7     </div>

 8   </div>

 9   <div class="row">

10     <div class="col-6 col-md-4">A Small: 6 Tablet: 4</div>

11     <div class="col-6 col-md-4">B Small: 6 Tablet: 4</div>

12     <div class="col-6 d-md-none">

13       C Small: 6 Tablet: invisible

14     </div>

15   </div>

Listing 3-4

Grid for Different Devices (Grid_Tablet.html)

The limit of 12 columns is not absolute, and contents are never clipped. What does not fit into the grid is simply moved to the next virtual row. Items that are in a column definition will be moved as a whole. Using a nested row with col-sm-2 and col-sm-8 doesn’t work, because once you are in a twelve-column nested grid the col-sm-2 is too small, and the col-sm-8 doesn’t go to the end of the row. The page would appear somehow incomplete.

1   <div class="row">

2     <div class="col-sm-9">9</div>

3     <div class="col-sm-4">4<br>And more content...</div>

4     <div class="col-sm-6">6<br>Then additional columns.</div>

5   </div>

Listing 3-5

Pattern Grid (Grid_Break.html)

In the example in Listing 3-5, nine and four columns are required, but this equals 13 and does not fit twelve-column limit. Therefore, the second element (line 3), spanned by four columns, is moved to the next line. The other element with the six columns simply arrange themselves behind. This results in two rows. The infix “sm” is just an example for small devices; the behavior would appear with any modification. The results can be seen in in Figure 3-6.

Utilizing the Width

To take advantage of the full width, .container-fluid is used in Listing 3-6.

1   <div class="container-fluid">

2     <div class="row">

3       ...

4     </div>

5   </div>

Listing 3-6

Offset Use (Grid_Fluid.html)

The left and right edges of each 15 px is placed so that the item in the container uses the space to the best advantage, as seen in Figure 3-7.

In the following examples, I have dispensed with the container element to keep the code compact. But you must use a container element in practice.

Offsets: Moving the Start Column

Offsets move the starting point of a column to the right (see Listing 3-7 for offset use). This is based on the current horizontal position within the grid. Unoccupied columns already move the starting point, so the offset just adds on to this (see Figure 3-8). Used classes are like .col-xx-offset- (xx is a placeholder for the base widths of the Media Queries or can be left out as a fallback .col-offset-).

 1   <div class="row">

 2     <div class="col-4">4</div>

 3     <div class="col-4 col-offset-4">4 + 4</div>

 4   </div>

 5   <div class="row">

 6     <div class="col-3 col-offset-3">3 + 3</div>

 7     <div class="col-3 col-offset-3">3 + 3</div>

 8   </div>

 9   <div class="row">

10     <div class="col-6 col-offset-3">6 + 3</div>

11   </div>

Listing 3-7

Offset Use (Grid_Offset.html)

Interlace Columns

Containers must not be nested (see Listing 3-8 and Figure 3-9). However, this is allowed in rows. Therefore, subordinate areas can be created. It is not mandatory that such areas fill out their parent’s area, and it must not extend until all twelve columns are used.

 1   <div class="row">

 2     <div class="col-sm-9">

 3       Parent are: 9 columns

 4       <div class="row">

 5         <div class="col-sm-8 col-md-6">

 6           Child 1: 8 or 6

 7         </div>

 8         <div class="col-sm-4 col-md-6">

 9           Child 2: 4 or 6

10         </div>

11       </div>

12     </div>

13   </div>

Listing 3-8

Offset Use (Grid_Nested.html)

Order Columns

If individual columns are to be placed outside their natural order, you can use the class .order-, as shown in Listing 3-9. The columns are pushed to the position, which is an ordinal number.

1   <div class="row">

2     <div class="col-9 order-2">9 + 3 right</div>

3     <div class="col-3 order-1">3 + 9 left</div>

4   </div>

Listing 3-9

Offset Use (Grid_Sorted.html)

The result of Listing 3-8 is shown in Figure 3-10.

If the order was defined only for the size “md,” the mobile device falls back to the arrangement in HTML. See Listing 3-10 and Figure 3-11.

1   <div class="row">

2     <div class="col-9 order-md-2">9 + 3 right</div>

3     <div class="col-3 order-md-1">3 + 9 left</div>

4   </div>

Listing 3-10

Offset Use with Breakpoint (Grid_Sorted.html, part 2)

Equal Distribution

The class can be combined with any of the .col- classes shown earlier. .col-6 will cover six columns, and the .col class spans the remaining space and distributes equally in that space. The breakpoints apply, too. Just use classes such as .col-md, for example.

Sometimes you need more dynamics and want to stretch columns according to the content’s size. Here you can use .col-auto classes, whereas auto replaces the column number. All breakpoint infixes are available.

Row Columns

The responsive .row-cols- classes set the number of columns that best render your content and layout. Whereas normal .col- classes apply to the individual columns, the row columns classes are set on the parent .row. This is a simplification and reduces the number of <div> elements, but it doesn’t provide additional functionality.

The Flex Classes

The classes in this realm do not completely replace the common flexbox rules. That wouldn’t make sense, as the options are many and the effort to learn new names contradicts the advantage of having a common style system. But for simple flexbox applications, it could be easier to use Bootstrap.

After creating a box using this, you can apply the row behavior using .flex-row. If you like to have a vertical flow, just use .flex-column or .flex-column-reverse. Even for these, the breakpoint infixes are applicable.

Within the Flexbox

Display Headings

An alternative form of heading styles comes with the display classes. There are only four such heading styles. The class names are .display-1, .display-2, and so on. The font is slightly larger and the display headings stands a bit more out compared with the regular headings.

The interesting part here is that the actual element doesn’t matter. Whether you apply these classes to a <div> element or even <h1>, the result is the same (see Figure 4-2).

Basic Font

The default font for the text is 16 px. The line height used is 1.15. Sections created with <p> will receive half the row height, about 10 px.

To single out one section, the class .lead is used as shown in Figure 4-3.

1   <p class="lead">Important paragraph...</p>

2   <p>Standard paragraph </p>

Text Elements

Text elements are used for parts of the body text. This is done mainly through HTML and not classes. The elements also serve to strengthen the semantic content. Figure 4-4 shows various semantic elements in the text. The following text elements are explicitly supported:

• <mark></mark>

Highlights part of the text with emphasis thereby showing its importance.

Another tag fits in this category, <small></small>, but it has a less important semantic reference. To achieve a lighter display you can reduce the font size to 85%. To do the opposite of this, you should use <strong></strong>.

Bootstrap supports the continued nonsemantic elements <b></b> and <i></i>. They react in the text similar to <strong></strong> and <em></em>. The element <i></i> is sometimes is used for icons, which do not contain text and therefore ignore the behavior displayed by italic font and enter an element with a certain semantic meaning. However, the behavior and the interpretation is not standard compliant, but more of a stylistic measure.

The <kbd></kbd> element is used to refer to keys of a computer keyboard (<kbd>F12</kbd>).

Elements for Text Blocks

The element <address></address> can make it easy to detect addresses. This element is not formatted. If formatting is to be retained, additional line breaks with <br/> elements are required. See Figure 4-5 for a correctly formatted address.

1   <address>

2     <strong>Twitter, Inc.</strong><br>

3     795 Folsom Ave, Suite 600<br>

4     San Francisco, CA 94107<br>

5     <abbr title="Phone">P:</abbr> (123) 456-7890

6   </address>

The content of the element <address></address> is not limited to an actual address. You can put in anything similar.

1   <address>

2   <strong>Full Name</strong><br>

3   <a href="mailto:#">first.last@example.com</a>

4   </address>

Quotes (<blockquote>) are also semantic and highlight text that refers to something else, such as a quote.

1   <blockquote class="blockquote">

2     <p>Node.js is a modern programming environment.</p>

3   </blockquote>

For the referenced text, if you add the element <cite></cite>, the text is then highlighted. The element <footer></footer> indicates the source.

1   <blockquote class="blockquote">

2     <p>Node.js is a modern programming environment.</p>

3     <footer class="blockquote-footer">Found in

4       <cite title="Introduction to Node,js">Node.js</cite>

5      </footer>

6   </blockquote>

On some screens quotes are not immediately recognizable. They are aligned to the right, so structuring them to the side may help (see Figure 4-6 for a right-aligned quote).

This is the purpose of the class .blockquote-reverse.

1   <blockquote class="blockquote-reverse">

2   ...

3   </blockquote>

Often code is explained on web pages. This will fit best in <code></code> and when it is in a row and in <pre></pre>, the formatting will be maintained over several lines. If you need to refer to variables in the text use the element <var></var>. Use this element in mathematical formulas as well as in the following example and in Figure 4-7.

1   <var>f(x)</var> = <var>m</var><var>x</var> + <var>b</var>

To explain sample output from a program you should use the element <samp></samp>.

Alignment and Wrapping

This also applies for “sm,” “md,” “lg,” and “xl.” Listing 4-2 and Figure 4-8 demonstrate some text alignments.

1   <p class="text-left">Left aligned.</p>

2   <p class="text-center">Text is centered. </p>

3   <p class="text-right">Right aligned.</p>

4   <p class="text-justify">Justified ...</p>

5   <p class="text-nowrap">Obstruction of Upheaval, ...</p>

Listing 4-2

Alignment of Text (Typo_TextAlign.html)

Text Transformations

Transformations convert text from lowercase to uppercase and vice versa. Listing 4-3 and Figure 4-9 provide information on transformations.

• text-lowercase: converts to lowercase.

• text-uppercase: converts to uppercase.

• text-capitalize: first letter of each word is capitalized.

• text-weight-bold: bold without an explicit tag.

• text-weight-normal: normal weight without an explicit tag.

• text-italics: italics without an explicit tag.

Styles for Tables

Tables consist of three parts: header (<thead></thead>), content (<tbody></ tbody>), and footer (<tfoot></tfoot>). The content can occasionally be very long. The readability can be significantly increased by an alternating background color called the “crosswalk effect.” You can reach it with the class .table-striped. Figure 4-12 gives an example of such a table.

1   <table class="table table-striped">

2     ...

3   </table>

The headings of the table are then referenced on the column elements. Figure 4-13 shows a table with column definitions.

1   <table class="table table-bordered table-sm">

2   <colgroup>

3   <col class="success" />

4   <col class="warning" />

5   </colgroup> 6      ...

Note that even the column styles collide with .table-striped. Avoid .table-striped if your columns make color variations.

New in Bootstrap 4

There are new classes in Bootstrap 4: .table-inverse or .thead-inverse, to invert the font color. Figure 4-14 shows an inverted table.

 1   <table class="table table-inverse" >

 2           <thead>

 3             <tr>

 4               <th>Code</th>

 5               <th>Company</th>

 6               <th>Price</th>

 7               <th>Change</th>

 8               <th>In %</th>

 9               <th>Opening</th>

10               <th>Highest</th>

11               <th>Lowest</th>

12               <th>Volume</th>

13             </tr>

14           </thead>

15           <tbody>

16             <tr>

17               <td>MSC</td>

18               <td>Microsoft</td>

19           ...

Particularly interesting is .table-reflow. Using this the block of headlines on the first column is transformed as a pivot table.

 1   <table class="table" >

 2           <thead>

 3             <tr>

 4               <th>Code</th>

 5               <th>Company</th>

 6               <th>Price</th>

 7               <th>Change</th>

 8               <th>In %</th>

 9               <th>Opening</th>

10               <th>Highest</th>

11               <th>Lowest</th>

12               <th>Volume</th>

13             </tr>

14           </thead>

15           <tbody>

16             <tr>

17               <td>MSC</td>

18               <td>Microsoft</td>

19           ...

For this effect, no modification of the table structure is required (see this effect in Figure 4-15).

Responsive Tables

In the strictest sense, responsive tables do not exist. If .table-responsive is used, especially in widths below 768 px, a horizontal scrollbar under the table is created. Figure 4-16 shows a table with a horizontal scrollbar. This will prevent the need for the entire page to scroll horizontally. In addition, it prevents overflow: hidden suppresses all elements that will protrude upward or downward from the table. Caution: This can break or shorten menus or lists and disturb the grid.

1   <table class="table table-responsive">

2     ...

3   </table>

Note

You no longer need to apply .table-responsive as you did with Bootstrap 3 on a surrounding <div>- element.

True Responsive Tables

Bootstrap’s responsive answer to tables with .table-reflow is not always satisfactory. In particular, the behavior is not customizable to fit your needs. Ultimately, the HTML element <table> is not always what you need. Complex tables with many columns, as those in Figure 4-17, cannot condense as necessary.

But the same table could be changed into a list that could be fully responsive, as shown in Figure 4-18.

By now many commercial and free grid components produce their presentations with tables. It is often not possible and involves considerable effort to adapt Bootstrap to these constructs. Fortunately, with CSS3 the tables can be adapted. When that does not work, the next step is HTML 5. JavaScript has additional tweaks for even smoother tables. Listing 4-5 takes the code of the table from Figures 4-14 and 4-15:

 1   <table class="table" id="notable">

 2   <thead>

 3   <tr>

 4     <th>Code</th>

 5     <th>Company</th>

 6     <th>Price</th>

 7     <th>Change</th>

 8     <th>In %</th>

 9     <th>Opening</th>

10     <th>Highest</th>

11     <th>Lowest</th>

12     <th>Volume</th>

13   </tr>

14   </thead>

15   <tbody>

16   <tr>

17     <td data-title="Code">MSF</td>

18     <td data-title="Company">Microsoft</td>

19     <td data-title="Price">$51.38</td>

20     <td data-title="Change">-0.01</td>

21     <td data-title="In %">-0.36%</td>

22     <td data-title="Opening">$51.39</td>

23     <td data-title="Highest">$51.39</td>

24     <td data-title="Lowest">$51.38</td>

25     <td data-title="Volumen">9,395</td>

26   </tr>

27   <tr>

28     <td data-title="Code">APC</td>

29     <td data-title="Company">Apple</td>

30     <td data-title="Price">$95.46</td>

31     <td data-title="Change">-0.03</td>

32     <td data-title="In %">-0.45%</td>

33     <td data-title="Opening">$91.88</td>

34     <td data-title="Highest">$99.15</td>

35     <td data-title="Lowest">$91.38</td>

36     <td data-title="Volume">7,741</td>

37   </tr>

38   </tbody>

39   </table>

Listing 4-5

Very Responsive Table with CSS3 (html)

The matching CSS looks like Listing 4-6. It is effective only through the @mediaelement, when the screen width falls below 768 px.

 1   @media only screen and (max-width: 768px) {

 2

 3   /* Prevents the default behavior of a table */

 4   #notable table,

 5   #notable thead,

 6   #notable tbody,

 7   #notable th,

 8   #notable td,

 9   #notable tr {

10   display: block;

11   }

12

13   /* Hide header */

14   #notable thead tr {

15   position: absolute;

16   top: -9999px;

17   left: -9999px;

18   }

19

20   #notable tr {

21     border: 1px solid #ccc;

22   }

23

24   #notable td {

25   /* Behavior of a number e */

26      border: none;

27      border-bottom: 1px solid #eee;

28      position: relative;

29      padding-left: 50%;

30      white-space: normal;

31      text-align: left;

32   }

33

34   #notable td:before {

35   /* New header */

36      position: absolute;

37   /* Simulation of the distances */

38      top: 6px;

39      left: 6px;

40      width: 145%;

41      padding-right: 10px;

42      white-space: nowrap;

43      text-align: left;

44      font-weight: bold;

45   /* Get headlines from data-title="" */

46      content: attr(data-title);

47   }

48

49   }

Listing 4-6

Very Responsive Table with CSS3 (css)

The only additional expense is the repetitive usage of attributes to determine the labels with data-title=“”. Alternatively, you can (with jQuery) use JavaScript so that the header fields get copied automatically.

 1   $(function () {

 2     var t = [];

 3     $('thead th').each(function () {

 4       t.push($(this).text());

 5     });

 6     $('tbody tr').each(function() {

 7       $(this).find('td').each(function(i, e) {

 8         $(e).attr('data-title', t[i]);

 9       });

10     });

11   });

The script checks for the header fields and creates an array (line 4). Then, it searches for the rows (line 6) and in each row the data-attribute of each element of the array is filled in (line 8).

The repeated declaration of data-title=“Code” is no longer necessary and can be removed completely.

No Bootstrap

The path shown in this section supplements the procedure in Bootstrap, but it is largely independent. The basic design and the distances were, however, taken from Bootstrap. You can use the scripting part without Bootstrap and add styles as needed.

Spacing Classes

The peculiarity of the distance classes is in the relation to the base font size 1rem. The data are therefore relative.

The variables $spacer-x and $spacer-y are standard distance.

A special feature is the class .mx-auto, which sets the horizontal distance to auto, effectively centering an element horizontally.

Sizing Classes

This might have an impact on styles for header or footer parts. Carefully test all usage scenarios before relying on the full height definition.

Shadows

The suffixes “sm” and “lg” refer to the size of the shadow, not the breakpoints. The shadows are traditionally aligned with the virtual light source in the upper left corner. Hence, the shadow is bigger on the right and bottom border. Be aware that the shadow adds additional space to the content area. If the next element comes quite close, this might need additional space or margin room. In that case, use the auxiliary classes shown in the preceding list.

Stretched Link

The interesting part here is that the element itself does not appear bigger; only the clickable area grows. The button in the example remains small (following the content), while the container element will fill 50% of the available space.

Be warned that this could be irritating for users, but also quite convenient, depending on where you use it. Test carefully and let some common users give it a try before you officially release your app.

Simple Classes

Some classes replace the common CSS. For example, the style="position:static" instruction could be written as class="position-static.” This applies to all position parameters. The intention is not to save you typing work (it is exactly the same number of characters). The reason is that the definitions can handle different behaviors of browser engines and allow refinements for other classes that need particular values. So even if there is absolutely no visible effect, it is strongly recommended to use such auxiliary classes instead of basic CSS or your own definitions.

The same goes for .fixed-top and .fixed-bottom, which are also quite simple. They fix an element and prevent it from scrolling with the whole page. If you want an element to scroll but also to stick if the element reaches the border (that is, with the next scroll step it would disappear), the class .sticky-top is your solution.

Simple Form Elements

The outer section is always the element group .form-group. The element is given the .form-control class. The other parts do not require explicit classes. Figure 5-1 shows an example of a simple form.

Single-Line Forms

Single-line forms are available from a width of 768 px and up. “One-line” means that the field name (label), box, and other elements are able to stand side by side, as long as the horizontal space is sufficient. They are preceded by .form-inline . Listing 5-2 is a compact form. The enclosing <form> tag is optional. It may be required by the logic of the page or the browser behavior; it does not make a difference to Bootstrap. The width of the elements with variable expansion is “auto.” Therefore, the width is optimized within the enclosing container. Sometimes it may be necessary to control the width individually. Figure 5-2 shows a form with horizontal orientation.

 1   <form class="form-inline">

 2     <div class="form-group">

 3       <label for="exampleInputName2">Name</label>

 4       <input type="text"

 5              class="form-control"

 6              id="exampleInputName2"

 7              placeholder="The Name">

 8     </div>

 9     <div class="form-group">

10       <label for="exampleInputEmail2">Email</label>

11       <input type="email"

12              class="form-control"

13              id="exampleInputEmail2"

14              placeholder="name@email.com">

15     </div>

16     <div class="form-group">

17       <button type="submit" class="btn btn-secondary float-md-right">

18         Send

19       </button>

20     </div>

21   </form>

Listing 5-2

Compact Form (Form_Inline.html)

Figure 5-3 shows the same form at low screen width.

Listing 5-3 shows the use of invisible text labels. For ordinary users, the watermark (placeholder) is used; however, on other screen readers, the label can be seen. Figure 5-4 shows the form without the label.

 1   <form class="form-inline">

 2     <div class="form-group">

 3      <label class="sr-only" for="exampleInputEmail">

 4        E-Mail

 5      </label>

 6      <input type="email" class="form-control"

 7             id="exampleInputEmail" placeholder="Email">

 8     </div>

 9     <div class="form-group">

10       <label class="sr-only" for="exampleInputPassword">

11         Password

12       </label>

13       <input type="password" class="form-control"

14              id="exampleInputPassword" placeholder="Password">

15     </div>

16     <div class="form-group form-check">

17       <input type="checkbox" class="form-check-input">

18       <label class="form-check-label sr-only"> Remember</label>

19     </div>

20     <button type="submit" class="btn btn-secondary">

21       Logon

22     </button>

23   </form>

Listing 5-3

Form with Watermarks and Screen Readers

Form Elements with Blocks

Input fields, especially those for text entry, can be supplemented for left or right text, icons, or buttons. This is particularly interesting when the values have units. Use the class .input-group with .input-group-append or .input-group-prepend to display elements before or after, using .formcontrol to create it. This works very well with all the <input>-elements and with limited success with <select>, but not with <textarea>.

The columns of the grid classes cannot mix with the input groups. Instead, the entire input group should be placed in a container if they are required, which in turn is provided with pitches.

Labels are always useful. Even if there is no need for a specific layout, screen readers are supported. In Listing 5-4 and Figure 5-5 the use of .sr-only is reattached to achieve this.

 1   <div class="input-group">

 2      <div class="input-group-prepend">

 3         <span class="input-group-text" id="basic-addon1">@</span>

 4      </div>

 5      <input type="text" class="form-control" placeholder="User" />

 6   </div>

 7

 8   <div class="input-group">

 9     <input type="text" class="form-control" placeholder="Email" />

10       <div class="input-group-append">

11         <span class="input-group-text" id="basic-addon2">

12            @example.de

13         </span>

14       </div>

15   </div>

16

17   <div class="input-group">

18     <div class="input-group-prepend">

19       <span class="input-group-text">€</span>

20     </div>

21     <input type="text" class="form-control" aria-label="Amount (in EUR)" />

22     <div class="input-group-append">

23       <span class="input-group-text">.00</span>

24     </div>

25   </div>

Listing 5-4

Fields (Toolbar_Inputgroups.html)

Sizes

Variable sizes can be set relative to the usual four stages. This happens to the entire group, so that individual fields do not always have to be equipped with the class. Listing 5-5 and Figure 5-6 shows the sizes of the input fields.

 1   <div class="input-group input-group-lg">

 2     <div class="input-group-prepend">

 3        <span class="input-group-text" id="sizing-addon1">@</span>

 4     </div>

 5     <input type="text" class="form-control form-control-lg" placeholder="Username"/>

 6   </div>

 7

 8   <div class="input-group">

 9     <div class="input-group-prepend">

10       <span class="input-group-text" id="sizing-addon2">@</span>

11     </div>

12     <input type="text" class="form-control" placeholder="Username" />

13   </div>

14

15   <div class="input-group input-group-sm">

16      <div class="input-group-prepend">

17        <span class="input-group-text" id="sizing-addon3">@</span>

18      </div>

19      <input type="text" class="form-control form-control-sm" placeholder="Username" />

20   </div>

Listing 5-5

Sizes of the Input Fields (Toolbar_InputSize.html)

Dealing with Checkboxes and Radio Buttons

To have a useful function, JavaScript is absolutely necessary here—for example, to activate the input box as seen in Figure 5-7.

Additional Buttons

Buttons in box groups are treated the same way. They require another nesting of HTML elements based on the class .input-group-btn , which is shown in Listing 5-7 and Figure 5-8.

 1   <div class="row">

 2     <div class="col-lg-6">

 3       <div class="input-group">

 4         <span class="input-group-prepend">

 5           <button class="btn btn-secondary" type="button">

 6             Go!

 7           </button>

 8         </span>

 9         <input type="text" class="form-control" placeholder="Search for ..." />

10       </div>

11     </div>

12     <div class="col-lg-6">

13       <div class="input-group">

14         <input type="text" class="form-control" placeholder="Search for..." />

15         <span class="input-group-append">

16           <button class="btn btn-secondary" type="button">

17             Go!

18           </button>

19         </span>

20       </div>

21     </div>

22   </div>

Listing 5-7

Fields with Buttons (Toolbar_InputBtn.html)

The buttons in turn can be provided with pop-up menus, as illustrated in Listing 5-8 and Figure 5-9.

 1   <div class="row">

 2     <div class="col-lg-6">

 3       <div class="input-group">

 4         <div class="input-group-prepend">

 5           <button type="button"

 6                   class="btn btn-secondary dropdown-toggle"

 7                   data-toggle="dropdown"

 8                   aria-haspopup="true" aria-expanded="false">

 9             Selection

10           </button>

11           <div class="dropdown-menu">

12             <a class="dropdown-item" href="#">Detail</a>

13             <a class="dropdown-item" href="#">Copy</a>

14             <a class="dropdown-item" href="#">Move</a>

15             <div role="separator" class="dropdown-divider"></div>

16             <a class="dropdown-item" href="#">Delete</a>

17           </div>

18         </div>

19         <input type="text" class="form-control" aria-label="...">

20       </div>

21     </div>

22     <div class="col-lg-6">

23       <div class="input-group">

24         <input type="text" class="form-control" aria-label="...">

25         <div class="input-group-append">

26           <button type="button"

27                   class="btn btn-secondary dropdown-toggle"

28                   data-toggle="dropdown"

29                   aria-haspopup="true" aria-expanded="false">

30             Selection

31           </button>

32           <div class="dropdown-menu dropdown-menu-right">

33             <a class="dropdown-item" href="#">Detail</a>

34             <a class="dropdown-item" href="#">Copy</a>

35             <a class="dropdown-item" href="#">Move</a>

36             <div role="separator" class="dropdown-divider"></div>

37             <a class="dropdown-item" href="#">Delete</a>

38           </div>

39         </div>

40       </div>

41     </div>

42   </div>

Listing 5-8

Fields with Menus (Toolbar_DropDownGroup.html)

Likewise, dividing buttons into segments is possible, as shown in Listing 5-9 and Figure 5-10.

 1   <div class="input-group">

 2     <div class="input-group-btn">

 3       <button class="btn btn-success">Enable</button>

 4     </div>

 5     <input type="text" class="form-control" aria-label="...">

 6   </div>

 7

 8   <div class="input-group">

 9     <input type="text" class="form-control" aria-label="..." />

10     <div class="input-group-btn">

11       <button class="btn btn-warning">Disable</button>

12     </div>

13   </div>

Listing 5-9

Fields with Segment Buttons (Toolbar_InputBtnForm.html)

Here the class .input-group is used. The label (lines 3 to 5) appears only on screen readers, but otherwise remains invisible. Figure 5-11 shows the form with no label. The “extras” before and after the element are to be decorated with .input-group-addon.

Horizontal Forms

In Figure 5-12 the labels are to the left of the elements. When you are working with layouts with narrow widths (in the figure the width is > 768 px), you must go back to the previously shown scheme about placed labels.

Input Elements

Select Elements

Lists and drop-down menus can be used as usual. However, some browsers turn to internal styles that cannot be influenced with CSS. It could be that menus are a better choice to get full control over the design.

Static Texts in Forms

Help texts and static blocks are provided with .form-control-static by a defined section <p>. Listing 5-14 shows static elements in the layout and Figure 5-15 shows the static elements in a horizontal layout. Listing 5-15 shows the display fields (help texts) and Figure 5-16 shows static elements with additional text in horizontal layout.

 1   <form class="row">

 2      <div class="form-group">

 3        <label class="col-2 form-control-label">eMail</label>

 4          <div class="col-10">

 5            <p class="form-control-static">email@example.com</p>

 6          </div>

 7      </div>

 8      <div class="form-group">

 9         <label for="inputPassword" class="col-2 form-control-label">Password</label>

10           <div class="col-10">

11             <input type="password" class="form-control" id="inputPassword"

12                    placeholder="Password" />

13          </div>

14      </div>

15   </form>

Listing 5-14

Static Elements in the Layout (Form_Help.html)

Behavior of the Form Elements

If you use <fieldset> and disabled, you can block several elements together. However, the blocking of the user actions relates only to regular form elements (see Listing 5-16 and Figure 5-17). Hyperlinks are not blocked. If hyperlinks are formatted as buttons (<a ... class=“btn btn-*”>), however, they act more like links. The desired effect can be done with JavaScript. However, Bootstrap works only with a gray appearance.

 1   <form>

 2     <fieldset disabled>

 3       <div class="form-group">

 4         <label for="disabledTextInput">Disabled Field</label>

 5         <input type="text" id="disabledTextInput"

 6                class="form-control" placeholder="Disabled field" />

 7       </div>

 8       <div class="form-group">

 9         <label for="disabledSelect">Disabled Menu</label>

10         <select id="disabledSelect" class="custom-select">

11           <option>Option A Disabled</option>

12           <option>Option B Disabled</option>

13         </select>

14       </div>

15       <div class="form-check">

16         <input type="checkbox" class="form-check-input" />

17         <label class="form-check-label">Checkbox</label>

18       </div>

19       <button type="submit" class="btn btn-primary">Send</button>

20     </fieldset>

21   </form>

Listing 5-16

Locked Fields (Form_Disabled.html)

In particular, the behavior of drop-down lists is different. Unlike disabled, the user can select from the elements and view them. A selection of data when sending the readonly form still does not succeed. Figure 5-18 shows a read-only form.

Validation Information in Forms

Bootstrap supports HTML 5 validation states. These are represented by the HTML 5 pseudoclasses such as :invalid or :valid. If it is not possible to use these for some reason, a fallback is available using the regular classes .is-invalid and .is-valid. The limitation to just two states, valid and invalid, is different from Bootstrap 3, where a third state, “warning” was available. If you need such states, use regular form elements with icons and semantic classes.

Elements that have either of the classes .form-control or .form-text can be modified to match their status (see Listing 5-18 and Figure 5-19).

As an option, use states with upgraded symbols. This can be accomplished with .valid-feedback or .invalid-feedback and a symbol on the right end of the message areas. These icons will only work if <input class=“form-control”> is used.

An additional font library is not required, and the styling shown is the default behavior. The JavaScript in the previous example is just to prevent the browser from reloading the page and invoke the validation process. The effect is shown in Figure 5-20. There is, however, no actual validation, and you must add custom code to have full validation support.

Listing 5-20 depicts a form with a success and error message (see Figure 5-21) in a slightly different form. Here we use the tooltip approach that overlays the text.

 1   <form class="needs-validation" novalidate>

 2     <div class="form-group position-relative">

 3         <label for="inputEmail">Email</label>

 4         <input type="email" class="form-control is-valid" id="inputEmail"

 5                placeholder="Email" value="joerg@krause.net" required>

 6         <div class="valid-tooltip">Your email address looks good.</div>

 7     </div>

 8     <div class="form-group position-relative">

 9         <label for="inputPassword">Password</label>

10         <input type="password" class="form-control is-invalid" id="inputPassword"

11                placeholder="Password" required>

12         <div class="invalid-tooltip">Password not recognized.</div>

13     </div>

14     <button type="submit" class="btn btn-primary">Sign in</button>

15   </form>

Listing 5-20

Semantic Messages (Form_Success.html)

The overlapping tooltip might require additional styling to justify the margins. This is an option if the space is somehow limited and dynamically visible error messages destroy the form’s layout.

Form Elements in the Grid

Use the usual techniques when formatting width and height. For the width make use of the grid, with classes such as .col-3 or .col-5 (see Listing 5-22 and Figure 5-22). Adjust the setting for specific breakpoints by using the common infix values, such as .col-md-2 or .col-lg-5.

 1   <div class="row">

 2     <div class="col-2">

 3       <input type="text"

 4              class="form-control"

 5              placeholder="2 columns">

 6     </div>

 7     <div class="col-3">

 8       <input type="text"

 9              class="form-control"

10              placeholder="3 columns">

11     </div>

12     <div class="col-4">

13       <input type="text"

14              class="form-control"

15              placeholder="4 columns">

16     </div>

17   </div>

Listing 5-22

Arrangement in the Grid (Form_Grid.html)

Adaptation of the Field Height

There are two classes for controlling height: .form-group-sm and .form-group-lg (see Listing 5-23 and Figure 5-23).

 1      <div class="form-group">

 2          <input class="form-control form-control-lg"

 3                 type="text" placeholder="Big">

 4        </div>

 5        <div class="form-group">

 6          <input class="form-control"

 7                 type="text" placeholder="Normal">

 8        </div>

 9        <div class="form-group">

10           <input class="form-control form-control-sm"

11                  type="text" placeholder="Small">

12        </div>

13        <div class="form-group">

14          <select class="custom-select form-control-lg">

15             <option>1</option>

16             <option>2</option>

17             <option>3</option>

18          </select>

19        </div>

20        <div class="form-group">

21          <select class="custom-select">

22             <option>1</option>

23             <option>2</option>

24             <option>3</option>

25          </select>

26        </div>

27        <div class="form-group">

28          <select class="custom-select form-control-sm">

29            <option>1</option>

30            <option>2</option>

31            <option>3</option>

32          </select>

33       </div>

34     </form>

Listing 5-23

Size of the Elements (Form_ElementsSize.html)<form>

The size of horizontal running forms can be controlled globally. For this purpose, the class .form-horizontal can use either class .form-group-lg or .form-group-sm (see Listing 5-24 and Figure 5-24).

 1   <form>

 2     <div class="form-group row">

 3       <label class="col-2 form-control-label"

 4              for="formGroupInputLarge">Big Label</label>

 5       <div class="col-10">

 6         <input class="form-control form-control-lg" type="text"

 7                id="formGroupInputLarge" placeholder="Big input">

 8       </div>

 9     </div>

10     <div class="form-group row">

11       <label class="col-2 form-control-label small"

12              for="formGroupInputSmall">Small Label</label>

13       <div class="col-10">

14         <input class="form-control form-control-sm" type="text"

15                id="formGroupInputSmall" placeholder="Small input">

16       </div>

17     </div>

18   </form>

Listing 5-24

Size of the Elements (Form_ElementsSizeHor.html)

Help Text in Forms

Help texts for forms are often needed (see Listing 5-25 and Figure 5-25). There is one for display and one for screen readers to support accessible pages. For these to work, the matching aria attributes (attributes that support the ARIA standard start with the prefix “aria-”) should always be used with the Bootstrap classes together.

 1   <form>

 2     <div class="form-group form-group-lg">

 3       <label for="inputHelpBlock">Your input</label>

 4          <input type="text" id="inputHelpBlock" class="form-control"

 5             aria-describedby="helpBlock">

 6          <span id="helpBlock" class="text-black-50 small">

 7             You can enter something here.

 8          </span>

 9     </div>

10   </form>

Listing 5-25

Help Text in Forms (Form_ElementsHelp.html)

Use any of the .text-* classes to style the help text according to your needs.

Semantic Buttons

Buttons are available in seven variants with the following semantic expressions (see Listing 5-27 and Figure 5-27).

• Primary: raises the main function, visual effect by blue color amplified.

• Secondary: standard, gray, general function.

• Success: success, green, positive, or affirmative action.

• Info: information, azure, clarified highlighting critical or special actions.

• Warning: warning, orange, critical or complex action, should be taken with caution.

• Danger: danger, red, dangerous or irreversible action, negative.

• Link: formats a button as a link, often referred to as reduced action, additional behavior.

Assigning semantic meanings on the color labels may be restricted by size in some environments. Additional labels, which are equipped with .sr-only, should emphasize the intended effect.

States

The disabled state indicates that the button cannot be pressed. For this, the HTML attribute disabled is used. Figure 5-31 shows various states of a button as shown in Listing 5-31.

 1   <form>

 2       <button type="button" class="btn btn-primary btn-lg active">Primary</button>

 3       <button type="button" class="btn btn-secondary btn-lg active">Secondary</button>

 4       <hr/>

 5       <a href="#" class="btn btn-primary btn-lg active" role="button">Primary</a>

 6       <a href="#" class="btn btn-secondary btn-lg active" role="button">Link</a>

 7       <hr />

 8       <button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary</button>

 9       <button type="button" class="btn btn-secondary btn-lg" disabled="disabled">Secondary</button>

10       <hr />

11      <a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary</a>

12      <a href="#" class="btn btn-secondary btn-lg disabled" role="button">Link</a>

13    </form>

Listing 5-31

The States for Buttons Use the Same Class

Alternatives