bootstrap-build/bootstrap.build

🔥 Powerful Bootstrap theme builder for your next project

Bootstrap Theme Builder (Generator)

>>> Launch app <<<

Product Hunt

Features

Bootstrap 4 – Bootstrap.build was built for the latest version of Bootstrap (v4.0.0-beta.2).

Google Fonts – All Google Fonts are available and auto suggested for font variables.

Variables suggest – Don't remember what's that variable called? No problem! You can search all available variables.

Color picker – Enjoy playing around with colors with a built-in Sketch-like colorpicker.

Server or client – Compile SASS in your browser or on our servers, depending on your device and internet connection speed.

Editable code snippets – Play around with examples by changing code in built-in code editor.

Export – Download .SCSS variables file or a custom Bootstrap build!

Open Source – You are free to use and modify the project for personal and commercial purposes.

Run on your machine

Clone the repo:

git clone [email protected]:olegberman/bootstrap.build.git

Install dependencies:

cd bootstrap.build
yarn install

Start app server:

yarn start

Start SASS compiler server (in a different terminal), this is used for server-side compilation strategy:

node server-sass.js

Start nginx with a config file from conf.nginx. Browse to 127.0.0.1

Contributing

All contributions are welcome! ❤️

bootstrap.build's Issues

Just found this - where's the instructions?

Can't find word-one about how to use this tool?
Can someone point me?

Google Font not found/loaded

Hi,

On the production site, I discovered that it does not know about a Google Font called Blinker. It's not in the UI drop-down selector for Google Fonts and nor does it attempt to load it if typed manually.

Responsive Sticky Top

Hi - First of all, just wanted to say that I love the website - it makes designing bootstrap color palettes a breeze! I just had a question regarding trying to use the responsive sticky top classes of Bootstrap 5. I tried to use the formatting that they have listed on the docs and I wasn't able to get it to work with any of the breakpoint syntax (it had the proper 'sticky-top' functionality if I didn't set a breakpoint). Was just wondering whether this was a supported functionality, because I also didn't see the classnames in my stylesheet. Thanks!

Update to 4.5.0

Hi.

Is there a Bootstrap 4.5.0 update coming up? Since 4.5.0 is the latest stable release.

Been using Bootstrap.build for more than a year. Hopefully this will be updated.

Thanks.

5v bootstrap

When will there be a 5v Bootstrap?

Not sure if this is a bug or not with $breadcrumb-divider (base64)

I noticed it while using this awesome website https://bootstrap.build/
I couldn't get the base64 custom .scss variable to work?

see: monolithforge/opencart-bootstrap4-theme-basic.ocmod@ee162ad

latest version of Bootstrap and Bootstrap.Build

Hi there. Quick question - I noticed that the code in this repository doesn't seem to represent what is deployed to the bootstrap.build site (version seems to be 4.1.1 on the live site and seems to have slightly different functionality). Where can we find this updated code?

import theme variations from bootswatch

Wow, awesome project! 🙌

What do you think about the possibility to load theme variables from projects like bootswatch?

https://github.com/thomaspark/bootswatch/

/cc @thomaspark

Generate Docs with Custom Theme?

Would this be possible? Like this for Bootstrap 3:

http://styleguide.daimler.com/bootstraptheme/components/

import theme variations from top-hat

Hey @olegberman 👋

Tophat is another great resource for free bootstrap themes. What do you think about also adding these themes? 💙💛💚

https://github.com/ThemesGuide/top-hat

/cc @ThemesGuide

---

🔗 https://github.com/olegberman/bootstrap.build/issues/3

Does this project use latest Bootstrap?

Loving this project, I was about to make my own generator and found this ❤️

So is this up to date?

Color picker changes input color definition to rgb()

When picking a custom color the #dddddd color definition will not keep the original format and will be written as rgb()

Correct behavior would be to leave it in the input format

Email verification not working

The issue #34 was closed without resolution, so created a new issue here. Still not receiving any verification emails on any Chromium based browsers.

Password reset in app settings not working

The Password reset button in app settings does not work. It's not even clickable. It appears like a bold font text and does nothing.

Colors section cannot change $primary definition to any other than $blue

In the Colors section the $primary input will show possible values of variables, but it will only show $blue.

Correct behavior should be to show all color definitions from below excluding itself ex:
$primary will show all : $blue, $red, .... but no $primary again 😄

Bootstrap 3.3.x support?

Hi,

Any chance adding support for Bootstrap 3.3.x too?

Because 4 it's not backward compatible with 3, and that was not backward compatible with 2, most projects I'm aware of, won't migrate to 4.

Thank you.

[feat]adding components selection

brilliant tool for customize bootstrap 4!
by default, the exported bootstrap.css includes all the components.
it will be great to allow us to uncheck what is not necessary.

something similar to what they did for 3:
https://getbootstrap.com/docs/3.3/customize/

"Forgot password" page does not work.

Entering the email address in the Fogot login page https://bootstrap.build/forgot and clicking Reset Password does nothing. It does not send any email.

Internal SASS compiler error

When trying to change the focus border color of input elements i wanted to use secondary color instead of primary.

Google Font preview not work

Hi,
On your online application, using a Google Font generates an error in the console related to https. Indeed you call the url http://fonts.googleapis.com/ from a domain in https. The browsers block these external resources and the preview of the font does not work.

Thank you in advance for this fix.

Question about latest beta 3

@olegberman
1st i wanna say you did awesome job.
2nd is this project compatible with the latest beta3 ?

Builder GUI should show the current tool build version

To ease the stress on the users, it would be nice to have a little tool version string somewhere in the header showing current tool version and bootstrap version

Local build server does not work

When I follow the instructions how to start a local dev server I get in the Firefox console:

Warning: Failed prop type: Invalid prop `trigger` of type `string` supplied to `Dropdown`, expected `array`.
    in Dropdown (created by Dropdown)
    in Dropdown (at header.js:46)
    in div (at header.js:45)
    in header (at header.js:41)
    in Header (at app.js:315)
    in div (at app.js:314)
    in App (at index.js:5)

The app halts at "compiling".

Update to latest version

Bootstrap has released v4.1 a week ago
seems like a good time to update the tool to the latest version

Add PostCSS to the build so necessary vendor prefixes get added

Hey, Oleg! Just opening up a little issue for you to add PostCSS prefixing that I noticed Bootstrap 4 has but isn't part of your build.

It's not a big issue, but one area I did see it impact was webkit-appearance: none. This prefix causes a double dropdown icon to appear in <select> elements. Screenshot attached.

If you're busy I can always take a look at adding this functionality in for you. :)

Login not working

Hi,

at bootstrap.build the Login not working anymore. Pleease fix it.

regards,
Jonathan

Export file doesn't work in Firefox 58.0b13

When I choose Export (doesn't matter if it's build or scss variables file), nothing happens.

$spacers is difficult to define in the interface and not taken into account in the generated css

Hello.

$spacers seems to be not taken into account when exporting .css files. For example, when you define a variable like this (with 3 more levels):

$spacers: (0: 0,1: ($spacer * .25),2: ($spacer * .5),3: $spacer,4: ($spacer * 1.5),5: ($spacer * 3),6: ($spacer * 5),7: ($spacer * 7),8: ($spacer * 10));

You should expect classes like p-6, py-7, etc. in the resulting css files, but spacing classes stops at **-5...

Futhermore, the web interface shows 2 $spacers inputs that are difficult to use (because the modification of one input modify also the content of the second one...).

Thank you for your work.

Bootstrap 4.3

Any plans to implement latest bootstrap release with responsive font scales?

.custom-range slider does not render custom thumb

intended rendering: https://getbootstrap.com/docs/4.1/components/forms/#range

Copy paste option for import variable

We are working in secured network and can't upload __variables.scss.

Please provide option to copy paste variables along with tab custom.scss.

It will be great help.

Update to 4.3.1

Current BS is 4.3.1 and I'm noticing a few issues with builder such as dropdowns having a misplaced arrow etc.

Sign-up via email not working - No confirmation email received.

1. Sign-up with email address at https://bootstrap.build/ is stuck at a point where it says that the confirmation email address is sent out but I haven't received any email.

2. I then tried the forgot password page at https://bootstrap.build/forgot but did not receive any email.

Please look into it.

Export broken?

The exported files (variables and custom scss) are throwing errors when compiled, due to missing variables.

For ex, if you try to customize Flatly, it first complains about missing $theme-colors variable. After manually adding it, it continues with $body-color, etc...

Website claims bootstrap.build uses bootstrap v5, while this repo claims it uses v4

Hai there! 👋

On the bootstrap.build website, it claims it uses bootstrap 5, however here it claims it uses v4.0-beta2, there were many breaking changes from bootstrap 4 to 5. Why does the website misinform users? Or is there some information I am missing?

Respond to support requests?

Hi, I've tried emailing and using your chat feature but I'm not getting any responses.

compiling issue when "yarn start"

I'm not sure what i am doing wrong

Problem importing scss

Hello comunity
I having a problem importing a costum scss file for the boostrap build v4.1.1
Every time i try to import an scss nothing happens, after investigating a bit further discover that theres a problem in the script, i am getting this error

TypeError: e.variables is undefined[Learn More]
app.js:68:10

Does anyone know why i am getting this problem ?

Thank you in advance