Skip to content

Latest commit

 

History

History
136 lines (113 loc) · 5.74 KB

bootstrap.md

File metadata and controls

136 lines (113 loc) · 5.74 KB

Bootstrap online editor

Write, Run & Share Bootstrap code online using OneCompiler's Bootstrap online editor for free. It's one of the robust, feature-rich online editor for Bootstrap. Getting started with the OneCompiler's Bootstrap online editor is really simple and pretty fast. The editor shows sample boilerplate code when you choose language as 'Bootstrap' and start writing code to learn and test online instantly.

About Bootstrap

Bootstrap is a free CSS framework for front-end web development. It contains CSS and JavaScript based design templates for styling like typography, forms, buttons, navigation, and other interface components. It helps developers to develop websites faster and also easy to use. You can use built-in classes hence you don't need to develop elements from scratch.

Syntax help

Colors

Text colors
.text-muted .text-primary .text-success .text-info
.text-warning .text-danger .text-secondary .text-white
.text-dark .text-body .text-light
Background colors
.bg-primary .bg-success .bg-info .bg-warning
.bg-danger .bg-secondary .bg-dark .bg-light

Tables

Class Description
.table basic
.table-striped adds zebra-stripes to a table
.table-bordered adds borders on all sides of the table and cells
.table-hover adds a hover effect with grey background color on table rows
.table-primary adds Blue color to table row indicating an important action
.table-dark adds a black background to the table
.table-success adds Green color to table row indicating successful or positive action
.table-danger adds Red color to table row indicating a negative action
.table-info adds Light blue to table row indicating a neutral informative change or action
.table-warning Orange to table row indicating attention required
.table-active apply the hover color Grey to the table row or table cell
.table-secondary Grey: Indicates a slightly less important action
.table-light Light grey table or table row background
.table-dark Dark grey table or table row background
.thead-dark adds a black background to table headers
thead-light adds a grey background to table header

Images

<img src="sample.jpg" class="rounded" alt="Sample text" />
Class Description
.rounded adds rounded corners to an image
.rounded-circle shapes the image to a circle
.img-thumbnail shapes the image to a thumbnail
.float-right/.float-left floats image to right/left
.mx-auto.d-block Center an image by adding the utility classes .mx-auto (margin:auto) and .d-block (display:block)
.img-fluid Responsive images automatically adjust to fit the screen's size

Buttons

The below button classes can be used on <a>, <button> or <input>.

<button type="button" class="btn">Basic Button</button>
<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-secondary">Secondary Button</button>
<button type="button" class="btn btn-success">Success Button</button>
<button type="button" class="btn btn-info">Info Button</button>
<button type="button" class="btn btn-warning">Warning Button</button>
<button type="button" class="btn btn-danger">Danger Button</button>
<button type="button" class="btn btn-dark">Dark Button</button>
<button type="button" class="btn btn-light">Light Button</button>
<button type="button" class="btn btn-link">Link Button</button>
<button type="button" class="btn btn-outline-primary">Primary Outline Button</button>
<button type="button" class="btn btn-outline-secondary">Secondary Outline Button</button>
<button type="button" class="btn btn-outline-success">Success Outline Button</button>
<button type="button" class="btn btn-outline-info">Info Outline Button</button>
<button type="button" class="btn btn-outline-warning">Warning Outline Button</button>
<button type="button" class="btn btn-outline-danger">Danger Outline Button</button>
<button type="button" class="btn btn-outline-dark">Dark Outline Button</button>
<button type="button" class="btn btn-outline-light text-dark">Light Outline Button</button>

Spinners

<div class="spinner-border text-muted"></div>
<div class="spinner-border text-primary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-info"></div>
<div class="spinner-border text-warning"></div>
<div class="spinner-border text-danger"></div>
<div class="spinner-border text-secondary"></div>
<div class="spinner-border text-dark"></div>
<div class="spinner-border text-light"></div>
<!-- growing spinners-->
<div class="spinner-grow text-muted"></div>
<div class="spinner-grow text-primary"></div>
<div class="spinner-grow text-success"></div>
<div class="spinner-grow text-info"></div>
<div class="spinner-grow text-warning"></div>
<div class="spinner-grow text-danger"></div>
<div class="spinner-grow text-secondary"></div>
<div class="spinner-grow text-dark"></div>
<div class="spinner-grow text-light"></div>
<!--Spinner size-->
<div class="spinner-border spinner-border-sm"></div>
<div class="spinner-grow spinner-grow-sm"></div>

Grid

Class Description
.col- extra small devices with screen width less than 576px
.col-sm- small devices with screen width equal to or greater than 576px
.col-md- medium devices with screen width equal to or greater than 768px
.col-lg- large devices with screen width equal to or greater than 992px
.col-xl- xlarge devices with screen width equal to or greater than 1200px
<div class="row">
  <div class="col-3">col-3</div>
  <div class="col-6">col-6</div>
  <div class="col-3">col-3</div>
</div>

Tooltip

Add the data-toggle="tooltip" to create a tooltip to an element.

<a href="#" data-toggle="tooltip" title="Click to see the result">Run</a>