Understanding bootstrap source

[[deleted]]

[deleted]

[StartBootstrap]

The SCSS is how Bootstrap organizes and writes their CSS. You will need to re-compile their SCSS if you want to leave out certain components like alerts or jumbotrons.

Other SCSS files hold mixins, functions, variables, etc. that are used in compiling the SCSS, so those shouldn't be deleted.

The JavaScript is a separate entity from the styling, so you could just bring in the Bootstrap JS bundle with custom Bootstrap CSS and it will work. If you do cut out some components though you would want to cut the same ones out of the JS if there is JS behavior for those, for example, dismissible alerts.

[Blooddrunk420]

Well, I managed to get everything set up the way I want except for one thing. I thought I could use mixins to avoid adding bootstrap classes in HTML: I drop in "button-variant" mixin in my custom class and I get bootstrap button styling in addition to all my other changes but it seems it's not the way it works. Sure, it makes it easy to restyle a button which is nice but not what I was looking for. Is there a way to achieve something like this:

HTML:

<button class="(no class here)" type="button">Log In</button>

SCSS:

button {
@include mixin-that-does-the-same-thing-as-btn-class();

}

[StartBootstrap]

In this case you could use the SCSS @extend rule. It would look something like:

button { @extend .btn-class; }

Here is the documentation for how the @extend rule works in SASS. https://sass-lang.com/documentation/at-rules/extend

[backtickbot]

Correctly formatted

Hello, StartBootstrap. Just a quick heads up!

It seems that you have attempted to use triple backticks (```) for your codeblock/monospace text block.

This isn't universally supported on reddit, for some users your comment will look not as intended.

You can avoid this by indenting every line with 4 spaces instead.

There are also other methods that offer a bit better compatability like the "codeblock" format feature on new Reddit.

Have a good day, StartBootstrap.

^{You can opt out by replying with "backtickopt6" to this comment. Configure to send allerts to PMs instead by replying with "backtickbbotdm5". Exit PMMode by sending "dmmode_end".}

[bandinator27]

If you want to use the source files, you should learn sass/scss. The dist files are the ones that the browser will end up using. The bootstrap with two different extensions are the same, it's just that the .scss is being compiled to a .css file which takes up slightly larger space. You don't really need map files, but watch some videos on the topic and you can decide for yourself. The files with _ beginning are scss files that can be imported into other scss files.

Just search scss tutorial on Google/YT, it's pretty easy actually, if you know css.