Professional Documents
Culture Documents
Introducing Bootstrap 4 Create Powerful Web Applications Using Bootstrap 4 5 Second Edition Jorg Krause Krause Jörg
Introducing Bootstrap 4 Create Powerful Web Applications Using Bootstrap 4 5 Second Edition Jorg Krause Krause Jörg
https://textbookfull.com/product/introducing-bootstrap-4-create-
powerful-web-applications-using-bootstrap-4-5-second-edition-
joerg-krause/
https://textbookfull.com/product/developing-web-components-with-
typescript-native-web-development-using-thin-libraries-1st-
edition-jorg-krause-krause/
https://textbookfull.com/product/developing-web-components-with-
typescript-native-web-development-using-thin-libraries-1st-
edition-jorg-krause-krause-jorg/
https://textbookfull.com/product/mastering-bootstrap-4-second-
edition-benjamin-jakobus-jason-marah/
Responsive Web Design by Example Embrace responsive
design with HTML5 CSS3 JavaScript jQuery and Bootstrap
4 Hussain
https://textbookfull.com/product/responsive-web-design-by-
example-embrace-responsive-design-with-html5-css3-javascript-
jquery-and-bootstrap-4-hussain/
https://textbookfull.com/product/programming-web-applications-
with-node-express-and-pug-1st-edition-jorg-krause-auth/
https://textbookfull.com/product/windows-server-2016-cookbook-
second-edition-krause/
https://textbookfull.com/product/an-introduction-to-
psychological-science-second-canadian-edition-mark-krause/
https://textbookfull.com/product/bootstrap-essentials-1st-
edition-bhaumik-snig/
Jö rg Krause
Introducing Bootstrap 4
Create Powerful Web Applications Using Bootstrap
4.5
2nd ed.
Jö rg Krause
Berlin, Germany
© Jö rg Krause 2020
Standard Apress
The publisher, the authors and the editors are safe to assume that the
advice and information in this book are believed to be true and
accurate at the date of publication. Neither the publisher nor the
authors or the editors give a warranty, express or implied, with respect
to the material contained herein or for any errors or omissions that
may have been made. The publisher remains neutral with regard to
jurisdictional claims in published maps and institutional affiliations.
Distributed to the book trade worldwide by Springer Science+Business
Media New York, 233 Spring Street, 6th Floor, New York, NY 10013.
Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail orders-
ny@springer-sbm.com, or visit www.springeronline.com. Apress
Media, LLC is a California LLC and the sole member (owner) is Springer
Science + Business Media Finance Inc (SSBM Finance Inc). SSBM
Finance Inc is a Delaware corporation.
Table of Contents
Chapter 1:Introduction to Bootstrap
Where to Obtain Bootstrap
Content Delivery Network
Repository for Local Installation
Installation Using Npm
Structure of the CSS Files
Page-building
Browser Support
ARIA
HTML5:The Role-Attribute
Optimization
What’s New in Bootstrap 4?
Global Changes
Grid System
Tables
Forms
Buttons
Pull-Down Menus
Panels
Other Updates
Summary
Chapter2:It Begins with CSS
Basics
Syntax
Selector
Elements (Tags)
IDs
Classes
Attributes
Logical Selection
More Selectors
Units
Absolute Units
Relative Units
The Box Model
Blocks of the Box
Box Model Extensions
The Flexbox Model
Terminology
The Grid Model
Terminology
Grid Container Properties
Grid Item Properties
Compliance with Media
Syntax
Parameters
The Viewport
Setting Viewport
Viewport Settings
Summary
Chapter 3:Structure of the Page
Basis for the Grid
The Overall Structure of a Page
Settings of the Viewing Area
The Grid System
Container
The Grid in Detail
Fallbacks and Utilities
Equal Distribution
Row Columns
Alignments
Auxiliary Classes
The Flex Classes
Within the Flexbox
Summary
Chapter 4:Typography
Headings
Display Headings
Text and Text Elements
Basic Font
Text Elements
Alignment and Wrapping
Text Transformations
Lists
Tables
Styles for Tables
Auxiliary Classes
Spacing Classes
Sizing Classes
Shadows
Stretched Link
Simple Classes
Summary
Chapter 5:Forms
Structure of a Form
Simple Form Elements
Single-Line Forms
Form Elements with Blocks
Sizes
Dealing with Checkboxes and Radio Buttons
Additional Buttons
Horizontal Forms
Input Elements
Input Element Syntax
Select Elements
Static Texts in Forms
Behavior of the Form Elements
Validation Information in Forms
Form Elements in the Grid
Adaptation of the Field Height
Help Text in Forms
Buttons
Semantic Buttons
Size and Appearance
States
Summary
Chapter 6:Images, Effects, and Icons
Icons
Alternatives
Use of Symbols
Use of Buttons
Messages
Common Symbols
Responsive Images
Embedded Sources
Colors and Backgrounds
Text Color
Background Color
Alignment of Elements in Flow
Aligning Text
Wrapping and Overflow
Transformation and Font Weight
Break:Clearfix
Show and Hide Content
Printer Support
Summary
Chapter 7:Components
Requirements
Drop-Down Menus
Alignment of the Menu
Decorative Elements
Toolbars
Vertical Alignment
General Options
Menu Button
Simple Button with Menu
Split-Button Menu
Sizes of Menu Buttons
Special Menu Options
Navigation
Tabs
Navigation Buttons (Pills)
Universal Settings
Expansion Through Pop-Up Menus
Navigation Bar
Form Elements
Buttons, Hyperlinks, and Text
Breadcrumb Navigation
Page Scrolling
Size
Identification Labels (Badges)
Big Screen (Jumbotron)
Page Headers
Messages
Progress Bar
Media
Orientation
Media Lists
Common Lists
Badges in Lists
Links in Lists
Buttons in Lists
Cards
Headings
Footers
Cards with Tables
Cards with Lists
Card with Pictures
Cards in the Grid
Summary
Chapter 8:Active Components
Setup and Activation
The Programming Interface
Conflict Prevention
Events
Transitions
Modal Dialogs
Features
Dialog Sizes
Dialog with Grid
General Information About Behavior
Options
Pull-Down Menu (Drop-Down)
Common Information About Behavior
Options
Scroll Bar Supervisor (ScrollSpy)
Features
Options
Reversible Tabs (Tab)
Features
Options
Tooltip
Features
Multiline Links
General Tips
Options
Content Overlay (Popover)
Features
Options
Message (Alert)
Features
Options
Action Buttons (Button)
Features
Options
Content Insertion (Collapse)
Features
Options
Image Roundabout (Carousel)
Features
Options
Summary
Appendix:A Gentle Introduction to Sass
How It Works
First Steps
Using Sass in Applications
Interactive Sass
Variables
Nesting Styles
Operators
Interpolation
Functions
Modularization
Partials
Mixins
Summary
Index
About the Author
Jörg Krause
has been working with software and
software technology since the early
1980s, beginning with a Sinclair and
taking his first steps as a programmer in
BASIC and assembly language. He
studied Information Technology at
Humboldt University, Berlin, but left
early, in the 1990s, to start his own
company. He has worked with Internet
technology and software development
since the early days when CompuServe
and FidoNet dominated. In 1998, he
worked on one of the first commercial e-
commerce solutions, and wrote his first
book in Germany. Due to its wide
success, he started working as a
freelance consultant and author in order
to share his experience and knowledge with others. He has written
several books with Apress, Hanser, Addison Wesley, and other major
publishers along with several self-published books—a total of over
sixty titles. He also publishes articles in magazines and speaks at major
conferences in Germany. Currently, Jö rg works as an independent
consultant, software developer, and author in Berlin. The main focus is
web development (nowadays called full-stack), cloud native
architectures, and web security. In his occasional spare time, Jö rg
enjoys reading thrillers and science fiction novels, and playing a round
of golf.
About the Technical Reviewer
Kirti Mahadane
is a freelance web professional based in
India. Since 2015, she has been active in
front-end development technologies
including Bootstrap. She is particular in
writing clean code.
© Jö rg Krause 2020
J. Krause, Introducing Bootstrap 4
https://doi.org/10.1007/978-1-4842-6203-0_1
1. Introduction to Bootstrap
Jö rg Krause1
(1) Berlin, Germany
Bootstrap 4.5 is the latest version of the Bootstrap framework, formerly known as Twitter Bootstrap. It was
built by Twitter for the mobile-first apps. It’s a complete and easy-to-use system of styles that helps deal
with the daily tasks of a web developer. Compared with other CSS frameworks, the biggest advantage of
Bootstrap is the huge selection of additional templates, themes, and boilerplate code. It makes it very easy
and fast to create a sophisticated web site without a design agency or without having any professional
design skills. There are also endless additions and extensions available to fill the rare gaps. Moreover,
Bootstrap can handle desktop web sites and mobile device pages equally as well, so it’s really a one-stop
solution.
Table 1-1 Current Browser Support
Chrome > 45 Firefox > 38 Edge > 12 Opera > 30 Safari > 9
Android OK OK OK Not possible N/A
iOS OK N/A OK Not possible OK
MacOS X OK OK OK OK OK
Windows OK OK OK OK Not possible
1 <link rel="stylesheet"
2 href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootst
3 integrity="sha384-
9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
4 crossorigin="anonymous">
5 <script
6 src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstra
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.
The syntax looks like this:
1 .class { }
1 <style>
2 .btn {
3 color: red;
4 }
5 </style>
6 <button class="btn">Save</button>
7 <button class="btn">Abort</button>
Attributes
Attributes can be referenced using the following syntax:
1 [name] { }
2 [name="value"] { }
1 <style>
2 [data-item] {
3 color: blue;
4 }
5 </style>
6 <button data-item="22">Next</button>
If the value of the attribute (to the right of the = sign) is not
specified, only the existence of the attribute is considered sufficient to
apply the rules. If you specify the value, the quotes must be written, too.
1 [data-item="22"] {
2 color: blue;
3 }
Logical Selection
It often happens that rulesets are to be applied to multiple selectors.
For this purpose, OR logic is required, which is indicated by a comma in
CSS:
1 a, b { }
1 .a .b { } .a.b { }
1 <style>
2 .a .b {
3 color: red;
4 }
5 .c.d {
6 color: green;
7 }
8 </style>
9 <div class="a b">
10 A and B
11 <div class="a">A</div>
12 <div class="b">B</div>
13 </div>
14 <div class="c d">C and D</div>
15 <div class="c">C</div>
Another random document with
no related content on Scribd:
aside; and what was a greater Misfortune, the Prince and his
Retinue beheld with winking Eyes, all their Hovels on fire ashore:
The Occasion this; we happening to have all our Colours flying, and
some Guns let off in honour of the 28th of May, another Leader on
shore misinterpreting it as a particular Respect to Jacobus, grew
jealous, seized his House during the Revel, his Wives, and his
Dashees, drank up all his Brandy, eat all his Victuals, cudgelled his
People, and set both his Houses on fire.
Next Morning, on unravelling the Mystery, the Surprize was over,
and all became good Friends again. They have very little Knowledge
or Use of Fire-Arms, because no Trade scarce; their Weapons being
Spears, Arrows, and Clubs, and it is a bloody Battle among them,
when half a dozen of a side are knocked down.
A
V O YA G E
TO
Brasil, and the West-Indies.
From Cape Lopez (parting with the Coast) we came in sight of the
Island Annabona, the Breezes small at South, and Calms
alternatively; hereabout we cruised three or four days, for our
Consort the Swallow, that some how or other was separated; and
missing her, bore away for Brasil.
In the Passage it may be first observed, that when we had sailed
ninety Leagues to the Westward, and got into 3°° S. the Winds that
were at South veered, so as to become a true S E. Trade, that
carried us four or five Knots.——And still as we advanced farther
Westward, it blew fresher at E S E. 7, 8, and 9 Knots constantly, with
neither Thunder nor Lightning. Quære, whether this distance is not a
proper Medium to allow for the Attraction of all Exhalations by the
Land; at least that they considerably abate after that length from all
Shores, allowing for Latitude, and as they are Montainous or Plain.
We see within this Dimension, (plainly) that it takes off the Influence
of the Sun, and varys the Trade Wind towards itself: Nor is it so
astonishing, since Animals themselves obey; several sorts of Fish
and Fowl have a periodical return to such and such places, and not
so of those inhabiting the more stable Element of Land: Wherefore it
is highly rational to think, that as the fluid Elements they live in yield
to the attractive Power of the Earth and Planets, so also their
Inhabitants have their Instinct more sensibly fated by them.
Secondly, in this Trade-Wind sailing, we are every day diverted
with flying Fish, Bonetos, and Sea-Fowl; the Sails require little labour
in trimming, the Ship goes steady, and the Bowl unslung; so that at
leaving such a Country we might cheerfully sing,
Sold,
Salt Beef and Pork, 40 Shillings for a
Cask of 2 Cwt.
Bisket, 17s. per hundred
Candles, 6½ per lb. &c.
Exchange 30 per Cent. or more.
I have heard that the Custom-house Books had one year 35000
Hogsheads of Sugar entred, which at 10l. per Hogshead, amounts to
350000l. Every Acre was supposed 10s. a year Profit to the national
Stock of England, besides what the Planter got, and Mouths fed by
it; but I must observe, the Crops of late years have very much failed,
and put many of them under great Necessities. The Soil fertile in the
Age past, seems now growing old, and past its teeming-time; they
endeavour to mend this by a few Cattle kept for the sake of Manure;
few, I say, because Land imploy’d this way, gives not 1/10 its Value.
Wherefore when a thoughtless Man has joined to unlucky Events
and Seasons an inadvertent way of living, he falls a Prey to the more
astronomical Heads of Factors, who supply him with Food and
Necessaries. The Hardships of many Planters at this time, through
such Inclemencies, cannot be better laid open to the Reader, than in
transcribing part of a Sermon, that I am informed was preached by
Command of his Excellency the Governor, May 1734.
A Charity S e r m o n at Bridgetown,
for the two Parishes, St. Philip, and Christ-Church.