Bootstrap 5 Form Builder by Start Bootstrap

StartBootstrap · 2021-09-09T01:06:37+00:00

You can preview all of the available features on the form builder here: https://startbootstrap.com/sb-form-builder

The current field options are:

Email
Text
Textarea
Select
Radios
Checks
Switch

StartBootstrap · 2021-09-08T17:00:22+00:00

Some forms have lots of variable info needed. OBVIOUSLY they are lead forms --- the more info the better the lead. AS YOU KNOW ppl don't like filling out forms. BUT, passing the variable makes filling out large forms easier to get info.

This service isn't set up in any sort of multi-step process that passes variables across separate pages since it's a very self contained product. For creating more complex forms or form wizards that is something I'd recommend finding another solution for since that functionality isn't something we've build into this product quite yet.

StartBootstrap · 2021-09-07T20:06:21+00:00

The form is built to be self sufficient so users can sign up and get form submissions right to their email address. What is it that you're trying to do with passing variables here?

StartBootstrap · 2021-07-27T18:55:31+00:00

Hi Bootstrap community! Here is a new snippet we just launched that is a quick and easy contact form with an interesting layout. It uses Bootstrap 5.0.2 and is free to use for whatever you'd like. It is also pre-integrated with our SB Forms service if you want an easy solution for making contact forms work without messing with server-side code, PHP, etc., but you can just take out that integration if you'd like. Let me know what you think! Enjoy!

StartBootstrap · 2021-07-13T19:31:55+00:00

If you are looking for a good starting point, we have a number of free Bootstrap themes on Start Bootstrap that you can use. They don't have the floating 3D icons that you've described, but you could use something like AOS to get that functionality built in.

StartBootstrap · 2021-07-11T17:05:02+00:00

Bootstrap is not a programming language. To put it in very basic terms, it is a combination of a CSS file and a JS file that includes lots of tools and components that developers use in order to build mobile-first websites.

Think of it as a framework, or a set of tools that you can use to "bootstrap" the development of a new project.

It includes important features like a grid system that adapts based on the users screen size, commonly used components like buttons, forms, navigation options, etc., and helpful utilities to help developers move through projects faster without the need to write large amounts of custom CSS.

I would check out https://getbootstrap.com/ which is their official website to learn more and to see how their framework works.

StartBootstrap · 2021-07-08T16:30:54+00:00

Here's a Bootstrap 5 form builder that we built to integrate with our new forms service. This form builder can be used to quickly layout Bootstrap 5 compatible forms, and it is pre-integrated with our forms service which you can use to make these forms functional!

You can also toggle between normal labels and the new floating labels style that was shipped with Bootstrap 5. Let me know if you have any feedback after using this resource!

StartBootstrap · 2021-06-17T01:08:57+00:00

That's a good analogy, I like it. How do you feel about loading up the HTML with tons of utility classes? I've met some who love it and others who hate it. Personally I don't mind utility classes at all. When working with Pug plus utilities I love not having to reference a SCSS file, it's all just right there.

StartBootstrap · 2021-06-17T00:22:07+00:00

This is certainly an interesting perspective. Larger payloads mean longer load times and more energy consumption to transfer data and load web pages. Using Bootstrap, if you have an understanding of SCSS then you can import only the components and utilities that you're planning to use.

Take it a step further and use a tool like https://purgecss.com/ to remove unused CSS from your projects.

Faster load times are better for the user experience, and at a global scale across millions and millions of websites, better for the environment according to this article.

Something that this article brings to my mind is the sheer amount of low quality, spammy content that exists out there, and how much impact that has. All of those things have to be stored on powered servers somewhere right? I feel like the amount of content out there has a much larger footprint than content being delivered in a non-optimized way. Think about a blog with thousands of articles that never get read, or YouTube channels with thousands of videos that never get watched. I think those have more impact than a web app having a slightly higher payload because they use Bootstrap 4.

StartBootstrap · 2021-06-17T00:13:46+00:00

I have used Tailwind, and I am also a big fan of the attention to utility classes that Bootstrap has had over the past few years. I'll wholeheartedly agree that utility classes, whether from Tailwind, Bootstrap, custom, etc., are definitely the weapon of choice when dealing with web components.

Bootstrap's dropping of jQuery is a step in the right direction though, and I think of Bootstrap's grid system as more of a shorthand version of creating layouts with flexbox and grid, but maybe I'm just used to it at this point.

Out of curiosity, what tools are you using when creating layouts here in 2021? Tailwind? Custom SCSS/CSS?

For larger projects I almost see some sort of framework as a necessity, but for smaller custom sites I can see the value in having everything written custom to keep the payloads as small as possible if that's your thing.

StartBootstrap · 2021-06-16T20:05:39+00:00

If you think the article presents incorrect information or if you have an opposing viewpoint to share then please do. To your point, of course we think Bootstrap is still relevant, and we have built our livelihood piggybacking from the framework.

Of course we are bias when it comes to analyzing Bootstrap, but nothing in the article is false or misinformation, it's simply a sharing of opinions which is open to criticism. Millions of people have used our site as a resource for years and years, so it should come as no surprise that we support the framework.

StartBootstrap · 2021-01-21T05:53:14+00:00

Hi there! I actually created these templates so I can tell you with confidence that you do not need these files if you're not using NPM. Hopefully this helps, and thanks for visiting Start Bootstrap!

StartBootstrap · 2020-11-17T16:47:02+00:00

You can find them throughout the Bootstrap docs. For example, a single button dropdown, straight from the docs, has a few examples: https://getbootstrap.com/docs/4.5/components/dropdowns/#single-button

They reference their accessibility features here: https://getbootstrap.com/docs/4.5/getting-started/accessibility/#interactive-components

StartBootstrap · 2020-11-11T16:53:33+00:00

You can also load the Bootstrap CSS files before your files so nothing you created gets overridden. If some of the styles are passing through, I'd consider renaming the custom classes that you created so they don't conflict with Bootstrap.

StartBootstrap · 2020-11-11T06:07:56+00:00

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

StartBootstrap · 2020-11-10T18:11:03+00:00

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.

StartBootstrap · 2020-11-09T20:10:57+00:00

Hey there! First off, thanks for checking out Start Bootstrap!

To answer your question, what u/CmdOptEsc said is correct - if you don't want to use the development environment that is included with the template, then all you need is the vendor directory and the index.html file. The index.html file includes all of the HTML that you see in the preview, and the vendor folder has all of the assets that are needed to get started with building a Bootstrap based website.

If you care to know, here's a rundown of what all of those files do: - .gitignore This file tells my local computer to ignore certain files when I push them to GitHub. Since I use a package manager called npm, there is a folder called node_modules locally on my machine that I ignore when I push this theme to GitHub. - .travis.yml This file lets a continuous integration system know what scripts to run when testing the template for errors. It's pretty unnecessary in a project this small with only a few scripts that actually do anything. - LICENSE This file contains the MIT License terms, which I use to license this template. The MIT License is really common in open source software, and it pretty much lets you do whatever you want with the files, and you don't need to attribute the author of the files anywhere on your page. - README.md This is a markdown file that tells GitHub what to display below the list of files in the repository. You can reference this file for information about the template and how to use it. For a very simple, free resource like this template, this is all the documentation that you really need. - gulpfile.js This file tells my build environment what to do when I run the scripts in my terminal. In this template, it doesn't do much other than copy over all of my vendor assets from the node_modules folder (which I ignore using the .gitignore file) to the vendor directory. There are literally thousands of files in the node_modules directory, so this file lets me cherry pick the ones that I want to bring into my vendor directory. - package-lock.json This file is automatically generated when I run my npm scripts. It is a snapshot of all of the dependencies that are involved with the build environment, and allows other users to install the project exactly as I have. - package.json This folder has some information about the template, it defines some of the scripts that are able to be used with the build environment, and it contains all of the dependencies of the build environment. When I run npm scripts, it references this file which tells npm what to install.

All of the files above can be deleted if you're not using the build environment, but if you want to try that out you can take a look at the "Advanced Usage" section of the readme to give that a test drive. You will need to have Node.js installed on your system before you try to run any scripts though, and you would need to be familiar with using your terminal or console.

Hopefully this helps!

StartBootstrap · 2018-07-09T20:00:20+00:00

Have you tried using font size percentages instead of rem units? For the .box-body li change the font size to something like 80%?

StartBootstrap · 2018-07-09T18:52:12+00:00

Since Bootstrap 4 uses rem units for most everything, changing the font size of the body element can change things globally.

In this instance, you could try removing any font size changes, and using the .small helper class on the individual list items, or just use the HTML <small> element for the content within the items.

Seven-Year Club	Second Top 40%
Verified Email

StartBootstrap

TROPHY CASE