Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Rule “do-you-use-twitter-bootstrap/rule” #9757

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 62 additions & 0 deletions rules/do-you-use-bootstrap/rule.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
---
type: rule
title: Do you use Bootstrap?
seoDescription: Do you use Bootstrap to create responsive and user-friendly
websites that adapt to various devices and browsers?
uri: do-you-use-bootstrap
authors:
- title: Adam Stephensen
url: https://ssw.com.au/people/adam-stephensen
- title: Adam Cogan
url: https://ssw.com.au/people/adam-cogan
- title: Rebecca Liu
url: https://ssw.com.au/people/rebecca-liu
related: []
redirects:
- do-you-use-twitter-bootstrap
created: 2012-07-23T16:04:48.000Z
archivedreason: null
guid: a77d521f-eab3-4490-9ed2-95cec7026f9f
---

Efficient programmers do not re-invent the wheel. That's why we [use the best Web UI libraries](/do-you-use-the-best-web-ui-libraries).

Bootstrap is a NuGet Package that provides a jump-start for HTML based projects. It includes the HTML, CSS and JavaScript framework used to build the Twitter site.

<!--endintro-->

Building your site on top of Bootstrap makes it much easier to have your website look great on devices of all sizes, across many different browsers.

Read our [Rules to Better UI (Bootstrap)](/rules-to-better-ui-bootstrap).

![Figure: This website template, along with many others is available as a starting point for building Bootstrap-based sites](bootstrap-1.jpg)

::: bad
![Figure: Bad example - Many websites built by using tables for positioning would render poorly on smaller devices, and be hard to use](iphonenonresponsive.png)
:::

::: good
![Figure: Good example - Bootstrap uses many techniques to help make your site look great on different browsers, on all devices](bootstrap-3.jpg)
:::

## Documentation

[Bootstrap on GitHub](https://github.com/twbs/bootstrap).

## Framework integrations

One of the benefits of using Bootstrap over a library such as [Shadcn](https://ui.shadcn.com) is that it's widely supported across a large number of Front end frameworks. Take a look at the following Bootstrap integrations for example:

- [BootstrapVue](https://bootstrap-vue.org)
- [Angular](https://ng-bootstrap.github.io/#/home)
- [React Bootstrap](https://react-bootstrap.netlify.app)

While you can use Bootstrap without any framework specific integrations, using one of the libraries can save you a lot of time managing your css classes and writing boilerplate code while building your Interface. The front end frameworks listed above are ultimately just wrappers for using Bootstrap, which is little more than a CSS library. This means that you can use Bootstrap with any front end framework of your choosing. You can even use it for static html pages provided that you include links to the required JavaScript and CSS files in your pages. This can be achieved by adding a link to bootstrap's [CDN](https://getbootstrap.com) in your pages.

## Tailwind

Alternatively, [TailwindCSS](https://tailwindcss.com) is also acceptable. The difference between the Tailwind and Bootstrap is a matter of how comfortable you are with CSS.

Out of the box, Tailwind is lightweight and will get the job done simply; you can build a website without ever having to look at CSS.

Bootstrap requires theme customization, but it’s more robust and solid once done. [Read more about these differences](https://themesberg.com/blog/design/tailwind-css-vs-bootstrap).
50 changes: 0 additions & 50 deletions rules/do-you-use-twitter-bootstrap/rule.md

This file was deleted.

Loading