Circle
The .rounded-circle class shapes the image to a circle:
Call a function which performs a calculation and returns the result:
Please input a number between 1 and 10:
Hello World!
This example uses the addEventListener() method to add two click events to the same button.
Add addEventListener() method to attach a click event to a button.
This is a paragraph.
This is another paragraph.
If you double-click on me, I will disappear.
Click me away!
Click me too!
Enter this paragraph.
This is a paragraph with little content.
This is another small paragraph.
Demonstrate fadeIn() with different parameters.
By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!
Ashraf
This container has a border and some extra padding and margins.
This container has a dark background color and a white text, and some extra padding and margins.
This container has a blue background color and a white text, and some extra padding and margins.
Note: Try to add a new div with class="col" inside the row class - this will create four equal-width columns.
Resize the browser window to see the effect.
The columns will automatically stack on top of each other when the screen is less than 576px wide.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Secondary background color.
Dark grey background color.
Light grey background color.
The .table-hover class adds a hover effect (grey background color) on table rows:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Contextual classes can be used to color the table, table rows or table cells. The classes that can be used are: .table-primary, .table-success, .table-info, .table-warning, .table-danger, .table-active, .table-secondary, .table-light and .table-dark:
| Firstname | Lastname | |
|---|---|---|
| Default | Defaultson | def@somemail.com |
| Primary | Joe | joe@example.com |
| Success | Doe | john@example.com |
| Danger | Moe | mary@example.com |
| Info | Dooley | july@example.com |
| Warning | Refs | bo@example.com |
| Active | Activeson | act@example.com |
| Secondary | Secondson | sec@example.com |
| Light | Angie | angie@example.com |
| Dark | Bo | bo@example.com |
You can use any of the contextual classes to only add a color to the table header:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| Span two columns example | july@example.com | |
The .rounded-circle class shapes the image to a circle:
Alerts are created with the .alert class, followed by a contextual color classes:
Click the button to get your coordinates.
Click the following button to convert JSON results into HTML table
Click the button to get your coordinates.
Enter a number and click OK:
If the number is less than 100 or greater than 300, an error message will be displayed.
Enter a number and click OK:
If the number is less than 100 (the input's min attribute), an error message will be displayed.
Local Storage Example "Web Storage API"
End of Page