https://github.com/rasbeetech/bootstrap-test

Bootstrap Test
https://github.com/rasbeetech/bootstrap-test

Last synced: 2 months ago
JSON representation

Bootstrap Test

Host: GitHub
URL: https://github.com/rasbeetech/bootstrap-test
Owner: RasbeeTech
Created: 2021-03-12T19:47:18.000Z (over 5 years ago)
Default Branch: main
Last Pushed: 2021-03-14T23:31:50.000Z (over 5 years ago)
Last Synced: 2025-03-20T09:44:03.241Z (over 1 year ago)
Language: HTML
Size: 1.81 MB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Bootstrap-Test

## Purpose
Create a Bootstrap 4 reference while practicing web-design.

# Bootstrap 4.3.1
## Getting Started
Include the following code to take advantage of Bootstrap CSS/JS
```html

Bootstrap Test

Bootstrap Test

<-- Place JS at end for perforomance -->

```

## Table
1. [Grid-System](#Grid-System)
2. [Fixed-Layout](#Fixed-Layout)
3. [Fluid-Layout](#Fluid-Layoutl)
4. [Responsive-Layout](#Responsive-Layout)
5. [Typography](#Typography)
6. [Tables](#Tables)
7. [Lists](#Lists)
8. [Forms](#Forms)
9. [Buttons](#Buttons)
10. [Images](#Images)
11. [Cards](#Cards)
12. [Icons](#Icons)
13. [Navbars](#Navbars)
14. [Pagination](#Pagination)
15. [Badges](#Badges)
16. [Progress-Bars](#Progress-Bars)
17. [Spinners](#Spinners)
18. [Jumbotron](#Jumbotron)
19. [Helper-Classes](#Helper-Classes)
20. [Modals](#Modals)
21. [Dropdowns](#Dropdowns)
22. [Alerts](#Alerts)
23. [Accordian](#Accordian)
24. [Carousal](#Carousal)

## Content
1. ## Grid-System

The latest Bootstrap 4 version introduces the new mobile-first flexbox grid system that appropriately scales up to 12 columns as the device or viewport size increases.
![alt text](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/grid-system-sizing-table.png)

2. ## Fixed-Layout
With Bootstrap 4 you can still create web page layouts based on fixed number of pixels, however the container width vary depending on the viewport width and the layout is responsive too.

View code

```html

Bootstrap Test

```

3. ## Fluid-Layout

View code

```html

Bootstrap Test

```

4. ## Responsive-Layout

View code

```html

```

5. ## Typography
![alt text](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/typography.jpg)

View code

```html

Typography

Fancy display heading
With faded secondary text

Display Heading 1

Display Heading 2

Display Heading 3

Display Heading 4

This is how a normal paragraph looks like in Bootstrap.

This is how a paragraph stands out in Bootstrap.

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

Text aligned to left on small or wider viewports.

Text aligned to left on medium or wider viewports.

Text aligned to left on large or wider viewports.

Text aligned to left on extra-large or wider viewports.

This is bold text

This is computer code

This is emphasized text

This is italic text

This is highlighted text

This is small text

This is strongly emphasized text

This is _subscript and ^superscript

This text is inserted to the document

~~This text is deleted from the document~~

The quick brown fox jumps over the lazy dog.

Primary: Please read the instructions carefully before proceeding.

Secondary: This is featured has been removed from the latest version.

Success: Your message has been sent successfully.

Info: You must agree with the terms and conditions to complete the sign up process.

Warning: There was a problem with your network connection.

Danger: An error has been occurred while submitting your data.

Muted: This paragraph of text is grayed out.

The world is a dangerous place to live; not because of the people who are evil, but because of the people who don't do anything about it.

by Albert Einstein

```

6. ## Tables
![alt text](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/tables.jpg)

View code

```html

Tables

Row
First Name
Last Name
Email

1
Clark
Kent
clarkkent@mail.com

2
John
Carter
johncarter@mail.com

3
Peter
Parker
peterparker@mail.com

```

7. ## Lists
![alt text](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/lists.jpg)

View code

```html

Lists

Home

Products
- Gadgets
- Accessories

About Us

Contact

Home

Products

About Us

Contact

User Agent: An HTML user agent is any device that interprets HTML documents.
Client-side Scripting: Client-side scripting generally refers to the category of computer programs on the web that are executed by the user's web browser.
Document Tree: The tree of elements encoded in the source document.

Pictures

Documents

Music

Videos

Home

Pictures 145

Music 50

Videos 8

```

8. ## Forms
![alt text](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/forms.jpg)

View code

```html

Forms

Password

Remember me

Password

Remember me

Password

Remember me

Password

Remember me

Cricket

Football

Tennis

Male

Female

Cricket

Football

Tennis

Male

Female

Disabled select

City

State

Select

Zip

State

Large select

State

Default select

State

Small select

Password

Your password must be 8-20 characters long, contain letters, numbers and special characters, but must not contain spaces.

Please enter a valid email address.

Password

Please enter your password to continue.

Remember me

Sign in

// Self-executing function
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();

First Name:

Last Name:

Email Address:

Mobile Number:

Date of Birth:

Date

Month

Year

Postal Address:

Zip Code:

Gender:

Male

Female

I agree to the Terms and Conditions.

```

9. ## Buttons
![alt text](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/buttons.jpg)

View code

```html

Buttons

Primary
Secondary
Success
Danger
Warning
Info
Dark
Light
Link

Primary
Secondary
Success
Danger
Warning
Info
Dark
Light

Large
Default
Small

Block level button
Block level button

Primary button
Button

Loading...

Loading...

Button Groups

Home
About
Services

Home
About

Home
About
Services

```

10. ## Images
![images.jpeg](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/images.jpg)

View code

```html

Images

```

11. ## Cards
![alt text](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/cards.jpg)

View code

```html

Cards

Alice Liddel

Alice is a freelance web designer and developer based in London. She is specialized in HTML5, CSS3, JavaScript, Bootstrap, etc.

View Profile

This is some text within a padded box.

Featured

NASA launches solar probe

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante.

Know more

2 days ago

Featured

Cras justo odio

Dapibus ac facilisis in

Vestibulum at eros

Add More
Share

Card title

Pulvinar leo id risus pellentesque el vestibulum. Sed diam libero egetve sodales sapien vel, aliquet nibhte bibendum enim porttitor orci.

Cras justo odio

Dapibus ac facilisis in

Vestibulum at eros

Card link
Another link

Primary card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.

Primary card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.

Card Layout

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.

Last updated 3 mins ago

Card title

Vestibulum id metus ac nisl bibendum nibh scelerisque non purus in suspendisse.

Last updated 3 mins ago

Card title

Pulvinar leo id risus enim. Bibendum varius tincidunt pellentesque malesuada in.

Last updated 3 mins ago

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.

Last updated 3 mins ago

Card title

Vestibulum id metus ac nisl bibendum nibh scelerisque non purus in suspendisse.

Last updated 3 mins ago

Card title

Pulvinar leo id risus enim. Bibendum varius tincidunt pellentesque malesuada in.

Last updated 3 mins ago

Card title

Lorem ipsum dolor sit amet, consectetur adipi elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus.

Last updated 3 mins ago

Nam eget purus consectetur in vehicula. Nullamr ultrices nisl risus, viverra libero.

Someone famous

Card title

Vestibulum id metus ac nisl bibendum scelerisque non dignissim purus.

Last updated 2 mins ago

Pulvinar leo risus vestibulum. Sed diam on sodales eget.

Someone famous

Card title

Enim arcu, interdum dignissim venenatis velc.

Last updated 1 mins ago

Quis quam ut magna consequat faucibus. Pellentesque eget nisi suscipit tincidunt. Pellentesque quam.

Someone famous

Card title

Convallis eget pretium, bibendum non leo. Proien suscipit purus adipiscing dolor gravida fermentum sapien blandit praest interdum vel metus.

Last updated 3 mins ago

Alice Liddel

Alice is a freelance web designer and developer based in London. She is specialized in HTML5, CSS3, JavaScript, Bootstrap, etc.

View Profile

Alice Liddel

Alice is a freelance web designer and developer based in London. She is specialized in HTML5, CSS3, JavaScript, Bootstrap, etc.

View Profile

```

12. ## Icons
![alt text](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/icons.jpeg)

View code

```html

Icons

Hello, world!

Search
Search

```

13. ## Navbars
![navbars.jpeg](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/navbars.jpg)

View code

```html

Nav bar

Home
Profile
Messages
Reports

Home
Profile
Messages
Reports

Home
Profile
Messages
Reports

Home
Profile
Messages
Reports

Home
Profile
Messages
Reports

Home

Profile

Messages

Reports

Home
Profile
Messages
Reports

Home
Profile

Reports

Home
About
Explore Products
Contact Us

Responsive Nav Bar

Nav bar coloring

navbar-dark bg-dark

navbar-dark bg-primary

navbar-light" style="background-color: #ddeeff;"

fixed top

BreadCrumbs

```

14. ## Pagination
![alt text](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/pagination.jpeg)

View code

```html

Pagination

```

15. ## Badges
![alt text](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/badges.jpeg)

View code

```html

Badges

Bootstrap heading New

Primary
Secondary
Success
Danger
Warning
Info
Dark
Light

Home

Profile

Messages 24

Notification 5

```

16. ## Progress-Bars
![alt text](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/progress-bar.jpeg)

View code

```html

Progress-bar

60%

Program Files (40%)

Residual Files (25%)

Junk Files (15%)

```

17. ## Spinners
![alt text](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/spinners.jpeg)

View code

```html

Spinners

Loading...

Loading...

```

18. ## Jumbotron
![alt text](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/jumbotron.jpg)

View code

```html

Jumbotron

Learn to Create Websites

In today's world internet is the most popular way of connecting with the people. At tutorialrepublic.com you will learn the essential of web development technologies along with real life practice example, so that you can create your own website to connect with the people around the world.

Start learning today

Learn to Create Websites

In today's world internet is the most popular way of connecting with the people...

Start learning today

```

19. ## Helper-Classes
![alt text](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/helper-classes.jpg)

View code

```html
Helper Classes

#border-classes {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
background-color: #f5f5f5;
}
#spacing-classes {
padding: 15px;
font-size: 18px;
background: #dbdfe5;
}
#float-classes {
font-size: 18px;
padding: 20px;
background: #abb1b8;
}
#sizing-classes {
background: #dbdfe5;
margin: 10px;
}

Helper Classes

Color Classes

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

Background Color Classes

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-white

.bg-transparent

Text Alignment Classes

.text-left: Align the text to the left.

.text-center: Align the text to the center.

.text-right: Align the text to the right.

.text-justify: Justify the text content.

.text-wrap: Wrap the overflowing text.

.text-nowrap: Prevent text from wrapping.

.text-truncate: Truncate the text with an ellipsis.

.text-break: Break the long words to prevent overflow.

.text-lowercase: Transform the text to lowercase.

.text-uppercase: Transform the text to uppercase.

.text-capitalize: Capitalize the first letter of each word.

.font-weight-bold: Set the font-weight of an element to bold.

.font-weight-bolder: Set the font-weight of an element to bolder (relative to the parent).

.font-weight-normal: Set the font-weight of an element to normal.

.font-weight-light: Set the light font-weight for an element.

.font-weight-lighter: Set the lighter font-weight for an element (relative to the parent).

.font-italic: Set the font-style of an element to italic.

.text-monospace: Set the font-family of an element to monospace font (fixed-width)

.text-reset: Reset the color of a text or link (inherits the color from its parent).

.text-decoration-none: Remove the text decoration such as underline from a text.

Border Classes

Spacing Classes

.mt-0

.mt-1

.mt-2

.mt-3

.mt-4

.mt-5

.mt-auto

Float Classes

.float-left

.float-right

.float-left

.float-right

.float-none

Shadow Classes

No shadow

Small shadow

Regular shadow

Larger shadow

Sizing Classes

w-50 p-3 (Width 50%)

w-75 p-3 (Width 75%)

w-100 p-3 (Width 100%)

w-auto p-3 (Width auto)

Vertical Alignment Classes

With inline elements:

baseline
top
middle
bottom
text-top
text-bottom

With table cells:

baseline
top
middle
bottom
text-top
text-bottom

```

20. ## Modals
![alt text](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/modals.jpeg)

View code

```html

Modals

Launch Demo Modal

```

21. ## Dropdowns
![alt text](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/dropdown.jpeg)

View code

```html

Dropdown

Dropup

Dropleft

Dropright

Products

```

22. ## Alerts
![alt text](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/alerts.jpg)

View code

```html

Alerts

Success! Your message has been sent successfully.
×

Error! A problem has been occurred while submitting your data.
×

Warning! There was a problem with your network connection.
×

Info! Please read the comments carefully.
×

Primary! This is a simple primary alert box.
×

Secondary! This is a simple secondary alert box.
×

Dark! This is a simple dark alert box.
×

Light! This is a simple light alert box.
×

Warning!

Please enter a valid value in all the required fields before proceeding. If you need any help just place the mouse pointer above info icon next to the form field.

Once you have filled all the details, click on the 'Next' button to continue.

```

23. ## Accordian
![alt text](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/accordian.jpg)

View code

```html

Accordian

1. What is HTML?

HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. Learn more.

2. What is Bootstrap?

Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. Learn more.

3. What is CSS?

CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. Learn more.

```

24. ## Carousal
![alt text](https://github.com/RasbeeTech/Bootstrap-Test/blob/main/images/html%20prints/carousal.jpeg)

View code

```html

Carousal

```

### Details
Created with the help of [www.tutorialrepublic.com](https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/).

https://github.com/rasbeetech/bootstrap-test

Awesome Lists containing this project

README

Bootstrap Test

Bootstrap Test

Bootstrap Test

Typography

Fancy display heading With faded secondary text

Display Heading 1

Display Heading 2

Display Heading 3

Display Heading 4

Tables

Lists

Forms

Buttons

Button Groups

Images

Cards

Alice Liddel

NASA launches solar probe

Card title

Primary card title

Primary card title

Card Layout

Card title

Card title

Card title

Card title

Card title

Card title

Card title

Card title

Card title

Card title

Alice Liddel

Alice Liddel

Icons

Hello, world!

Nav bar

Responsive Nav Bar

Nav bar coloring

navbar-dark bg-dark

navbar-dark bg-primary

navbar-light" style="background-color: #ddeeff;"

fixed top

BreadCrumbs

Pagination

Badges

Bootstrap heading New

Bootstrap heading New

Bootstrap heading New

Bootstrap heading New

Bootstrap heading New

Bootstrap heading New

Progress-bar

Spinners

Jumbotron

Learn to Create Websites

Learn to Create Websites

Helper Classes

Color Classes

Background Color Classes

Text Alignment Classes

Border Classes

Spacing Classes

Float Classes

Shadow Classes

Sizing Classes

Vertical Alignment Classes

With inline elements:

With table cells:

Modals

Confirmation

Dropdown

Alerts

Warning!

Accordian

1. What is HTML?

2. What is Bootstrap?

Fancy display heading
With faded secondary text