Bootstrap Responsive Front-End Framework
It is licensed under a variety of copyleft license.
User interface components
Bootstrap includes CSS code that applies a modern style to many common user interface components, including:
- navigation bars
- thumbnail images
- drop-down menus
- View the Getting Started documentation to see the full range of styles and components Bootstrap offers.
- All the default styles in this theme can be customized, while still maintaining the elegant features of the theme as a whole.
- Simply override any of Bootstrap's CSS styles in your own custom CSS file to customize your page.
Bootstrap includes tools to help simplify common layout issues of web pages, such as:
- grid layout
- responsive design
- fixed top navigation
Bootstrap offers a grid layout system, which breaks down the content of any page into a series of rows and columns. The position of any element on the page can then be specified in terms of which row or column to place it in. This is achieved by simply adding specific classes to the HTML tags of elements that you would like to position this way.
The grid layout can easily be designed to be responsive to devices with different browser widths.
Bootstrap was developed according to the mobile-first methodology, meaning that mobile compatibility has been included into all features of the framework.
Two features, in particular, simply the design of sophisticated responsive sites:
- easily specify the grid layout position of any element on the page at all responsive breakpoints by simply specifying the class attribute in the HTML
- design any element to appear or disappear at each responsive breakpoint using special responsive utility classes, also used in the class attribute in the HTML.
Bootstrap allows for simple creation of navigation that "sticks" to the top of the browser viewport.
A few common widgets:
Install Bootstrap via download
To do this, you will need to be familiar with some fundamental computer tasks, such as downloading files and then finding them on your hard drive, creating folders, moving folders, unzipping compressed files, linking files with proper file paths, and writing HTML code.
- Create a new folder for your project
- Create a typical project folder setup, with css, js, and images sub-folders
- Download the latest Bootstrap code from the Bootstrap web site
- The downloaded file is a compressed zip file. Unzip it.
- Add your own custom CSS file into the CSS folder - you will add any customizations into this file.
- download and 'install' JQuery separately.
Install from CDN hosted files
Try it out
You are now ready to add links to these Bootstrap files to your own HTML code.
- Create a new HTML file named index.html in your project folder
- Link your HTML file to the Bootstrap CSS file, bootstrap.min.css
- Save the file
- Open the file in your web browser
- Verify that all the linked files have indeed loaded by viewing the Network tab of your web browser's Developer Tools
If text in the body of your web page shows up in a sans-serif font (Helvetica Neue Medium), then you have correctly loaded up the Bootstrap default theme! But if the text appears instead in a serif font (Times Bold), then it is not working.
Once you have this working, go on and try to adapt some of the other examples.