Typography
Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.
h1. Heading 1
h2. Heading 2
h3. Heading 3
h4. Heading 4
h5. Heading 5
h6. Heading 6
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
This is a lead paragraph. It stands out from regular paragraphs.
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined.
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Badge
Documentation and examples for badges, our small count and labeling component.
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Card
Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card styles
Cards include various options for customizing their backgrounds, borders, and color.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Secondary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Danger card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Warning card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Info card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Light card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Dark card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Progress
Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.
Spinners
Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.
Pagination
Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.
It's easy to get started creating your website. Knowing some of the basics will help.
What is a Content Management System?
A content management system is software that allows you to create and manage webpages easily by separating the creation of your content from the mechanics required to present it on the web.
In this site, the content is stored in a database. The look and feel are created by a template. Joomla! brings together the template and your content to create web pages.
Logging in
To login to your site use the user name and password that were created as part of the installation process. Once logged-in you will be able to create and edit articles and modify some settings.
Creating an article
Once you are logged-in, a new menu will be visible. To create a new article, click on the "Submit Article" link on that menu.
The new article interface gives you a lot of options, but all you need to do is add a title and put something in the content area. To make it easy to find, set the state to published.
Template, site settings, and modules
The look and feel of your site is controlled by a template. You can change the site name, background colour, highlights colour and more by editing the template settings. Click the "Template Settings" in the user menu.
The boxes around the main content of the site are called modules. You can modify modules on the current page by moving your cursor to the module and clicking the edit link. Always be sure to save and close any module you edit.
You can change some site settings such as the site name and description by clicking on the "Site Settings" link.
More advanced options for templates, site settings, modules, and more are available in the site administrator.
Site and Administrator
Your site actually has two separate sites. The site (also called the front end) is what visitors to your site will see. The administrator (also called the back end) is only used by people managing your site. You can access the administrator by clicking the "Site Administrator" link on the "User Menu" menu (visible once you login) or by adding /administrator to the end of your domain name. The same user name and password are used for both sites.
Learn more
There is much more to learn about how to use Joomla! to create the website you envision. You can learn much more at the Joomla! documentation site and on the Joomla! forums.