What exactly is bootstrap?

What exactly is bootstrap?
0.0 0

#1

I’m just trying to wrap my mind around what bootstrap actually is.

  1. Is it just an elaborate CSS page we are linked to?
  2. Does our webpage have to link to a bootstrap site or page to use it?
  3. Is bootstrap used frequently in building websites?

Thanks for your answers in advance. Please remember you are speaking to someone that has only made it through half of the bootstrap lessons so far, so please keep your answers simple.

God Bless, fellow coders!

Elmo


#2

Bootstrap is an open source project created by Twitter. The goal is to make website responsive. Responsive meaning the layout of the website will change if the screen size changes.

Bootstrap is a CSS alongside with JavaScript. Aka bootstrap.css and bootstrap.js

The bootstrap css contains predefined classes that will make a website responsive. For example. If screen width around 450px wide, show a webpage that is 400px.

To use bootstrap, you would have to link it to your webpage that is going to use those classes with the link tag.

Does a website need to use bootstrap? Straight answer is no. You can build the whole website yourself provided that you know how css works.

Straight answer, I don’t know. LOL
I can imagine using bootstrap would make your life a whole lot easier. But I am not so sure that all companies would use it to build websites for client.


#3

Is bootstrap used frequently in building websites?

You can look at this website for Twitter Bootstrap usages stats.


#4

very simple example to wrap your head around a larger point. Imagine that you have a file with some css. Here is a paragraph tag with font size.

p{
font-size: 24px;
}
Now instead of moving on you reuse this file you wrote. You now have a library with predefined styles that you can use to make website development faster. That is what bootstrap is. A file of css that someone has written to be reused. You just pick and choose what styles you want with the pre defined classes the author wrote.


#5

Cowwy,

Thanks so much my friend. I wasn’t sure what it did exactly. You have a big help!

God Bless!

Elmo


#6

Thanks Reggie!

I really appreciate the kindness and help on here.

Elmo


#7

Explanations above are good. I will add a recommendation: learn it, and use it if you want, but don’t rely on it 100% without learning CSS properly. It’s useful to understand what’s under the hood, so to speak. Like for example if your job entailed assembling prefabricated houses, you couldn’t really claim that you “build houses”, if that makes any sense.


#8

Thanks for the question and for all the answers. I’m beggining too and I really appreciate those details ! :slight_smile:


#9

Yeah bootstrap is just something that can make part of your process a whole lot easier. You can learn bootstrap basics in a weekend and shortcut a lot of the design process as long as you don’t need to do something fancy. You can make a clean site with cool effects and minimal coding using bootstrap. Think of bootstrap as a group of files that you add to your project. These files have code that lets you do neat design type stuff with just a few lines of code.

Also there are LOTS of support sites that make bootstrap even more efficient than it already is like bootsnipp.com and layitout.com.


#10

Davis and DWA,

Thank you so much for your help on this. I’m actually enjoying the challenge of learning this stuff. I really appreciate your taking the time to explain this to me.

God Bless,

Elmo


#11

Well, I agree with others on the point that sometime you could learn to use bootstrap. However! Before doing that, learn CSS. Most of the things you will want to do with bootstrap are going to be not really complicated and could be written in your own stylesheet with 3 lines of properties.
A few lines of CSS vs whole bootstrap file loading every time? Ehh :confused: Even though you could clean bootstrap file, in my opinion CSS skills are a lot more valuable.


#12

Hey man,

Short answer…Bootstrap is just a bunch of predefined styles and JavaScript people normally use to make their sites “responsive.” A “responsive” site is a site that will adjust itself to fit different screens and devices that view it.

  1. I wouldn’t call it elaborate CSS, but sure…it’s CSS that’s already done on another server, you just have to learn the class names for the styles.

  2. Yea you have to link to it just like you would link to an external style sheet. It is possible to download the script and embed it on your page as well.

  3. Yes Bootstrap is used frequently these days. That’s the reason why so many sites on the web all have the same look and feel now. Basically the moment touch devices like cell phones and tablets because the most used devices to view sites, was when Bootstrap became the popular go to.


#13

Zyberg,

Thanks so much for this information. I really appreciate your insight on this.

God Bless.

Elmo


#14

Guy,

Being new to this, I pretty much suspected what you told me. It did seem an awful lot like CSS. So, thanks for clearing that up for me.

Thanks so much for the detailed answer!

Elmo


#15

If you used bootstrap instead of writing your own CSS for an app would the app run slower or require more data then writing out all the code in CSS?
Question from a newbie
Thanks


#16

I have used Bootstrap quite a bit, actually, and I really enjoy working with it. It does make the process of setting up responsive websites quite a bit faster. As for whether companies actually use it, I can assure you that they do, as I have only recently been working for a digital agency that used it in a number of projects.

It is worth noting that a comparable framework would be Foundation by Zurb (http://foundation.zurb.com). I’ve worked with both Bootstrap and Foundation in my projects and while I have a bit more familiarity with Bootstrap I’ve found Foundation to be quite easy to use as well.

I have to wonder how the rollout of CSS Grid will impact the use of these tools. A lot of what Bootstrap and Foundation does will be able to be done in native CSS once Grid support becomes standardized across browsers.


#17

So you have the option to either load Bootstrap from a CDN (basically a hosted library you link to in a URL that you paste into the head of your HTML doc) or you can actually download the library files and include them in your project, most likely in its own directory. Bootstrap does come in a minified form to eliminate unnecesary whitespace and you can actually select only those components/modules that you want when you download it so it will create a much smaller package. Having done it both ways I haven’t seen a tremendous difference in how fast my pages load.

My advice would be to read over the Bootstrap documentation to get a sense of how the components work, decide on which ones you need for your project, and then download a package with just those components and use the minified CSS and JS files in your project. Bootstrap makes this really easy on its website, you just check boxes next to the components you want. But if you just want to hack around in it, simply downloading it or adding in the CDN link is perfectly fine.

If you really want to just play around with Bootstrap, I would recommend Codepen (http://codepen.io/). You can literally add Bootstrap to your pen by selecting it from a Dropdown. This is how I got comfortable using it, and it doesn’t take any effort on your part to download or link to anything to use it.


#18
  1. HEADS UP – Be sure to include the link to your css style sheet AFTER the Bootstrap link. Links are read top to bottom and you don’t want your styles to be overwritten by Bootstrap.
  2. You can get the necessary ‘Bootstrap Link’ from the Getting Started Section of the Bootstrap documentation http://getbootstrap.com/getting-started/;

#19

so i recently started taking advantage of jQuery and i love it. so i figured bootstrap could have as much potential and have committed myself to learning it. lol, I’ve been copying all the classes to start my day. i hope im not a fool and that it is as valuable a skill set as i think it is.


#20

Thanks for the great reply and the suggestions I will definitely check out Codepen and the Bootstrap websites. So even if there isn’t any noticeable difference in speed, I would assume that if you reference a URL in your program it would use up more data because it would constantly be importing bootstrap classes/elements through the internet (I think). Is that true or is this not what is happening when you use a CDN? And if this is the way it works maybe the data usage is negligible as well?