Bootstrap - Responsive front-end framework

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive pre-built components, and powerful plugins built on jQuery. Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.

Quick start

Several quick start options are available:

  • Download the latest release.
  • Clone the repo: git clone https://github.com/twbs/bootstrap.git
  • Install with npmnpm install bootstrap@4.0.0-beta
  • Install with Bowerbower install bootstrap#v4.0.0-beta

Read the Getting started page for information on the framework contents, templates and examples, and more.

What’s included

Within the download you’ll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You’ll see something like this:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   └── bootstrap.min.css.map
└── js/
    ├── bootstrap.js
    └── bootstrap.min.js

We provide compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*). CSS source maps (bootstrap.*.map) are available for use with certain browsers’ developer tools.

Bootstrap CDN

When you only need to include Bootstrap’s compiled CSS or JS, you can use the Bootstrap CDN.

CSS only

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

JS, Popper, and jQuery

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-3.2.1.slim.min.js%22%20integrity%3D%22sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr%2FrE9%2FQpg6aAZGJwFDMVNA%2FGpGFF93hXpG5KkN%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fpopper.js%2F1.11.0%2Fumd%2Fpopper.min.js%22%20integrity%3D%22sha384-b%2FU6ypiBEHpOf%2F4%2B1nzFpr53nxSS%2BGLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F4.0.0-beta%2Fjs%2Fbootstrap.min.js%22%20integrity%3D%22sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

Starter template

Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  </head>
  <body>
    
<h1>Hello, world!</h1>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-3.2.1.slim.min.js%22%20integrity%3D%22sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr%2FrE9%2FQpg6aAZGJwFDMVNA%2FGpGFF93hXpG5KkN%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fpopper.js%2F1.11.0%2Fumd%2Fpopper.min.js%22%20integrity%3D%22sha384-b%2FU6ypiBEHpOf%2F4%2B1nzFpr53nxSS%2BGLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F4.0.0-beta%2Fjs%2Fbootstrap.min.js%22%20integrity%3D%22sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
  </body>
</html>

That’s all you need for overall page requirements. Visit the Layout docs or our official examples to start laying out your site’s content and components.

Start Bootstrap – Creative

Creative is a one page Bootstrap theme for creatives, small businesses, and other multipurpose uses. The theme includes a number of rich features and plugins that you can use as a great boilerplate for your next Bootstrap based project!

Getting Started

git clone https://github.com/BlackrockDigital/startbootstrap-creative.git
Start Bootstrap - Creative

More themes

All Free Bootstrap Themes & Templates – Start Bootstrap


Bootstrap – Responsive front-end framework

Learn more..

David

I’m freelance graphic, website designer. Currently, I get into the secrets of the world of Fedora Linux, SSH, WP-CLI and I’m preparing this blog about WordPress.

More:

Generate Fresh New Web Design Ideas Based On Diffe... Culture is an important aspect of web design ideas  that is often overlooked. However, designing a website with culture and language differences in mi...
Anatomy of A Perfect Website Template Lisa from Template.net send us nice Infographic: Anatomy of A Perfect Website Template. With fluidic grids, media queries and flexible images we can e...
Tips for Best Reflection Photography Photography is like story telling. It provokes a thought and induces a feeling. When you photograph a person he/she lets you into their life, albeit f...
Bower – a package manager for the web Web sites are made of lots of things — frameworks, libraries, assets, and utilities. Bower manages all these things for you. Keeping track of all th...
Keywords KWP and SEO Keywords KWP and SEO, Keyword Phrase, Onpage SEO, Offpage SEO, H1, H2, indexed, ranked.... what are these things? It's no wonder we get confused and...

Leave a Reply


Close Menu

Pin It on Pinterest