My First Bootstrap Page

This is some text

My First Bootstrap Page

This is some text


NUMER JEDEN
Numer dwa
Dwa i pół
.col-sm-4 AAAA
.col-sm-8 BBBB
.col-md-2
.col-md-4
.col-md-4
.col-md-2

Parent: sm9 - Example of nesting of rows
Child 1: xs8 or sm6
Child 2: sx4 or sm6

9 + 3 right
3 + 9 left

The small element is used to create a lighter, secondary text in any heading:

h1 Bootstrap heading (36px)secondary text

h2 Bootstrap heading (30px)secondary text

h3 Bootstrap heading (24px)secondary text

h4 Bootstrap heading (18px)

h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)

Use the mark element to highlight text.

The WHO was founded in 1948.


For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

From WWF's website

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

From WWF's website

Zwykła czcionka - nie wyróżniająca się ponad inne

Class - lead - czcionka wyróżniająca się ponad inne

Tekst do prawej (bootstrap)

Tekst do prawej (html)

Tekst wypośrodkowany

Description Lists

The dl element indicates a description list:

Coffee
- black hot drink
Milk
- white cold drink

Code Snippets

Inline snippets of code should be embedded in the code element:

The following HTML elements: span, section, and div defines a section in a document.

Keyboard Inputs

To indicate input that is typically entered via the keyboard, use the kbd element:

Use ctrl + p to open the Print dialog box.

Multiple Code Lines

For multiple lines of code, use the pre element:

				Text in a pre element
				is displayed in a fixed-width
				font, and it preserves
				both      spaces and
				line breaks.
			

Contextual Colors

Use the contextual classes to provide "meaning through colors":

This text is muted.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Contextual Backgrounds

Use the contextual background classes to provide "meaning through colors":

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.


Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com
wahadłowiec wahadłowiec wahadłowiec

Obraz Pexels z Pixabay

Bootstrap Tutorial

Bootstrap is the most popular HTML, CSS, and JS framework for ...

This is some text.

This is another text.

Well Size

Small Well
Normal Well
Large Well

Animated Alerts

The .fade and .in classes adds a fading effect, when closing the alert message.

× Success! This alert box could indicate a successful or positive action.
× Info! This alert box could indicate a neutral informative change or action.
× Warning! This alert box could indicate a warning, that might need attention.
× Danger! This alert box could indicate a dangerous or potentially negative action.

Button Styles

Link Button

Block Level Buttons

Large Block Level Buttons

Small Block Level Buttons







Apple22 Samsung33 Sony44


Envelope icon:

Envelope icon as a link:

Search icon:

Search icon on a button:

Search icon on a styled button:

Print icon:

Print icon on a styled link button: Print

News 5
Comments 10
Updates 2

Example New

Example New

Example New

Default Label Primary Label Success Label Info Label Warning Label Danger Label Danger Label

40% Ukończone (success)
50% Ukończone (info)
60% Way (warning)
70% Road (it is ok)
Free Space
Warning
Danger

List Group With Linked Items

First item Miś Uszatek Second item Third item
Panel Heading
Panel Content
Panel Content

The panel-group class clears the bottom-margin.

Panel Header
Panel Content
Panel Header
Panel Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Collapsible Panel

Panel Body

Accordion Example

Note: The data-parent attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.








Dynamic Tabs

HOME

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Dynamic Pills

HOME

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Inverted Navbar

An inverted navbar is black instead of gray.


Navbar With Dropdown

This example adds a dropdown menu for the "Page 1" button in the navigation bar.


Right Aligned Navbar

The .navbar-right class is used to right-align navigation bar buttons.


Vertical (basic) form


Inline form

Make the viewport larger than 768px wide to see that all of the form elements are inline, left aligned, and the labels are alongside.


Horizontal form











Horizontal form: control states

Input Sizing

The form below shows input elements with different heights using .input-lg and .input-sm:

Input Sizing

You can quickly size labels and form controls within a Horizontal form by adding .form-group-lg or .form-group-sm to the div class="form-group" element:

Column Sizing

The form below shows input elements with different widths using different .col-xs-* classes:

Help text

Use the .help-block class to add a block level help text in forms:

This is some help text that breaks onto a new line and may extend more than one line.

Obraz domaxi198 z Pixabay

Left-aligned

Media Objects - align media objects (like images or videoes) to the left or to the right of some content


Media Object

The media object can also be top, middle or bottom-aligned with the "media-top", "media-middle" or "media-bottom" class:


Media Top

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.




Modal Example


Tooltip Example

The data-placement attribute specifies the tooltip position.


Popover Example - znika, kiedy się kliknie w napisa ponownie

Popover Example - znika, kiedy sie kliknie poza dymkiem

Click me

Popover Example - pojawia się tylko, gdy hover over

Hover over me