Downloadable Bootstrap Examples

[beatinger]

For the life of me, I cannot figure out how to download any one, or all of the Bootstrap Examples that are at this URL: https://getbootstrap.com/docs/4.4/examples/#custom-components

There is a "Download Souce Code" button at the top of that page, that when downloaded and unzipped, appears to give you the source code and structure for the entire Bootstrap website.

All that I am looking for, is the ability to download one (or more) of the examples. It is just not clear how this is done, other than clicking on one of them, and then view the source, and then doing a copy/paste, which seems like a really odd way to go about this. Please help! Thank you very much!

[marlae]

You have to download https://getbootstrap.com/docs/4.4/examples/.

But it's not 123 and your done...you have to screw around around with html code and add the head section etc. -- they put comments what to add on top of the html. Kinda of generic and IMHO, not easy for the beginner.

I can't get the examples to work anymore ever since they put in that crap for includes and SVG crap in the lastest version

I'm going to back my older version 3.2 where all this SVG crap is not included. For the life of me, whoever is doing this is wrecking bootstrap -- thinking about moving to google.

[ffoodd]

@beatinger FWIW, you should simply try CTRL + S on the example page you wish (the page itself, not its thumbnail). Your browser should handle this for you, by downloading HTML + CSS + JS + images.

This is available in all major browsers since IE4 or something.

Please come back if that didn't work for you :)

Maybe should this thing be explained somewhere ine the page?

[marlae]

The Ctrl+S didn't work. I didn't try the compile and really don't want too, it should not be this complicated where you have run a build process in order to get a one-page of html/css working.

What I want is full compiled or COMPLETE version to download, instead of having muck around with code. I mean, it's ridiculous. Not everyone wants to jump into developer mode and screw around with code, they want a working copy.

Basically, I'm good one my end, I don't need the latest version; sticking to what I have that works which is 3.2 version, and at that time I was able to download it; add in the head section, make some simple changes and it worked.

Thanks for the reply.

-Mark=

[beatinger]

Hello Mark,

I am in total agreement with you. That "Download Source Code" button is very misleading, and just results in a massive amount of code that most of us have no idea what in the world it even is. Rapid development is key, and the examples would be very nice and go a long way as a kind of tutorial of sorts, but getting them from the Bootstrap site to your development platform is very difficult and confusing. What is going on here exactly?

[marlae]

Who and hell knows. Be nice to follow a very simple concept: KEEP IT SIMPLE.

If you want sell BOOTSTRAP; first thing you do is don't make open source complicated. Were not developing ASP.NET web pages, it's html/css.

[XhmikosR]

I'll add a new step in our build to zip the built examples.

I personally don't see how this is hard, but being there are people out there having trouble, I guess we need to provide the examples separately.

Do note that they won't work out of the box anyway, since the referenced asset paths will be what we have for each version.

[beatinger]

In general, the entire Bootstrap website, and it's accompanying code examples, is not very understandable, I think regardless of a person's skill level. I've been coding for over 30-years, and have to keep asking myself if I am just stupid, or if the site is difficult to understand. Who knows which.

[XhmikosR]

You can always suggest things to improve. It's quite common for someone to not see things from all sides after time passes.

[beatinger]

Hello XhmikosR. Absolutely! I will do exactly that. For example, I sat down this morning to do something that I thought would be very simple to do, but it turned out to be the usual "search and destroy" type of mission. :) I wanted to add a drop down to a nav bar, and that went okay, until I wanted to add some padding/positioning and a border around the drop-down. I worked on this for 2-hours and finally resorted to using   to get my text positioned (which I hate to do), and scrapping the borders (they would not work with the drop down class). In fact the page which describes borders has no examples of how to use them with anything. I also cannot find anything relative to padding. Sorry that I am old-school, and very used to using tables. I am catching on to all this, but it does get quite frustrating at times. I do many searches online, but usually only find other websites that have copied the Bootstrap website nearly verbatim. So for now, my suggestions are as follows:

• Put together an index of some sort which contains all of the classes in alphabetical order, with a link that takes you back to the page where that class is explained. I read a lot of other site's bootstrap code to try to get ideas on how to accomplish things, and I see classes being used that I cannot find a description for on your website.

• Have a section devoted to how to modify code to cause common tasks to occur. Like the borders for example; how to add a complete border all the way around rows/cells. How to add a border around "elements" and how to modify the color to a color of our choice. How to use the

  class without it adding a line break, etc. These are very common styling aspects.

• I have also found some code that doesn't seem to work as described at all. Where should I report this?

Thank you very much for your time!

[marlae]

The first and most important thing to do is put a working (complied) version of the examples that includes the head section, no "include" statements or any other gotcha's . Starting with version 4.1 and above, that seem to change - you have to compile to resolve include statements (example: Carousel). I started with version 3.2 and all the examples worked up to 4.0 without changing anything.

Bootstrap Version: https://getbootstrap.com/docs/versions/

Example of unresolved include: {% include icons/placeholder.svg width="100%" height="100%" background="#777" color="#777" text=" " title=" " %}

[ffoodd]

@beatinger Those comments are very useful, thanks! Let me ask some questions back:

The index suggestion with all available classes

FWIW, utlities and helpers classes are based on properties (like border, padding, etc.) however since they have many variants (w/ breakpoints or sizes) they're not listed in the content. Would an index of each class for each property be sufficient?

For example, if the Borders pages contained a list of existing class names, would it be enough? Or would an index of all classes required?

Modifying things

The only answer I can see is some kind of FAQ, since what you're describing is a very specific case. Bootstrap can not know and document eveyr modification that could be tried by its users… But maintaining a FAQ for "very common styling aspects"

Reporting code not working as expected

Just open an issue right here, being the most explicit you can and providing an example (either screenshots, or a demo).

@marlae This is understood, @XhmikosR started to work on a specific zip for Examples in #30130. It's also flagged to be backported to v4, so the next minor release will probably allow you to download examples directly.

[bardiharborow]

An index or cheatsheet of all classes was requested in #27783. Other documentation or code issues should be filed separately.

[mdo]

Dunno if it's practical or not, but maybe we end up pushing these things to another repo instead and they live at examples.getbootstrap.com. We could build the templates still in solid HTML without a preprocessor (save for perhaps an index page), so little to no compilation within each example. Perhaps we could invoke some Sass via JS or something in the browser (shoutout to Bootstrap v1 days with Less.js)? External repo could have advantages of user submissions, too, or categories. Could also then already include supported versions of Bootstrap's compiled CSS and JS to build on.

I tried this years ago but the thing I didn't like was not being able to keep them up to speed with the latest release at the same time, but with version-locked examples, it could be solved. I'll think on it more and paint a clearer picture maybe :).

[marlae]

That would be perfect to have the HTML without a preprocessor.

[jeremy0519]

Is there a conclusion here?

[ffoodd]

@jeremy0519 Work is in progress in #30130, as mentionned earlier in the discussion.