twitter-bootstrap Tutorial => Getting started with twitter-bootstrap

Remarks

Bootstrap is a HTML, CSS, and JavaScript framework used to create websites that are created using a mobile-first paradigm as well as responsive web design (RWD). It uses a combination of premade CSS classes and JavaScript to make a variety of things on the web. It includes things such as a custom, responsive grid that allows websites to be viewed in on any screen, a dropdown navbar that is capable of being responsive and even simple things that can be time intensive such as premade buttons, forms and accordions to name a few.

Bootstrap can be useful for the following reasons:

Time savings: Bootstrap features many things that are pre-built, and simply need to be called upon, when writing code. This saves a considerable amount of time, and can greatly reduce the time needed to code a website.
Built with responsive web design in mind: Bootstrap allows web developers to not be concerned about creating things that will scale with the size of their screen, as Bootstrap uses mobile-first, responsive design that allows them to build things that will work on any screen size.
Simplifies design process: Bootstrap comes prebuilt with elements that have good design practices. This can be useful for those whose web design skills are not that great, or for those who view design as a tedious task, as many of Bootstrap classes are aesthetically pleasing and great to look at.

This section should mention any large subjects within twitter-bootstrap, and link out to the related topics. Since the Documentation for twitter-bootstrap is new, you may need to create initial versions of those related topics.

Versions

Version	Release Date
4.0	2999-01-01
3.3.7	2016-07-25
3.3.6	2015-11-24
3.3.5	2015-06-15
3.3.4	2015-03-16
3.3.1	2014-11-12
3.3.0	2014-10-29
3.2.0	2014-06-26
3.1.0	2014-01-30
3.0	2013-08-19
2.3	2013-02-07
2.2	2012-10-29
2.1	2012-08-20
2.0	2012-02-01
1.0	2011-08-18

Basic Template

<!DOCTYPE html>
<html lang="en">
  
    <head>
        
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    
        
        <title>Bootstrap 101 Template</title>  <!-- The title of the Website -->


        <!-- Reference to Bootstrap's CSS file -->
        <!-- This is the line to reference the bootstrap's Stylesheet -->
        <link href="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Bcss%2Fbootstrap.min.css%26quot%3B%2520rel%3D%26quot%3Bstylesheet%26quot%3B%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B!--%2520HTML5%2520shim%2520and%2520Respond.js%2520for%2520IE8%2520support%2520of%2520HTML5%2520elements%2520and%2520media%2520queries%2520--%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B!--%2520WARNING%3A%2520Respond.js%2520doesn"t work if you view the page via file:// -->
        <!-- [if lt IE 9] -->
         <script src="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Bhttps%3A%2F%2Foss.maxcdn.com%2Fhtml5shiv%2F3.7.2%2Fhtml5shiv.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bscript%2520src%3D%26quot%3Bhttps%3A%2F%2Foss.maxcdn.com%2Frespond%2F1.4.2%2Frespond.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B!--%5Bendif%5D--%26gt%3B%2520%2520%2520%2520%2520%2520%26lt%3B%2Fhead%26gt%3B%2520%2520%2520%2520%2520%2520%26lt%3Bbody%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bh1%26gt%3BHello%2C%2520world!%26lt%3B%2Fh1%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B!--%2520Referencing%2520jQuery%2520(necessary%2520for%2520Bootstrap%2520JavaScript%2520plugins(bootstrap.min.js)%2520to%2520work)%2520--%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bscript%2520src%2520%3D%2520%26quot%3Bhttps%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.11.3%2Fjquery.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B!--%2520Referencing%2520Javascript%2520Bootstrap%2520Plugin%2520to%2520Facilitate%2520Bootstrap%2520Animations%2520and%2520functionalities.%2520--%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B!--%2520(Necessary%2520to%2520run%2520Bootstrap)%2520--%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bscript%2520src%3D%26quot%3Bjs%2Fbootstrap.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%2520%2520%26lt%3B%2Fbody%26gt%3B%26lt%3B%2Fhtml%26gt%3B%253C%2Fcode">



                            Basic webpage using bootstrap components
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Bcss%2Fbootstrap.min.css%26quot%3B%2520rel%3D%26quot%3Bstylesheet%26quot%3B%26gt%3B%2520%2520%2520%2520%26lt%3B!--%2520HTML5%2520shim%2520and%2520Respond.js%2520for%2520IE8%2520support%2520of%2520HTML5%2520elements%2520and%2520media%2520queries%2520--%26gt%3B%2520%2520%2520%2520%26lt%3B!--%2520WARNING%3A%2520Respond.js%2520doesn"t work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Bhttps%3A%2F%2Foss.maxcdn.com%2Fhtml5shiv%2F3.7.2%2Fhtml5shiv.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%2520%2520%26lt%3Bscript%2520src%3D%26quot%3Bhttps%3A%2F%2Foss.maxcdn.com%2Frespond%2F1.4.2%2Frespond.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%26lt%3B!%5Bendif%5D--%26gt%3B%2520%2520%26lt%3B%2Fhead%26gt%3B%2520%2520%26lt%3Bbody%26gt%3B%2520%2520%2520%2520%2520%26lt%3B!--%2520Fixed%2520navbar%2520--%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bnav%2520class%3D%26quot%3Bnavbar%2520navbar-default%2520navbar-fixed-top%26quot%3B%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bdiv%2520class%3D%26quot%3Bcontainer%26quot%3B%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bdiv%2520class%3D%26quot%3Bnavbar-header%26quot%3B%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bbutton%2520type%3D%26quot%3Bbutton%26quot%3B%2520class%3D%26quot%3Bnavbar-toggle%2520collapsed%26quot%3B%2520data-toggle%3D%26quot%3Bcollapse%26quot%3B%2520data-target%3D%26quot%3B%23navbar%26quot%3B%2520aria-expanded%3D%26quot%3Bfalse%26quot%3B%2520aria-controls%3D%26quot%3Bnavbar%26quot%3B%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bspan%2520class%3D%26quot%3Bsr-only%26quot%3B%26gt%3BToggle%2520navigation%26lt%3B%2Fspan%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bspan%2520class%3D%26quot%3Bicon-bar%26quot%3B%26gt%3B%26lt%3B%2Fspan%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bspan%2520class%3D%26quot%3Bicon-bar%26quot%3B%26gt%3B%26lt%3B%2Fspan%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bspan%2520class%3D%26quot%3Bicon-bar%26quot%3B%26gt%3B%26lt%3B%2Fspan%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2Fbutton%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Ba%2520class%3D%26quot%3Bnavbar-brand%26quot%3B%2520href%3D%26quot%3B%23%26quot%3B%26gt%3BProject%2520name%26lt%3B%2Fa%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2Fdiv%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bdiv%2520id%3D%26quot%3Bnavbar%26quot%3B%2520class%3D%26quot%3Bnavbar-collapse%2520collapse%26quot%3B%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bul%2520class%3D%26quot%3Bnav%2520navbar-nav%26quot%3B%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bli%2520class%3D%26quot%3Bactive%26quot%3B%26gt%3B%26lt%3Ba%2520href%3D%26quot%3B%23%26quot%3B%26gt%3BHome%26lt%3B%2Fa%26gt%3B%26lt%3B%2Fli%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bli%26gt%3B%26lt%3Ba%2520href%3D%26quot%3B%23about%26quot%3B%26gt%3BAbout%26lt%3B%2Fa%26gt%3B%26lt%3B%2Fli%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bli%26gt%3B%26lt%3Ba%2520href%3D%26quot%3B%23contact%26quot%3B%26gt%3BContact%26lt%3B%2Fa%26gt%3B%26lt%3B%2Fli%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bli%2520class%3D%26quot%3Bdropdown%26quot%3B%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Ba%2520href%3D%26quot%3B%23%26quot%3B%2520class%3D%26quot%3Bdropdown-toggle%26quot%3B%2520data-toggle%3D%26quot%3Bdropdown%26quot%3B%2520role%3D%26quot%3Bbutton%26quot%3B%2520aria-haspopup%3D%26quot%3Btrue%26quot%3B%2520aria-expanded%3D%26quot%3Bfalse%26quot%3B%26gt%3BDropdown%2520%26lt%3Bspan%2520class%3D%26quot%3Bcaret%26quot%3B%26gt%3B%26lt%3B%2Fspan%26gt%3B%26lt%3B%2Fa%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bul%2520class%3D%26quot%3Bdropdown-menu%26quot%3B%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bli%26gt%3B%26lt%3Ba%2520href%3D%26quot%3B%23%26quot%3B%26gt%3BAction%26lt%3B%2Fa%26gt%3B%26lt%3B%2Fli%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bli%26gt%3B%26lt%3Ba%2520href%3D%26quot%3B%23%26quot%3B%26gt%3BAnother%2520action%26lt%3B%2Fa%26gt%3B%26lt%3B%2Fli%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bli%26gt%3B%26lt%3Ba%2520href%3D%26quot%3B%23%26quot%3B%26gt%3BSomething%2520else%2520here%26lt%3B%2Fa%26gt%3B%26lt%3B%2Fli%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bli%2520role%3D%26quot%3Bseparator%26quot%3B%2520class%3D%26quot%3Bdivider%26quot%3B%26gt%3B%26lt%3B%2Fli%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bli%2520class%3D%26quot%3Bdropdown-header%26quot%3B%26gt%3BNav%2520header%26lt%3B%2Fli%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bli%26gt%3B%26lt%3Ba%2520href%3D%26quot%3B%23%26quot%3B%26gt%3BSeparated%2520link%26lt%3B%2Fa%26gt%3B%26lt%3B%2Fli%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bli%26gt%3B%26lt%3Ba%2520href%3D%26quot%3B%23%26quot%3B%26gt%3BOne%2520more%2520separated%2520link%26lt%3B%2Fa%26gt%3B%26lt%3B%2Fli%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2Ful%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2Fli%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2Ful%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bul%2520class%3D%26quot%3Bnav%2520navbar-nav%2520navbar-right%26quot%3B%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bli%26gt%3B%26lt%3Ba%2520href%3D%26quot%3B..%2Fnavbar%2F%26quot%3B%26gt%3BDefault%26lt%3B%2Fa%26gt%3B%26lt%3B%2Fli%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bli%26gt%3B%26lt%3Ba%2520href%3D%26quot%3B..%2Fnavbar-static-top%2F%26quot%3B%26gt%3BStatic%2520top%26lt%3B%2Fa%26gt%3B%26lt%3B%2Fli%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bli%2520class%3D%26quot%3Bactive%26quot%3B%26gt%3B%26lt%3Ba%2520href%3D%26quot%3B.%2F%26quot%3B%26gt%3BFixed%2520top%2520%26lt%3Bspan%2520class%3D%26quot%3Bsr-only%26quot%3B%26gt%3B(current)%26lt%3B%2Fspan%26gt%3B%26lt%3B%2Fa%26gt%3B%26lt%3B%2Fli%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2Ful%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2Fdiv%26gt%3B%26lt%3B!--%2F.nav-collapse%2520--%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2Fdiv%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2Fnav%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bdiv%2520class%3D%26quot%3Bcontainer%26quot%3B%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bdiv%2520class%3D%26quot%3Bjumbotron%26quot%3B%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bh1%26gt%3BNavbar%2520example%26lt%3B%2Fh1%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bp%26gt%3BThis%2520example%2520is%2520a%2520quick%2520exercise%2520to%2520illustrate%2520how%2520the%2520default%2C%2520static%2520and%2520fixed%2520to%2520top%2520navbar%2520work.%2520It%2520includes%2520the%2520responsive%2520CSS%2520and%2520HTML%2C%2520so%2520it%2520also%2520adapts%2520to%2520your%2520viewport%2520and%2520device.%26lt%3B%2Fp%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bp%26gt%3BTo%2520see%2520the%2520difference%2520between%2520static%2520and%2520fixed%2520top%2520navbars%2C%2520just%2520scroll.%26lt%3B%2Fp%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bp%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Ba%2520class%3D%26quot%3Bbtn%2520btn-lg%2520btn-primary%26quot%3B%2520href%3D%26quot%3B..%2F..%2Fcomponents%2F%23navbar%26quot%3B%2520role%3D%26quot%3Bbutton%26quot%3B%26gt%3BView%2520navbar%2520docs%2520%26amp%3Braquo%3B%26lt%3B%2Fa%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2Fp%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2Fdiv%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2Fdiv%26gt%3B%2520%26lt%3B!--%2520%2Fcontainer%2520--%26gt%3B%2520%2520%2520%2520%26lt%3B!--%2520jQuery%2520(necessary%2520for%2520Bootstrap"s JavaScript plugins) -->
    <script src="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Bhttps%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.11.3%2Fjquery.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%26lt%3B!--%2520Include%2520all%2520compiled%2520plugins%2520(below)%2C%2520or%2520include%2520individual%2520files%2520as%2520needed%2520--%26gt%3B%2520%2520%2520%2520%26lt%3Bscript%2520src%3D%26quot%3Bjs%2Fbootstrap.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%26lt%3B%2Fbody%26gt%3B%26lt%3B%2Fhtml%26gt%3B%253C%2Fcode"> 


                            Installation/Setup
Downloading:

Download Bootstrap directly or clone, etc. from the GitHub repository
Download your customized version of Bootstrap from official docs
Install with bower: bower install bootstrap 
Install with npm: npm install bootstrap 
Install with composer: composer require twbs/bootstrap 

The File Structure

Installing:
Within your HTML page, include Bootstrap's CSS, JS, and the dependency of jQuery (pre version 3, at least as of the latest Bootstrap version). Please note that if you plan to utilize Bootstrap's JavaScript features, your jQuery reference must come before your bootstrap.js reference within your HTML.
You can utilize your installed Bootstrap files from the above section, or reference a CDN provided by the makers of Bootstrap (links taken from Getting Started with Bootstrap):
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Bhttps%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.3.7%2Fcss%2Fbootstrap.min.css%26quot%3B%2520integrity%3D%26quot%3Bsha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va%2BPmSTsz%2FK68vbdEjh4u%26quot%3B%2520crossorigin%3D%26quot%3Banonymous%26quot%3B%26gt%3B%26lt%3B!--%2520Optional%2520theme%2520--%26gt%3B%26lt%3Blink%2520rel%3D%26quot%3Bstylesheet%26quot%3B%2520href%3D%26quot%3Bhttps%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.3.7%2Fcss%2Fbootstrap-theme.min.css%26quot%3B%2520integrity%3D%26quot%3Bsha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl%2FSp%26quot%3B%2520crossorigin%3D%26quot%3Banonymous%26quot%3B%26gt%3B%26lt%3B!--%2520Latest%2520compiled%2520and%2520minified%2520JavaScript%2520--%26gt%3B%26lt%3Bscript%2520src%3D%26quot%3Bhttps%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.3.7%2Fjs%2Fbootstrap.min.js%26quot%3B%2520integrity%3D%26quot%3Bsha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa%26quot%3B%2520crossorigin%3D%26quot%3Banonymous%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%253C%2Fcode"> 

A very basic Bootstrap webpage:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Bcss%2Fbootstrap.min.css%26quot%3B%2520rel%3D%26quot%3Bstylesheet%26quot%3B%26gt%3B%2520%2520%2520%2520%26lt%3B!--%2520HTML5%2520shim%2520and%2520Respond.js%2520for%2520IE8%2520support%2520of%2520HTML5%2520elements%2520and%2520media%2520queries%2520--%26gt%3B%2520%2520%2520%2520%26lt%3B!--%2520WARNING%3A%2520Respond.js%2520doesn"t work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Bhttps%3A%2F%2Foss.maxcdn.com%2Fhtml5shiv%2F3.7.2%2Fhtml5shiv.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%2520%2520%26lt%3Bscript%2520src%3D%26quot%3Bhttps%3A%2F%2Foss.maxcdn.com%2Frespond%2F1.4.2%2Frespond.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%26lt%3B!%5Bendif%5D--%26gt%3B%2520%2520%26lt%3B%2Fhead%26gt%3B%2520%2520%26lt%3Bbody%26gt%3B%2520%2520%2520%2520%26lt%3Bh1%26gt%3BHello%2C%2520world!%26lt%3B%2Fh1%26gt%3B%2520%2520%2520%2520%26lt%3B!--%2520jQuery%2520(necessary%2520for%2520Bootstrap"s JavaScript plugins) -->
    <script src="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Bhttps%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.11.3%2Fjquery.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%26lt%3B!--%2520Include%2520all%2520compiled%2520plugins%2520(below)%2C%2520or%2520include%2520individual%2520files%2520as%2520needed%2520--%26gt%3B%2520%2520%2520%2520%26lt%3Bscript%2520src%3D%26quot%3Bjs%2Fbootstrap.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%26lt%3B%2Fbody%26gt%3B%26lt%3B%2Fhtml%26gt%3B%253C%2Fcode"> 


                            When to use Bootstrap
Bootstrap is an opinionated framework for HTML, CSS and Javascript. It contains basic styling and functionality for what have become accepted [User Interface] elements, such as form elements, buttons, modal windows and navigation elements.
Bootstrap is a responsive web framework, meaning it is designed to adapt layout and design for screen sizes large and small, such as mobile devices, tablets and desktop computers, all in a single code base.
One of the fundamental concepts of Bootstrap is the grid framework. By applying classes to HTML elements, it is possible to create intricate layouts using a basic grid of twelve columns. For example, a four column layout might adapt to two columns on tablet devices and one column on mobile devices. The grid uses media queries , a CSS method for targeting specific screen sizes, to achieve this.
Bootstrap performs particularly well if:

Custom design is not a top priority
You are more comfortable editing HTML and adding classes than you are creating custom CSS
You are comfortable using a framework that will have many visual similarities to many other websites

Bootstrap can be used by those who are new to HTML, CSS and Javascript, since the documentation is excellent. However, there is a learning curve for those not entirely comfortable with the three basic technologies used by Bootstrap (HTML, CSS and Javascript).
It is possible to purchase or download Bootstrap themes in order to alter the style or functionality of Bootstrap. It is also possible to use Bootstrap as a starting point, with customization of CSS and Javascript.

                    

                        
                        


                        
                            
                                Got any twitter-bootstrap Question?
                                

                                
                                
                                    Ask any twitter-bootstrap Questions and Get Instant Answers from ChatGPT AI:
                                    
                                
                                
                            
                        

                    


                        
                            
                            
                                PDF - Download twitter-bootstrap for free
                            
                        
                    

                    
                    

                    
                         Previous
                         Next