DBES
This is some really important information, that you should pay attention too.
This is some really important information, that you should pay attention too.
This could be a really detailed online CV
This could be a really detailed online CV
This article is in fact a quick reference to Bootstrap 4. It covers most, if not all of the major components of Bootstrap 4, and borrows extensively from w3schools.com, where you can find many "Try it Yourself" examples, that are well worth a look.
To quickly see how each component is achieved, select the text and right click. Then on Chrome, chooose Inspect, and on Firefox choose either, View Selection Source or Inspect Element
This is column 1 of a three column row
Styled using the col-sm-4 class.
This is column 2 of a three column row
Resize the page to see how the columns collapse.
This is column 3 of a three column row
A row can have up to 12 columns, and each column can hav further rows and columns nested within it, leading to infinite possibilities.
Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight):
The small element is used to create a lighter, secondary text in any heading:
Use the mark element to highlight text.
The abbr element is used to mark up an abbreviation or acronym:
The EU is a political and economic union of 28 member states that are located primarily in Europe.
The blockquote element is used to present content from another source:
The EU values are common to the member countries in a society in which inclusion, tolerance, justice, solidarity and non-discrimination prevail. These values are an integral part of our European way of life:
The dl element indicates a description list:
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.
To indicate input that is typically entered via the keyboard, use the kbd element:
Use ctrl + p on Windows, or cmd + p on Mac to open the Print dialog box.
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.
The class .list-unstyled removes the default list-style and left margin on list items (immediate children only):
The class .list-inline places all list items on a single line, when used together with the .list-inline-item:
Use the contextual classes to provide "meaning through colors":
.text-muted This text is muted.
.text-primary This text is important.
.text-success This text indicates success.
.text-info This text represents some information.
.text-warning This text represents a warning.
.text-danger This text represents danger.
.text-secondary Secondary text.
.text-dark This text is dark grey.
.text-light This text is light grey.
.text-white This text is white.
Hover over the links.
Muted link. Primary link. Success link. Info link. Warning link. Danger link. Secondary link. Dark grey link. Light grey link.Use the contextual background classes to provide "meaning through colours".
Note that you can also add a .text-* class if you want a different text colour:
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 .rounded class adds rounded corners to an image:
The .rounded-circle class shapes the image to a circle:
The .img-thumbnail class creates a thumbnail of the image:
The .img-fluid class makes the image scale nicely to the parent element (resize the browser window to see the effect):
A .jumbotron indicates a big grey box for calling extra attention to some special content or information.
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.
A full width jumbotron (jumbotron jumbotron-fluid) indicates a big grey box for calling extra attention to some special content or information.
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.
Alerts are created with the .alert class, followed by a contextual color classes:
The button with class="close" and data-dismiss="alert" is used to close the alert box.
The alert-dismissible class adds some extra padding to the close button.
The .fade and .show classes adds a fading effect when closing the alert message.
The .btn-group class creates a button group:
Add class .btn-group-* to size all buttons in a button group.
Use the .btn-group-vertical class to create a vertical button group:
Nest button groups to create dropdown menus:
To create a default progress bar, add a .progress class to a container element and add the progress-bar class to its child element. Use the CSS width property to set the width of the progress bar:
The .progress-bar-striped class adds stripes to the progress bars:
Add the .progress-bar-animated class to animate the progress bar:
Create a stacked progress bar by placing multiple bars into the same div with class="progress":
To create a basic pagination, add the .pagination class to an ul element. Then add the .page-item to each li element and a .page-link class to each link inside li:
Add class .active to let the user know which page he/she is on:
Add class .disabled if a page for some reason is disabled:
Add class .pagination-lg for larger blocks or .pagination-sm for smaller blocks.
Large:
Default:
Small:
The .breadcrumb class indicates the current page's location within a navigational hierarchy:
ul element with class .list-group, and li elements with class .list-group-item:
Use the .active class to highlight the current item:
To disable an item, add the .disabled class:
To create a list group with linked items, use div instead of ul and a instead of li. Also add the .list-group-item-action class if you want a grey background colour on hover:
The classes for colouring list-items are:
.list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, list-group-item-dark and list-group-item-light
Move the mouse over the linked items to see the hover effect:
A card in Bootstrap 4 is a bordered box with some padding around its content. It includes options for headers, footers, content, colours, etc.
A basic card is created with the .card class, and content inside the card has a .card-body class:
Use .card-title to add card titles to any heading element. The .card-text class is used to remove bottom margins for a p element if it is the last child in the card-body. The .card-link class adds a blue colour to any link, and a hover effect.
Image at the top (card-img-top):
Image at the bottom (card-img-bottom):
Turn an image into a card background and use .card-img-overlay to overlay the card's text:
The .dropdown class is used to indicate a dropdown menu.
Use the .dropdown-menu class to actually build the dropdown menu.
To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".
The .dropdown-divider class is used to separate links inside the dropdown menu with a thin horizontal line:
The .dropdown-header class is used to add headers inside the dropdown menu:
The .active class adds a blue background color to the active link.
The .disabled class disables a dropdown item (grey text colour and a no-parking-sign on hover).
Add the .dropdown-menu-right class to .dropdown-menu to right-align the dropdown menu:
The .dropup class makes the dropdown menu expand upwards instead of downwards:
Collapsibles are useful when you want to hide and show large amount of content:
Click on the button to toggle between showing and hiding content.
a or a button element. Then add the data-target="#id" (e.g data-target="#demo") attribute to connect the button with the collapsible content (<div id="demo"> some content </div>).
a elements, you can use the href attribute instead of the data-target attribute:
By default, the collapsible content is hidden. However, you can add the .show class to show the content by default:
Click on the button to toggle between hiding the content and showing it again.
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.
If you want to create a simple horizontal menu, add the
.nav class to a <ul> element, followed by .nav-item
for each <li> and add the .nav-link class to
their links:
Basic horizontal menu:
Add the .justify-content-center class to center the nav, and the .justify-content-end class to right-align the nav.
Centered nav:
Right-aligned nav:
Use the .flex-column class to create a vertical nav:
Navigation tabs: Use the .nav-tabs class to create a tabbed navbar. Also add the .active class to the active/current link.
Navigation pills: Take that same HTML, but use .nav-pills instead.
Justify the tabs/pills with the .nav-justified class.
To make the tabs toggleable, add the data-toggle="tab" attribute to each link.Then add a .tab-pane class with a unique ID for every tab and wrap them inside a<div> element with class .tab-content.
A navigation bar is a navigation header that is placed at the top of the page:
The navbar-expand-xl | lg | md | sm class determines when the navbar should stack vertically (on extra large, large, medium or small screens).
To create a vertical navbar, in this case just remove the .navbar-expand-sm
Use any of the .bg-color classes to change the background colour of the navbar, (.bg-primary, .bg-success, .bg-info), etc, etc.
To Add a white text colour to all links in the navbar with the .navbar-dark class, or use the .navbar-light class to add a black text colour.
The .navbar-brand class is used to highlight the brand/logo/project name of your page.
To create a collapsible navigation bar, use a button with class="navbar-toggle", data-toggle="collapse" and data-target="#collapsibleNavbar". Then wrap the navbar content (links, etc) inside a div element with class="collapse navbar-collapse", followed by an id that matches the data-target of the button, in this case:- "collapsibleNavbar".
You can add a <form> element with class="form-inline" to group inputs and buttons side-by-side:
You can also use other input classes, such as .input-group-addon to attach an icon or help text next to the input field. You will learn more about these classes in the Bootstrap Inputs chapter.
Navbars may contain bits of text with the help of .navbar-text. This class adjusts vertical alignment and horizontal spacing for strings of text.
Textual form controls—like <input>s, <select>s, and <textarea>s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.
For file inputs, swap the .form-control for .form-control-file.
Set heights using classes like .form-control-lg and .form-control-sm.
If you want to have <input readonly> elements in your form styled as plain text, use the .form-control-plaintext class to remove the default form field styling and preserve the correct margin and padding.
By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with .form-check.
Group checkboxes or radios on the same horizontal row by adding .form-check-inline to any .form-check.
The carousel is a slideshow for cycling through a series of content. They are built using CSS 3D transforms and JavaScript.
Add elements inside <div class="carousel-caption"> within each <div class="carousel-item"> to create a caption for each slide:
The Modal component is a dialog box/popup window that is displayed on top of the current page:
Tooltips are opt-in for performance reasons, so you must initialize them yourself using jQuery. One way to initialize all tooltips on a page would be to select them by their data-toggle attribute: using the following script
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
The Popover component is similar to tooltips; it is a pop-up box that appears when the user clicks on an element. The difference is that the popover can contain much more content. again popovers are opt-in for performance reasons, so you must initialize them yourself using jQuery. One way to initialize all popovers on a page would be to select them by their data-toggle attribute: using the following script
<script>
$(function () {
$('[data-toggle="popover"]').popover();
});
</script>
Find out more about how you can get your business online by calling: 07545 642342
or
Fill out our contact form