Bootstrap, from Twitter Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions. View project on GitHub Download Bootstrap (v2.0.2). The latest tweets from @BootstrapCook.
Twitter Bootstrap has lots of stylesheets for all design elements, which fastens the website creation process. With the help of Twitter Bootstrap, you also can make your website responsive (it means that your design will adjust according to the screen size – from a PC monitor to the mobile phone screen). Bootstrap Icons. For the first time ever, Bootstrap has its own open source SVG icon library, designed to work best with our components and documentation. Bootstrap Icons are designed to work best with Bootstrap components, but they’ll work in any project.
Latest versionReleased:
Provides a Django app whose static folder contains Bootstrap assets
Project description
Overview
This package provides a Django app whose static folder containsthe sources of Bootstrap, nothing more and nothingless. The un-minified LESS and javascript sources are included to beintegrated into your Django site as you see fit. If you simply want to use the minified CSS and JSfiles provided by the Bootstrap project, you probably don’t need this anyway.
Further goals of this project include:
- To include Bootstrap as a git submodule, so as to include specific release tags and avoid themess of managing a copy of Bootstrap.
- To provide versions that mirror Bootstrap releases going forward.
And that’s it! Bootstrap pre-packaged for Django.
I found that other similar projects:
- Did not keep up with recent versions of Bootstrap.
- Simply made a copy of the Bootstrap sources, messy and unnecessary.
- Tied the packaging to their own clever template tags or other Django components. You should haveyour choice of these things apart from this packaging.
Setup
NOTE The paths of the included bootstrap assets have now been namespaced within the app’sstatic folder. The less and js folders now reside within a twitter_bootstrapfolder.
First, install the app:
Then include it in your Django project:
This also assumes you haven’t removed django.contrib.staticfiles.finders.AppDirectoriesFinderfrom the STATICFILES_FINDERS config setting.
Provided staticfiles
Of course what’s provided is just Bootstrap, but more specifically…
glyphicons
These don’t need to be specified or configured in your project, but they are included all thesame.
- twitter_bootstrap/fonts/glyphicons-halflings-regular.eot
- twitter_bootstrap/fonts/glyphicons-halflings-regular.svg
- twitter_bootstrap/fonts/glyphicons-halflings-regular.ttf
- twitter_bootstrap/fonts/glyphicons-halflings-regular.woff
LESS
- twitter_bootstrap/less/bootstrap.less
Also included are lots of other LESS files included by the above that aren’t worth listing out.The above file is the common entry point for usage of Bootstrap styles.
JavaScript
Unlike the LESS sources, the javascript modules each represent a feature setthat you may or may not want to include in your site. These files aretypically hand-picked based on the needs of your site. Please check theBootstrap documentation for info on which of these modules depends on others.
- twitter_bootstrap/js/transition.js
- twitter_bootstrap/js/modal.js
- twitter_bootstrap/js/dropdown.js
- twitter_bootstrap/js/scrollspy.js
- twitter_bootstrap/js/tab.js
- twitter_bootstrap/js/tooltip.js
- twitter_bootstrap/js/popover.js
- twitter_bootstrap/js/alert.js
- twitter_bootstrap/js/button.js
- twitter_bootstrap/js/collapse.js
- twitter_bootstrap/js/carousel.js
- twitter_bootstrap/js/affix.js
Plain Usage
If you’re not using an asset manager, you can just include them as usual in your site templates:
Usage with an asset pipeline
Of course I recommend you not go plain, and instead use an asset manager that helps with thefiltering, concatenating, minification, and other processing of your static assets. One suchmanager is django-pipeline.
- Follow the setup instructions for django-pipeline
- Define asset groups which provide Bootstrap
- Use asset groups in your templates.
Configuration
Create asset groups including the bootstrap LESS and Javascript you want to include:
Of course you need to set up aLESS compilerfor pipeline to use when processing the styles:
Then, in thePIPELINE_LESS_ARGUMENTSsetting, supply an --include option which tells lessc where bootstrap LESS sources and anyof your own live:
Please note that for any LESS sources outside of your project root, usually these are installedDjango packages, it is simpler to import the package and determine the package root from theimport module’s __file__ attribute.
Template setup
A sample Django template using the assets:
That’s it. Enjoy!
Version ranges matching bootstrap versions
As stated above in the goals, versions of this package should match versions of Bootstrap, whereavailable. This presents something of a problem if and when we need to make updates to thepackaging here. We can’t just upgrade any of the three common components of semantic versioning,because those map to versions of Bootstrap. So, we’ll use revisions when needed.
E.g., suppose we have django-twitter-bootstrap 3.2.0 which packages Bootstrap 3.2.0. If weneed to enhance or fix the packaging, we release it as revised version 3.2.0-1.
Therefore, if you’re getting a packaging for the first time you could specify it as a very tightrange of that target version or no less than the next patch level version. E.g., target 3.2.0 with>=3.2.0,<3.2.1. Each of these captures all revisions to packagings targeting a specific versionof Bootstrap.
Finally, it should be re-iterated that the need for this should be the exception and versionsshould generally mirror Bootstrap more directly going forward.
Release historyRelease notifications | RSS feed
3.3.0
3.2.0-1
3.2.0
3.1.1
3.1.0
3.0.3
3.0.2
3.0.1-2
3.0.1-1
3.0.1
3.0.0
3.0.0-rc2 pre-release
3.0.0-rc1 pre-release
2.3.2
2.3.1
2.3.0
2.2.2-1
2.2.2
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
| Filename, size | File type | Python version | Upload date | Hashes |
|---|---|---|---|---|
| Filename, size django-twitter-bootstrap-3.3.0.tar.gz (156.9 kB) | File type Source | Python version None | Upload date | Hashes |
Hashes for django-twitter-bootstrap-3.3.0.tar.gz
| Algorithm | Hash digest |
|---|---|
| SHA256 | 4e6084967251da930d353d0de73bcc1885c20a29551ce68ae12ac16ddba36079 |
| MD5 | 74ae99cd6ad93e6a93003dc5ee5d789c |
| BLAKE2-256 | 4388d50fc2efb3b8a72d192620fcb2879c81ebd6e5057c41a980d76bc02bc418 |
The web development field is quite vast and chances are you have heard of Bootstrap at some level or the other. And if you’re still struggling what is Bootstrap, then you have come to the right place. Here at the TemplateToaster Bootstrap builder blog, this Bootstrap tutorial for beginners will help you understand the why and how of Bootstrap.
Since its inception in 2011, it has come a long way with its four versions. In the present scenario, all of us are somewhere dependent on the internet. And the websites we visit needs to be responsive. Now you must be wondering what is responsive web design? Well, responsive design is an approach that defines that the design should be able to respond as per the user’s device. And this intuitive CSS framework plays an important role in achieving a responsive web design.
What is Bootstrap?
Bootstrap is a collection of reusable pieces of code written in HTML, CSS, and JavaScript. However, it is a free and open-source front end web development framework to help you create responsive websites and web applications.
Also, it saves you from having to write lengthy code, since it is intended to create responsive websites. It allows a website to work optimally on varied screen sizes from small screen size as a smartphone to a big screen size of a personal computer. Basically, it sets you free from the burden of building a device-specific site and keeping Bootstrap cheat sheets handy makes it even simpler.
History of Bootstrap
The Bootstrap framework was initially developed by a team of Twitter web developers Mark Otto and Jacob Thornton as an internal development tool. Later in August 2011, it was released as an open-source project on GitHub. And quickly became one of the most popular frameworks. It was a well-accepted framework since its inception, however, the release of version 2 became the primary reason for its immense popularity.
How to get started with Bootstrap?
Today web developers have plenty of advanced frameworks within their range that help them work efficiently and effortlessly. However, It is one such framework that has made web development considerably more streamlined and makes things a lot easier. Sounds great! Now let’s understand the whole concept in detai
What are uses of Bootstrap?
Bootstrap framework is mainly focused to simplify the web development process. It is one of the widely used front-end frameworks. There are tons of persuasive benefits of this technology that can allure you to use it for your next web project for sure.
However, there are some other CSS frameworks available in the market. But, before going for any, you should make a comprehensive comparison between them like Bootstrap Vs Foundation. Likewise, you can compare the two versions of Bootstrap3 Vs Bootstrap4 to be sure what you want to choose for your project. Having said that, let’s check out the significant benefits thoroughly.
Responsiveness
Nowadays responsiveness is the essence of any website. Thanks to the fluid grid layout of its that adjust dynamically as per the screen resolution. It comes with ready-made classes that make web development a breeze.
Ease of Use
Certainly, it is one of the most comfortable and easy to use frameworks. It saves you a lot of time that you would have spent writing huge lines of code. It is greatly adaptable.
Speedy Development
Speed happens to be the best features you can expect from any framework. Instead of coding from scrap, you can make use of given pre-build coding blocks and set up your website well. However, you can also use free Bootstrap templates available to make things comfortable.
Customizable
This sounds really interesting! Making customizations according to your requirements is indeed a feature to look forward to. Undoubtedly, it is pretty straightforward to customize it as per your project needs.
Support
It has a huge support community that helps you fix any issue. This community support steadily works on performance improvement and release new updates to fix issues.
Open Source
JavaScript
One of the main reasons to use it is the fact that it is a free and open-source project, hosted on Github. You don’t have to purchase license issues to use it. Just free for everyone.
Well, these were some of the uses or advantages of it. However, having knowledge of its mechanism can help run it flawlessly.
What Bootstrap Packages Contain?
Bootstrap includes packages to deliver the desired result. Let’s see what these packages contain. It incorporates:
CSS − Certainly, it has several impressive features for global CSS settings, fundamental HTML elements styled with extensible classes along with an advanced grid system. check out what is css.
JavaScript Plugins − Hundreds of custom jQuery plugins to ease the flow.
Components − Over a dozen reusable components in its repository to create navigation, icons, dropdowns, alerts, and much more.
Scaffolding − The basic structure of has Grid System, link styles, and background.
Customize − You can customize its components and jQuery plugins to get your own version.
Free Bootstrap Templates
Now you know integrating Bootstrap framework in your project can give you a fully responsive website. While using a pre-made Bootstrap template for your project can be beneficial too. Yes! You can use free Bootstrap templates for your web projects. A template decides how your website will appear. And getting the opportunity to work with a completely responsive, free, and entirely compatible template can save you hours of hard work.
However, if you still wish to create your own template from scratch, you can do that as well. Choose the best Bootstrap Offline Website Builder software to create your template with ease. Make sure the chosen website builder should be suitable for both professional and novice web developers to learn web design concepts readily. Check out graphic design software.
Who is Using Bootstrap?
Without a doubt, Bootstrap is flexible and the most preferred technique that can help you build websites of any scale, low to high. That is to say, some of the well-known giants like LinkedIn, Spotify, Snapchat, Twitter, NASA, Vogue, and various others use massive technology for their websites.
Websites using Bootstrap – Statistics
| Websites using Bootstrap | Market Dominance | CMS with in-built Bootstrap Integration | Supported Browsers | Platform Support |
|---|---|---|---|---|
| 25.7% | 54.6% | OpenCart | Chrome, Safari, Firefox | iOS, Android, Windows |
What is Bootstrap: In a Nutshell
It is surely a powerful framework that makes the developer’s job quite easier and painless. However, any developer irrespective of their web experience can use it in their projects. It is a highly flexible tool with tons of attributes to serve you. Moreover, if you are a little familiar with HTML, CSS, and JavaScript, then it will be easier for you to customize the ready-made templates. This technology is for everyone. Also, you can try various other best responsive web design frameworks and decide which suits your needs best. So, go ahead try and let me know your experience.
Related reading
About Param Chahal
Twitter Bootstrap Tutorial 4 - Tables
Param Chahal, the mind behind TemplateToaster have more than a decade of industry experience. He wishes to render his pool of wisdom on to the world by contributing with content ideas here on this blog through a team of dedicated editors and writers.Twitter Bootstrap 4
Build a Stunning Website in Minutes with TemplateToaster Website Builder
Twitter Bootstrap Vs Bootstrap
Create Your Own Website Now