Bootstrap Tutorial

Bootsrap Tutorial

bootstrap cards

cards in bootstrap 4:


With bootstrap 4 .panels, .wells and .thumbnails are not supported. Use .card instead with many nice features.

Bootstrap Card Header

i am a card

The grid-system-layout:
mixed mobile tablet and desktop grid.

card flush

visible XS
Bootstrap Flush Card

i am the text, inside the padding div class card-text.

card-footer

card flush

visible XS
Bootstrap Flush Card

the .card-img-button class rounds the corner of below image

card-footer

card flush

hidden XS
Bootstrap Flush Card

there is also the class .card-img-top available.

card-footer

typography

responsive tables in bootstrap 4:


by adding the .table-responsive class to the table class a horizontal scrollbar is added for small devices.

table-inverse table-stripped table-bordered table-
hover
thead-default thead-inverse table-
sm
contextual classes
Cell Cell active Cell Cell Cell Cell Cell
Cell Cell Cell success Cell Cell info Cell
Cell danger Cell Cell Cell Cell Cell Cell
i am a
with contextual classes
small font size
table- responsive table-
bordered hidden- xs-up

Media

nested media objects in bootstrap 4:


you can add nested media opjects in various ways and image-alignements to your website. The alignement classes are: .media-left, .media-right, .media-middle, .media-bottom. The.media-object class should be added to the media you want to use. i.g. audio,video,image,canvas.

Media Noten

Media Object

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Media Video

Nested Media Object

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Media Audio

Nested Media Object

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Media Noten

Nested Media Object

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Media Object

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

media Noten

Media Object

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Media Noten

slider1

responsive embeded in bootstrap 4:


With adding .embed-responsive you can add external content with iframes, objcts or videos to your side. Just ad the class to your div. You ae also able to specify the ratio i.e .responsive-embed-16by9, .responsive-embed-4by3

Video from a brassplayers course.
copyright - web-complett.de 2017

slider1

dynamic content in bootstrap 4:


There are several ways to add dynamic content to your website: collapse (accordions), tabbable pans, modals and scrollspay. With the following accordion i will show some of theme an also some other nice features from bootstrap 4 alpha.

Button: styles, outline, elements, size
button
styles
button
outline
button
elements
Anchor
 
 
   
Button size
large default small
Block level Buttons
button block level
Disabled buttons Buttons
button link disabled button button disabled button input disabled
link

just add thr class disabled to the button link and disabled="disabled" to the button or input element to disable theme.

btw, you can also use buttons as checkboxes oder radio buttons by altering the input-type to input type="checkbox" or input type="radio"

in this tablist i also show the bootstrap tooltip and the boostrap popover in diffrent data-placemnets (buttom, left, right). Just click ore mouseover the buttons :-)

popover: just add to your button or link title="title popover" data-toggle="popover" data-placement="bottom" data-content="the content of the popover"

tooltip: just add to your button or link data-toggle="tooltip" title="Your title"

Nav Base

There are two ways to add the base nav to your website. You can add a vertical nav by using the ul Element or a horizontal nav by using the nav Element.

There is also the possibility of an inline nav with predifined spaces, when you use the nav-inlineElement for both nav's

Basic Nav ul Example
Basic Nav Nav (inline) Example
Tabs

You can use nav-tabs to show a tabbed nav

Tabbed Nav
Pills

You can use nav-pills to show a pilled nav

Pilled Nav

 

In this example,there is also a dropdown menu implemented and the the disabled link CSS3 nav-link disabled

Modal's

In Bootstrap you have the possibility to show content in a special modal window when you click the modal button.

Modal
Modal Small Modal
Large Modal Without Effect

The first modal is a default modal in size with footer and close button.

The second modal is a small Modal in size without footer. Just add to the modal-dialog modal-sm

The third modal is a large modal in size, in this case without footer. Just add modal-lg to the modal dialog

The fourth modal is a modal without Fade-Effect. Just remove fade from the modal class.

For more information regarding dynamic content with bootstrap 4 please visit bootstrap 4 alpha or quackit.com

Please note that bootstrap is in alpha 4 status,that means dont use it on a productive site until final release bootstrap 4 is published.

tabbable panes / pills in bootstrap 4:


you can order or show your content in tabbable panes or pills (usefull for small devices)to navigate content without scrolling.

By page load the first tabbable pane keeps empty, dont know why, just have to do a workaround.

Button Groups Horizontal

Button Groups Vertical

just add verticalto the btn-group class class="btn-group-vertical"

Button Toolbar

you can combine btn-groups by nest theme into one single - toolbar

Button Toolbar

slider1

Bootstrap Forms / Custom Forms:


In Bootstrap 4 there are various ways to create and style your forms. Below you see some descriptions of predefined fields, styles and classes. For more information please visit Bootstrap 4alpha Forms

I am a aria-describedby="name1Help" text with the class class="form-text text-muted""
i am a small input field with the class form-control form-control-sm
I have a validation style succes, there are also two other's: danger and warning
I have the validation style warning
Textarea
i have the additional form element legendas field label (Textarea)
Custom File Input
Custom Radio Buttons
i am a fieldset Custom Radio Buttons with class="form-group", and the label class custom-radio. Each radio button has different status checked, disabled and for styling the span class custom-control-indicator
Custom Checkbocks
i am a fieldset Custom Checkboxes with class="form-group", and the label class custom-checkbox. Each checkbox has different status checked, disabled and for styling the span class custom-control-indicator
Custom Select
i am a Custom Select Element with class="custom-select", and the label class mr-sm-2 for="inlineFormCustomSelect"

 

Custom Multiple Select
i am a Custom Select Element with multiple class="custom-select", and the label class mr-sm-2 for="inlineFormCustomSelect"
i am the submit button button type=""submit, and the button class btn btn-primary btn-sm
Column sizing

You cam manipulate the columnsizing (field size) with the bootstrap grid system col classes i.e. div class="col-5"

i am input type text element within a row and div class div class="col-4"
i am input type text element within a row and div class div class="col-5"
i am input type text element within a row and div class div class="col-6"

 

Inline

You can group element like checkboxes horizontally by adding the form-check-inline class to each form-check class.

 

Readonly

By adding the readonly boolean to a field this field is not editable.

 

Much more

There are several other ways, options, fields to create or customize your forms. Please visit bootstrap 4 forms. There are also plugins extentions which works well with bootstrap 4, i.e. timepicker from angular2

typography

Bootstrap Typography


In this section i will list some elements regarding the typography of boostrap. Some of them are new regarding bootstrap 4 alpha.

Display

The display textelement is new to bootstrap 4 and offers bigger sized caption's. The class="display-1 and class="display-2" are hidden-xs-down menas not shown for small devices.

Display 1

Display 2

Display 3

Display 4

Typography

Description List

Heading 1dtelement
dd element content 1
Heading 2dtelement
dd element content 2
Heading 3dtelement
dd element content 3

Lead Text

i am a class="lead" text element.

Text muted

i am a class="text-muted" text element.

More Typography

Typography

Blockquote Source- Reverse

I am a bootstrap blockquote - source element class="blockquote blockquote-reverse"with footer and cite elements.

Jürgen Hauke web-complett.de

Abbreviations

i am a abbr title="mytitle" text element with class="initialismfor smaller text

attr

HTML

More Typography

Typography

List inline

i am a list inline element ul .list-inline with li class .list-inline-item.

  • Item 1
  • Item 2
  • Item 3
Inline text elements

mark element to highlight text.

delelement for deleted text elements.

u element to underline text.

small text element.

strong text element.

em element for kursiv text.

More Typography

 

Card image overlay

Below we are cards with image class="card-image-top", image overlayimg class="card-image-overlay" and h4 class="card-title", p class="card-text". We also have clickable alert's div class="alert alert-success alert-dismissible" role="alert" with button class="close" data-miss="alert"

Bootstrapping

Why using
boostrap?

It's logic, dynamic, powerfull open framework

Bootstrapping

Why using
boostrap?

the easiest way to create responsive websites?

Donate?

please donate

if you like the tutorial