CSS

Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes.

Overview

Bootstrap is a great front end development framework to create brilliant sites. However, being a developer, we need more customization options that are fast to implement. By studying different types of website, it is understood the further CSS classes are required to support a fast development experience.

Page Layout

Internet has evolved a lot since first website was made. Hence, the W3C has laid down standards to make html content accesscible and user-friendly to all users. Layout options and the standards implementented to make content acessible by assistive technologies.

Below is a sample of standard layout to address landmark region for users of assistive technologies.

    <header role="banner">

        <nav class="navbar navbar-default" role="navigation">
            <a class="navbar-brand" href="#">Brand Name</a>
            <form class="navbar-form" role="search">...</form>
        </nav>

    </header>

    <main role="main" class="page page-main">

        <div class="page-heading">
            <p>Page Title and breadcrumbs Go Here</p>
        </div>

        <aside role="complementary" class="page-sidebar">
            <p>Page sidebar goes here.</p>
        </aside>

        <div class="page-content">
            <p>Page content goes here.</p>
        </div>

    </main>

    <footer role="contentinfo">
        <p>Put copyright, etc. here.</p>
    </footer>
                        

Click here to check an example.

Containers

Currently Bootstrap 3.3.7 support .container and container-fluid classes. We have extended the support to suit the page needs.

Smooth

As per jasny suggestions, we have added .container-smooth a container to use the same max-width for all view-port sizes. This means that the container size won't jump at media query breakpoints.


    .container-smooth {
        max-width: 1170px;
    }
    @media (min-width: 1px) {
        .container-smooth {
            width: auto;
        }
    }
                        

Table

.container-table provides a better option to to vertical-align: middle for col-*

Note: You need to add .vertical-middle text-center and define height to make in align it in middle.
EXAMPLE

Some content

Some content

Some content

Some content

Some content

Some content

Some content

Some content

Some content

Note: .container-table can only manage 12 columns in a .row. further rows are required to adjust additional columns

Full Page

Another use of container is to generate full height and width container with text in center. The table functions just like fullpage.js with minimal amount of CSS.

Please Click here to view the Demo

Flex

Flex container helps to make columns to even heights. Below is an examples for the implementation on panels, wells and thumbnails

Note: You need to use flex-col and flex-grow to make footer / action buttons to align at the bottom. These classes are best to adjust the body-row of a 3 rowed element.
EXAMPLE
Title flex-col
Content here -- div with .flex-grow
Title
Content here -- div with no footer
Duis pharetra varius quam sit amet vulputate.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.

Login

Currenlty, Login containers exists in 2 types: standard center-align login box and 2 column login box. See the below examples to understand the layout

Standard login box

2 Columns login box

Two column login container is commonly used to support feature like Social Login options. Login system have been essential in web development. Hence, Login-container of 300px and 800px are commonly used by several websites.

Reading Sizes

When it comes to reading sites, large container sizes make it uneasy to read text on reading sites like wiki, blog, journal. furthermore, using offset in grid system, makes the reading width inconsistent at breakpoints. Therefore, Classes for different size containers have been added to make container widths customizable. You can also use container-smooth along with these sizes.

Size Class width
Normal Container .container 1170px
Medium Container .container-md 970px
Small Container .container-sm 750px
Extra Small Container .container-xs 480px

Responsive Spacing

Responsive Spacing allows you to modify the margin and padding of any component as per breakpoint

Margin

We have include margin options of 0,5,10,15,20,30,40,50 pixel to easily manage the look as per resolution.

Direction Breakpoint Size Points (px)

m

mt

mr

mb

ml

-

xs/(none)

sm

md

lg

-

0

1 (5px)

2 (10px)

3 (15px)

4 (25px)

5 (50px)

Padding

Similarly, padding options are available with same pixel sizes

Direction Breakpoint Size Points (px)

p

pt

pr

pb

pl

-

xs/(none)

sm

md

lg

-

1 (5px)

2 (10px)

3 (15px)

4 (25px)

5 (50px)

Responsive Float

Responsive variations also exist for each float value (imported from bootstrap 4).
Direction Breakpoint Size Points (px)

m

mt

mr

mb

ml

-

xs/(none)

sm

md

lg

-

left

right

none

Float left on viewports sized SM (small) or wider

Float left on viewports sized MD (medium) or wider

Float left on viewports sized LG (large) or wider

Responsive Text

Align

Responsive align is better alternate for text that require center align in mobile devices. below is an example

EXAMPLE

Left aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

Right aligned text on all viewport sizes.

Left aligned text on viewports sized SM (small) or wider.

Left aligned text on viewports sized MD (medium) or wider.

Left aligned text on viewports sized LG (large) or wider.

Responsive Font Size

Responsive text size give better option for representation of headers and pargraphs in different forms of device. Responsive text helps to provide better readable text for any width device

EXAMPLE
fs-xs-0-5
fs-xs-0-6
fs-xs-0-7
fs-xs-0-8
fs-xs-0-9
fs-xs-1-0
fs-xs-1-1
fs-xs-1-2
fs-xs-1-3
fs-xs-1-4
fs-xs-1-5
fs-xs-1-6
fs-xs-1-8
fs-sm-1-9
fs-sm-2-0
fs-sm-2-2
fs-sm-2-4
fs-sm-2-6
fs-sm-2-8
fs-sm-3-0
fs-sm-3-2
fs-sm-4-0

Responsive utilities

Break

Break Classes are designed to break a fixed width item to 100% width at a specific viewpoint. These are additional utilites made specific to modifying exsiting component where elements were given a non-responsive characteristic width. Available classes are:
  • .break-xs
  • .break-sm
  • .break-md
  • .break-lg

Buttons

Outline

Button Outline is a long awaited feature of bootstrap now added in bootstrap v4. As v4 is in alpha stage, here is a quick support by this project.

EXAMPLE

Responsive Block

It is favorable to have a full-width button for mobile devices. Hence, .btn-block-xs allows you to configure full-width button just for mobile devices.

Note: .btn-block-xs will only work on xs devices (i.e. mobile) and the class will not be used in other breakpoint.
<button class="btn btn-primary btn-block-xs" >Button</button> 

Rounded

.btn-rounded class converts left and right edges to rounded shape

EXAMPLE

Circle

.btn-circle enable you to create buttons with icons. 

EXAMPLE




Action

Action button is a floating button at bottom right or left corner. The concept of floating Action button is from Android material design. These action button is also helpful in creating a "back to top" similar to one on this page

  
    <button class="btn btn-default btn-circle btn-lg action-btn" >
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
    </button>
                            

Gutter

Gutter option is to support websites that use cards (well/panel/thumbnail) to represent their sections.

.gutter-justified do not work for width below 768px.
Note: Gutter is best applied on .row class.
EXAMPLE

Normal

default
default
default
gutter-0
gutter-0
gutter-0
gutter-5
gutter-5
gutter-5
gutter-10
gutter-10
gutter-10
gutter-15
gutter-15
gutter-15
gutter-20
gutter-20
gutter-20

Justified

default
default
default
gutter-0
gutter-0
gutter-0
gutter-5
gutter-5
gutter-5
gutter-10
gutter-10
gutter-10
gutter-15
gutter-15
gutter-15
gutter-20
gutter-20
gutter-20

Sizing

Easily make an element as wide or as tall (relative to its parent) with our width and height utilities (imported from bootstrap 4).

Width and height utilities are generated from the $sizes Sass map in _variables.scss. Includes support for 25%, 50%, 75%, and 100% by default. Modify those values as you need to generate different utilities here.

EXAMPLE
Width 25%
Width 50%
Width 75%
Width 100%
EXAMPLE
Height 25%
Height 50%
Height 75%
Height 100%

You can also use max-width: 100%; and max-height: 100%; utilities as needed.

EXAMPLE
Max-width = 100% [1000%x100]
EXAMPLE
Max-height 100%

Display property

Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.

How it works

Change the value of the display property with our responsive display utility classes. We purposely support only a subset of all possible values for display. Classes can be combined for various effects as you need.

Notation

As such, the classes are named using the format:

  • .d-{value} OR .d-xs-{value} for xs
  • .d-{breakpoint}-{value} for sm, md and lg.

Where value is one of:

  • none
  • inline
  • inline-block
  • block
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

The media queries effect screen widths with the given breakpoint or larger. For example, .d-lg-none sets display: none; on lg screen.

Examples

EXAMPLE
d-inline
d-inline
EXAMPLE
d-block d-block

Hiding elements

For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide element responsively for each screen size.

To hide elements simply use the .d-none class or one of the .d-{sm,md,lg}-none classes for any responsive screen variation.

To show an element only on a given interval of screen sizes you can combine one .d-*-none class with a .d-*-* class, for example .d-none .d-md-block will hide the element for all screen sizes except on medium and large devices.

Screen Size Class
Hidden on all .d-none
Hidden only on xs .d-none .d-sm-block
Hidden only on sm .d-sm-none .d-md-block
Hidden only on md .d-md-none .d-lg-block
Hidden only on lg .d-lg-none
Visible on all .d-block
Visible only on xs .d-block .d-sm-none
Visible only on sm .d-none .d-sm-block .d-md-none
Visible only on md .d-none .d-md-block .d-lg-none
Visible only on lg .d-none .d-lg-block
EXAMPLE
hide on screens wider than lg
hide on screens smaller than lg

Display in print

Change the display value of elements when printing with our print display utility classes. Includes support for the same display values as our responsive .d-* utilities.

  • .d-print-none
  • .d-print-inline
  • .d-print-inline-block
  • .d-print-block
  • .d-print-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

The print and display classes can be combined.

EXAMPLE
Screen Only (Hide on print only)
Print Only (Hide on screen only)
Hide up to large on screen, but always show on print

Position

Use these shorthand utilities for quickly configuring the position of an element. (imported from bootstrap 4)

Common values

Quick positioning classes are available, though they are not responsive.

    <div class="position-static">...</div>
    <div class="position-relative">...</div>
    <div class="position-absolute">...</div>
    <div class="position-fixed">...</div>
    <div class="position-sticky">...</div>

Fixed top

Position an element at the top of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add aditional CSS.

      <div class="fixed-top">...</div>

Fixed bottom

Position an element at the bottom of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add aditional CSS.

      <div class="fixed-bottom">...</div>

Sticky top

Position Sticky has not been imported from Bootstrap 4 as affix jQuery plugin is available in Bootstrap 3.

Borders

Border option provides the ability to sectionize a content and display in better way. Below are the options included in this project.

EXAMPLE

Row Split

.row-split class has been designed to implement vertical divide in bootstrap grid system.

EXAMPLE

Duis nisi ad eiusmod deserunt adipisicing fugiat et quis mollit ut sunt Lorem.

Ad deserunt Lorem Lorem esse et aute et mollit occaecat labore pariatur. Sunt labore ex eu eiusmod exercitation qui.

Officia cupidatat occaecat sint amet officia nostrud laboris sunt fugiat.

Checkout the example to learn more

No Border

No border class .b-0, .bt-0, .br-0, .bb-0 and .bl-0 provide useful customisation option to remove the borders. Below are the examples for elements without border.

EXAMPLE
EXAMPLE
Here is a Deep well but well has no borders
Panel content
  • Item 1 5
  • Item 2 4
  • Item 3 3
100%x100

Thumb

Button

Helper Classes

File Input

This Jasny designed file input allows you have uniform file input design for all browsers.

EXAMPLE
file Input

Progress Bar

EXAMPLE
.progress-xs for Some Task

30% Complete

70% Complete
.progress-sm for Some Task

70% Complete

70% Complete

List

Seperated Links

List seperated by dashes is a common feature used for links in footer. Some website also use such seperated list above navigation bar as Quick link. Below is an example of additional class added to .list-inline

EXAMPLE
  • abcd
  • abcdefg
  • abcdef

Center Align List

Center align a bullet list is a tricky thing to achieve. Neither text-align: center nor margin:auto would be perfectly able to center align a bullet list. Thus, .center-list-xs is added to display list as table in mobile devices. Below is an example for center aligned bullet list.

EXAMPLE
  • abcd
  • abcdefg
  • abcdef

No Underline

Underline below links make you feel that it is a hyperlink. but sometimes we just dont require underline. In that case you can use .no-underline to remove the undeline

Backgrounds

As the current web designs are shifting more towards card base system, more background color options are required to be applied on either on body or wrapper.

Class name Description
.bg-well Well Background color
.bg-jumbotron Jumbotron Background color
.bg-img This class includes the basic configuration required to set a background cover image on a selected element. You just need to define background-image CSS property along with this class.