web application development - george corser · easy to use: anybody with just basic knowledge of...
TRANSCRIPT
Get Started 1
2
Web Application Development
3
Bootstrap is a free front-end framework for faster and easier web development
Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins
Bootstrap also gives you the ability to easily create responsive designs
What is Bootstrap?
4
What is Responsive Web Design?Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.
Bootstrap 4 is the newest version of Bootstrap; with new components, faster stylesheet and more responsiveness.
Bootstrap 4 supports the latest, stable releases of all major browsers and platforms. However, Internet Explorer 9 and down is not supported.
Bootstrap 3 vs. Bootstrap 4
5
If you require IE8-9 support, use Bootstrap 3. It is the most stable version of Bootstrap, and it is still supported by the team for critical bugfixes and documentation changes. However, no new features will be added to it.
Dropped icon support: Bootstrap 4 does not support BS3 Glyphicons. Use Font-Awesome or other icon libraries instead.
Advantages of Bootstrap:
Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap
Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
Mobile-first approach: In Bootstrap, mobile-first styles are part of the core framework
Browser compatibility: Bootstrap 4 is compatible with all modern browsers (Chrome, Firefox, Internet Explorer 10+, Edge, Safari, and Opera)
Why Use Bootstrap
6
If you don't want to download and host Bootstrap 4 yourself, you can include it from a CDN (Content Delivery Network).
MaxCDN provides CDN support for Bootstrap's CSS and JavaScript. You must also include jQuery:
MaxCDN:<!-- Latest compiled and minified CSS --><link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library --><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS --><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
Bootstrap 4 CDN
7
One advantage of using the Bootstrap 4 CDN:Many users already have downloaded Bootstrap 4 from MaxCDN when visiting another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time. Also, most CDN's will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time.
jQuery and Popper?Bootstrap 4 use jQuery and Popper.js for JavaScript components (like modals, tooltips, popovers etc). However, if you just use the CSS part of Bootstrap, you don't need them.
Bootstrap 4 CDN Continued
8
Components that require jQuery:
Closable alerts
Buttons and checkboxes/radio buttons for toggling states
Carousel for slides, controls, and indicators
Collapse for toggling content
Dropdowns (also requires Popper.jsfor perfect positioning)
Modals (open and close)
Navbar (for collapsible menus)
Tooltips and popovers (also requires Popper.js for perfect positioning)
Scrollspy for scroll behavior and navigation updates
Popper.js is a positioning engine, its purpose is to calculate the position of an element to make it possible to position it near a given reference element. The engine is completely modular and most of its features are implemented as modifiers (similar to middlewares or plugins).
Popper.js has zero dependencies.
Tutorial video (3 minutes): https://www.youtube.com/watch?v=V1JOH4kS6Pc
9
Web Application Development
10
Bootstrap's grid system is built with flexbox and allows up to 12 columns across the page.If you do not want to use all 12 columns individually, you can group the columns together to create wider columns:
The grid system is responsive, and the columns will re-arrange automatically depending on the screen size.Make sure that the sum adds up to 12 or fewer (it is not required that you use all 12 available columns).
Bootstrap 4 Grid System
11
The Bootstrap 4 grid system has five classes: .col- (extra small devices - screen width less than 576px) .col-sm- (small devices - screen width equal to or greater than 576px) .col-md- (medium devices - screen width equal to or greater than 768px) .col-lg- (large devices - screen width equal to or greater than 992px) .col-xl- (xlarge devices - screen width equal to or greater than 1200px)
The classes above can be combined to create more dynamic and flexible layouts.
Tip: Each class scales up, so if you wish to set the same widths for sm and md, you only need to specify sm.
Grid Classes
12
The following is a basic structure of a Bootstrap 4 grid:
<!-- Control the column width, and how they should appear on different devices --><div class="row"><div class="col-*-*"></div><div class="col-*-*"></div>
</div><div class="row"><div class="col-*-*"></div><div class="col-*-*"></div><div class="col-*-*"></div>
</div>
<!-- Or let Bootstrap automatically handle the layout --><div class="row"><div class="col"></div><div class="col"></div><div class="col"></div>
</div>
Basic Structure of a Bootstrap 4 Grid
13
First example: create a row (<div class="row">). Then, add the desired number of columns (tags with appropriate .col-*-* classes). The first star (*) represents the responsiveness: sm, md, lg or xl, while the second star represents a number, which should add up to 12 for each row.
Second example: instead of adding a number to each col, let bootstrap handle the layout, to create equal width columns: two "col" elements = 50% width to each col. three cols = 33.33% width to each col. four cols = 25% width, etc. You can also use .col-sm|md|lg|xl to make the columns responsive.
On the next slides we have collected some examples of basic Bootstrap 4 grid layouts.
Basic Structure of a Bootstrap 4 Grid Continued
14
The following example shows how to create three equal-width columns, on all devices and screen widths:
<div class="row"><div class="col">.col</div><div class="col">.col</div><div class="col">.col</div>
</div>
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_grid_ex&stacked=h
Three Equal Columns
15
The following example shows how to create four equal-width columns starting at tablets and scaling to extra large desktops. On mobile phones or screens that are less than 576px wide, the columns will automatically stack on top of each other:
<div class="row"><div class="col-sm-3">.col-sm-3</div><div class="col-sm-3">.col-sm-3</div><div class="col-sm-3">.col-sm-3</div><div class="col-sm-3">.col-sm-3</div>
</div>
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_grid_ex1&stacked=h
Responsive Columns
16
The following example shows how to get two various-width columns starting at tablets and scaling to large extra desktops:
<div class="row"><div class="col-sm-4">.col-sm-4</div><div class="col-sm-8">.col-sm-8</div>
</div>
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_grid_ex3&stacked=h
Two Unequal Responsive Columns
17
Tip: You will learn more about Bootstrap 4 grids later in this tutorial.
Web Application Development
18
Bootstrap 4 uses a default font-size of 16px, and its line-height is 1.5.
The default font-family is "Helvetica Neue", Helvetica, Arial, sans-serif.
In addition, all <p> elements have margin-top: 0 and margin-bottom: 1rem (16px by default).
Bootstrap 4 Default Settings
19
Bootstrap 4 styles HTML headings (<h1> to <h6>) with a bolder font-weight and an increased font-size:
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_txt_hn&stacked=h
<h1> - <h6>
20
Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight), and there are four classes to choose from:.display-1,.display-2,.display-3,.display-4
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_txt_display&stacked=h
Display Headings
21
In Bootstrap 4 the HTML <small> element is used to create a lighter, secondary text in any heading:
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_txt_small&stacked=h
<small>
22
Bootstrap 4 will style the HTML <mark> element with a yellow background color and some padding:
Use the mark element to highlight text.
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_txt_mark&stacked=h
<mark>
23
Bootstrap 4 will style the HTML <abbr> element with a dotted border bottom:
The WHO was founded in 1948.
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_txt_abbr&stacked=h
<abbr>
24
Add the .blockquote class to a <blockquote> when quoting blocks of content from another source:
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_txt_blockquote&stacked=h
<blockquote>
25
Bootstrap 4 will style the HTML <dl> element in the following way:
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_txt_dl&stacked=h
<dl>
26
Bootstrap 4 will style the HTML <code> element in the following way:
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_txt_code&stacked=h
<code>
27
Bootstrap 4 will style the HTML <kbd> element in the following way:
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_txt_kbd&stacked=h
<kbd>
28
Bootstrap 4 will style the HTML <pre> element in the following way:
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_txt_pre&stacked=h
<pre>
29
The Bootstrap 4 classes below can be added to style HTML elements further:
More Typography Classes
30
Class Description Example
.font-weight-bold Bold text Try it
.font-italic Italic text Try it
.font-weight-light Light weight text Try it
.font-weight-normal Normal text Try it
.lead Makes a paragraph stand out Try it
.small Indicates smaller text (set to 85% of the size of the parent) Try it
.text-left Indicates left-aligned text Try it
.text-*-left Indicates left-aligned text on small, medium, large or xlarge screens Try it
Class Meaning Try it.text-*-center Indicates center-aligned text on small, medium, large
or xlarge screensTry it
.text-right Indicates right-aligned text Try it
.text-*-right Indicates right-aligned text on small, medium, large or xlarge screens
Try it
.text-justify Indicates justified text Try it
.text-monospace Monospaced text Try it
.text-nowrap Indicates no wrap text Try it
.text-lowercase Indicates lowercased text Try it
31
More Typography Classes Continued
Class Meaning Try it.text-capitalize Indicates capitalized text Try it.initialism Displays the text inside an <abbr> element in a slightly smaller font
sizeTry it
.list-unstyled Removes the default list-style and left margin on list items (works on both <ul> and <ol>). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well)
Try it
.list-inline Places all list items on a single line (used together with.list-inline-item on each <li> elements)
Try it
32
More Typography Classes Continued
For a complete reference of all CSS classes available in Bootstrap 4, visit our Bootstrap 4 All Classes Reference.
Complete Bootstrap 4 CSS Reference
33
Web Application Development
34
Bootstrap 4 has some contextual classes that can be used to provide "meaning through colors".
The classes for text colors are:.text-muted,.text-primary,.text-success,.text-info,.text-warning,.text-danger,.text-secondary,.text-white, .text-dark,.text-body (default body color/often black) and .text-light:
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_txt_colors&stacked=h
Text Colors
35
Contextual text classes can also be used on links, which will add a darker hover color:
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_txt_colors_links&stacked=h
Text Colors Continued
36
You can also add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_txt_colors_opacity&stacked=h.
Text Colors Continued
37
The classes for background colors are:.bg-primary,.bg-success,.bg-info,.bg-warning,.bg-danger,.bg-secondary,.bg-dark and .bg-light.
Note that background colors do not set the text color, so in some cases you'll want to use them together with a .text-* class.
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_txt_bgcolors&stacked=h
Background Colors
38
Web Application Development
39
A basic Bootstrap 4 table has a light padding and horizontal dividers.
The .table class adds basic styling to a table:
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_table_basic&stacked=h
Bootstrap 4 Basic Table
40
The .table-striped class adds zebra-stripes to a table:
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_table_striped&stacked=h
Striped Rows
41
The .table-bordered class adds borders on all sides of the table and cells:
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_table_bordered&stacked=h
Bordered Table
42
The .table-hover class adds a hover effect (grey background color) on table rows:
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_table_hover&stacked=h
Hover Rows
43
The .table-dark class adds a black background to the table:
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_table_inverse&stacked=h
Black/Dark Table
44
Combine .table-dark and .table-striped to create a dark, striped table:
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_table_dark_striped&stacked=h
Dark Striped Table
45
The .table-hover class adds a hover effect (grey background color) on table rows:
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_table_dark_hover&stacked=h
Hoverable Dark Table
46
The .table-borderless class removes borders from the table:
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_table_borderless&stacked=h
Borderless Table
47
Contextual classes can be used to color the whole table (<table>), the table rows (<tr>) or table cells (<td>).
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_table_contextual&stacked=h
Contextual Classes
48
The contextual classes that can be used are:
Contextual Classes Continued
49
Class Description.table-primary Blue: Indicates an important action
.table-success Green: Indicates a successful or positive action
.table-danger Red: Indicates a dangerous or potentially negative action
.table-info Light blue: Indicates a neutral informative change or action
.table-warning Orange: Indicates a warning that might need attention
.table-active Grey: Applies the hover color to the table row or table cell
.table-secondary Grey: Indicates a slightly less important action
.table-light Light grey table or table row background
.table-dark Dark grey table or table row background
The .thead-dark class adds a black background to table headers, and the .thead-light class adds a grey background to table headers:
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_table_head&stacked=h
Table Head Colors
50
The .table-sm class makes the table smaller by cutting cell padding in half:
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_table_sm&stacked=h
Small table
51
The .table-responsive class creates a responsive table: an horizontal scrollbar is added to the table on screens that are less than 992px wide (if needed). When viewing on anything larger than 992px wide, there is no difference:
<div class="table-responsive"><table class="table">...
</table></div>
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_table_responsive
Responsive Tables
52
You can also decide when the table should get a scrollbar, depending on screen width:
<div class="table-responsive-sm"><table class="table">
...</table>
</div>
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_table_responsive_sm
Responsive Tables Continued
53
Class Screen width
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px
Web Application Development
54
Bootstrap 4 Image Shapes
55
The .rounded class adds rounded corners to an image:
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_img_rounded&stacked=h
Rounded Corners
56
The .rounded-circle class shapes the image to a circle:
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_img_circle&stacked=h
Circle
57
The .img-thumbnail class shapes the image to a thumbnail (bordered):
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_img_thumbnail&stacked=h
Thumbnail
58
Float an image to the right with the .float-right class or to the left with .float-left:
<img src="paris.jpg" class="float-left"><img src="paris.jpg" class="float-right”>
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_img_align&stacked=h
Aligning Images
59
Center an image by adding the utility classes .mx-auto (margin:auto) and .d-block (display:block) to the image:
<img src="paris.jpg" class="mx-auto d-block">
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_img_centered&stacked=h
Centered Image
60
Images come in all sizes. So do screens. Responsive images automatically adjust to fit the size of the screen.
Create responsive images by adding an .img-fluid class to the <img> tag. The image will then scale nicely to the parent element.
The .img-fluid class applies max-width: 100%; and height: auto; to the image:
<img class="img-fluid" src="img_chania.jpg" alt="Chania">
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_img_responsive&stacked=h
Responsive Images
61
Web Application Development
62
A jumbotron indicates a big grey box for calling extra attention to some special content or information.
Tip: Inside a jumbotron you can put nearly any valid HTML, including other Bootstrap elements/classes.
Bootstrap 4 Jumbotron
63
Use a <div> element with class .jumbotron to create a jumbotron:
<div class="jumbotron"><h1>Bootstrap Tutorial</h1><p>Bootstrap is the most popular HTML, CSS...</p>
</div>
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_jumbotron&stacked=h
Bootstrap 4 Jumbotron Continued
64
If you want a full-width jumbotron without rounded borders, add the .jumbotron-fluid class and a .container or .container-fluid inside of it:
<div class="jumbotron jumbotron-fluid"><div class="container"><h1>Bootstrap Tutorial</h1><p>Bootstrap is the most popular HTML, CSS...</p>
</div></div>
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_jumbotron2&stacked=h
Full-width Jumbotron
65
Web Application Development
66
Bootstrap 4 provides different styles of buttons:
<button type="button" class="btn">Basic</button><button type="button" class="btn btn-primary">Primary</button><button type="button" class="btn btn-secondary">Secondary</button><button type="button" class="btn btn-success">Success</button><button type="button" class="btn btn-info">Info</button><button type="button" class="btn btn-warning">Warning</button><button type="button" class="btn btn-danger">Danger</button><button type="button" class="btn btn-dark">Dark</button><button type="button" class="btn btn-light">Light</button><button type="button" class="btn btn-link">Link</button>
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_button_styles&stacked=h
Button Styles
67
The button classes can be used on an <a>, <button>, or <input> element:
<a href="#" class="btn btn-info" role="button">Link Button</a><button type="button" class="btn btn-info">Button</button><input type="button" class="btn btn-info" value="Input Button"><input type="submit" class="btn btn-info" value="Submit Button">
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_button_elements&stacked=h
Button Styles Continued
68
Why do we put a # in the href attribute of the link?Since we do not have any page to link it to, and we do not want to get a "404" message,
we put # as the link. In real life it should of course been a real URL to the "Search" page.
Bootstrap 4 provides eight outline/bordered buttons:
<button type="button" class="btn btn-outline-primary">Primary</button><button type="button" class="btn btn-outline-secondary">Secondary</button><button type="button" class="btn btn-outline-success">Success</button><button type="button" class="btn btn-outline-info">Info</button><button type="button" class="btn btn-outline-warning">Warning</button><button type="button" class="btn btn-outline-danger">Danger</button><button type="button" class="btn btn-outline-dark">Dark</button><button type="button" class="btn btn-outline-light text-dark">Light</button>
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_button_outline&stacked=h
Button Outline
69
Bootstrap 4 provides different button sizes:
<button type="button" class="btn btn-primary btn-lg">Large</button><button type="button" class="btn btn-primary">Default</button><button type="button" class="btn btn-primary btn-sm">Small</button>
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_button_sizes&stacked=h
Button Sizes
70
Add class .btn-block to create a block level button that spans the entire width of the parent element.
<button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_button_block&stacked=h
Block Level Buttons
71
A button can be set to an active (appear pressed) or a disabled (unclickable) state:
The class .active makes a button appear pressed, and the disabled attribute makes a button unclickable. Note that <a> elements do not support the disabled attribute and must therefore use the .disabled class to make it visually appear disabled.<button type="button" class="btn btn-primary active">Active Primary</button><button type="button" class="btn btn-primary" disabled>Disabled Primary</button><a href="#" class="btn btn-primary disabled">Disabled Link</a>
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_button_active&stacked=h
Active/Disabled Buttons
72
Web Application Development
73
Bootstrap 4 allows you to group a series of buttons together (on a single line) in a button group:
Use a <div> element with class .btn-group to create a button group:
<div class="btn-group"><button type="button" class="btn btn-primary">Apple</button><button type="button" class="btn btn-primary">Samsung</button><button type="button" class="btn btn-primary">Sony</button>
</div>
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_button_group&stacked=h
Button Groups
74
Tip: Instead of applying button sizes to every button in a group, use class .btn-group-lg for a large button group or the .btn-group-sm for a small button group:
<div class="btn-group btn-group-lg"><button type="button" class="btn btn-
primary">Apple</button><button type="button" class="btn btn-
primary">Samsung</button><button type="button" class="btn btn-
primary">Sony</button></div>
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_button_group_size&stacked=h
Button Groups Continued
75
Bootstrap 4 also supports vertical button groups:
Use the class .btn-group-vertical to create a vertical button group:<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button><button type="button" class="btn btn-primary">Samsung</button><button type="button" class="btn btn-primary">Sony</button>
</div>
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_button_group_v&stacked=h
Vertical Button Groups
76
Nest button groups to create dropdown menus (you will learn more about dropdowns in a later chapter):
<div class="btn-group"><button type="button" class="btn btn-primary">Apple</button><button type="button" class="btn btn-primary">Samsung</button><div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony</button><div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablet</a><a class="dropdown-item" href="#">Smartphone</a>
</div></div>
</div>
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_button_group_dropdown&stacked=h
Nesting Button Groups & Dropdown Menus
77
<div class="btn-group"><button type="button" class="btn btn-primary">Sony</button><button type="button" class="btn btn-primary dropdown-toggle
dropdown-toggle-split" data-toggle="dropdown"><span class="caret"></span>
</button><div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablet</a><a class="dropdown-item" href="#">Smartphone</a>
</div></div>
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_button_group_split&stacked=h
Split Button Dropdowns
78
<div class="btn-group-vertical"><button type="button" class="btn btn-primary">Apple</button><button type="button" class="btn btn-primary">Samsung</button><div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony</button><div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablet</a><a class="dropdown-item" href="#">Smartphone</a>
</div></div>
</div>
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_button_group_v_dropdown&stacked=h
Vertical Button Group w/ Dropdown
79
Button groups are "inline" by default, which makes them appear side by side when you have multiple groups:
<div class="btn-group"><button type="button" class="btn btn-primary">Apple</button><button type="button" class="btn btn-primary">Samsung</button><button type="button" class="btn btn-primary">Sony</button>
</div>
<div class="btn-group"><button type="button" class="btn btn-primary">BMW</button><button type="button" class="btn btn-primary">Mercedes</button><button type="button" class="btn btn-primary">Volvo</button>
</div>
Try it Yourself: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_button_group_inline&stacked=h
Button Groups Side by Side
80
Web Application Development
81
82
Bootstrap Template
https://startbootstrap.com/template-categories/all/
Download / Implement “Bare” template on CSIS server
83
Thank You
84