How to Customize Bootstrap 4 [duplicate] - wordpress

This question already has answers here:
Customizing Bootstrap CSS template
(9 answers)
Closed 3 years ago.
I need to use just some parts of bootstrap 4, not all of that. and I want to use my customize bootstrap in my wordpress theme and sell it on Themeforest store or somewhere, I dont want to use bootstrap.js and many parts of bootstrap.css.
I want to use these items ...
reset css
Print media styles
Grid system
Responsive utilities
Navbar
Breadcrumbs
Responsive embed
can I copy/paste my ideal parts of bootstrap css?
can I use just these parts of bootstrap 4 ?
can I sell my theme with this CSS file?
its ok to copy and change some part of this files?
which license I need to use in my theme?
my question is more about licenses...

https://v4-alpha.getbootstrap.com/about/license/
Read the first couple Lines. Bootstrap has an MIT open source license. you can find more on that here. https://en.wikipedia.org/wiki/MIT_License
You can copy and paste the code that you want however you must keep the Copyright title intact for the pieces that you use from bootstrap.

You could just override bootstrap my adding your own class on top of bootstrap's class
.row.shaheparsRow {
padding: 0
}

Related

How do you overwriting bootstrap? [duplicate]

This question already has answers here:
How can I override Bootstrap CSS styles?
(14 answers)
Customizing Bootstrap CSS template
(9 answers)
Closed 4 years ago.
I worked with bootstrap many times and usually I'am creating other style file where I'am overwriting bootstrap classes. I think it's better way to do this. I am also get annoying when I have too much code which I actually don't use in bootstrap source.
What's the best way to overwriting bootstrap classes and remove this parts of code which actually is not needed from bootstrap sources?
One very common way is to use the Boostrap Sass implementation and set variables to define many of the styles. This prevents many css 'overrides' and usually results in much less css code.
You can also pick and choose which Bootstrap components to include (via #import) in the compiled css:
https://getbootstrap.com/docs/4.0/getting-started/theming/#importing
https://getbootstrap.com/docs/4.0/getting-started/theming/

Differences between bootstrap-flex, bootstrap-grid and bootstrap-reboot

In the newest version of Bootstrap (current version at the time of asking the question is bootstrap#4.0.0-alpha.5) there are 3 different files and a standard one:
bootstrap-flex.css
bootstrap-grid.css
bootstrap-reboot.css
bootstrap.css
Are the first 3 files an extension to bootstrap.css (#4)?
I can imagine, that the bootstrap-flex use the features of CSS Flexbox, bootstrap-grid is probably the old and already existing way, but what about bootstrap-reboot?
Which one do I have to include (especially then, if I use ng-bootstrap with Angular 2)?
Take a look at the source:
bootstrap-flex.scss
Bootstrap with Flexbox enabled
Includes all the imports from the standard Bootstrap project, but enables the flexbox variable.
bootstrap-grid.scss
Bootstrap Grid only
Includes relevant variables and mixins for the regular (non-flexbox) grid system, as well as the generated predefined classes (e.g., .col-4-sm).
bootstrap-reboot.scss
Bootstrap Reboot only
Includes only Normalize and our custom Reboot reset.
bootstrap.scss
The main Bootstrap library
And the answer is yes, the first 3 files are optional for Bootstrap.
The minimum required is bootstrap.css, it already includes bootstrap-reboot.
Replace with bootstrap-grid if you want the Bootstrap's grid only.
Replace with bootstrap-flex if you want to use Bootstrap with Flexbox. It is bootstrap.css with Flexbox features.
As #Nhan said: yes, the -reboot, -flex, and -grid files extend the primary bootstrap.css and if you use one of them, then that file is the only you need to include.
As far as the ng-bootstrap portion of your question, I'm using the same and I've only included the bootstrap.min file as I don't plan to use flexbox and I need more than the grid styles.
Hopefully that adds a bit of clarification about what is strictly necessary within the context of your question.

Modify Bootstrap files or Write on top of it [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm using Bootstrap 3. Ok no problem so far, but, there's a but...I don't know what is the right approach when it comes to alter bootstraps's core css code. So for instance I want to design a new theme, let's say for my own site, and I want to do that using Bootstrap 3, but when it comes to prettiness bootstrap it's like a 3-4 out of 10.
Should I tweak bootstrap files with my own css styling OR Should I build on top of bootstrap and, well, having unused css properties in bootstrap file that I overwrite in my own "style.css".
And I'm not talking about Bootstrap Customize option on site. There are not so many things I could change.
Definitely build on top of Bootstrap, create a new css file. It is better not to touch bootstrap at all, and have it act as it is intended when you need it to.
You can use Customize to add/remove components desired and customize Less variables to define colors, sizes and more inside your custom CSS stylesheets. Bootstrap's customizer finally will generate your csutom javascript & style files with desired components.
If you use css preprocessors like LESS or Sass you can do it by changing variables' values in your editor. Bootstrap's default preprocessor is LESS, but there is also available Sass version.

How I change a Less variable of Bootstrap? [duplicate]

This question already has answers here:
Twitter Bootstrap Customization Best Practices [closed]
(7 answers)
Closed 8 years ago.
I have downloaded Twitter Bootstrap from http://getbootstrap.com/customize/
and now I would change some proprieties such as #body-bg or #navbar-default-bg.
Before Bootstrap, I used Zurb Foundation and I changed "foundation_and_override.sass" file. Is there something similar for Bootstrap?
My project is on Ruby on Rails
Check out this similar question. It shouldn't matter which exact file you put it in.. all the css will get compiled in your assets directory in rails.
Twitter Bootstrap Customization Best Practices
You can use this bootstrap gem in Rails, it's well maintained and up to date. The variables are defined here, so you know which value to set before your #import 'twitter/bootstrap' statement as shown in the Readme.
I'm using this exact same approach and am quite happy with it.

What should I do to prevent GWT from using its theme and totally use the CSS that I specify [duplicate]

This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
GWT theme style overrides my css style
What should I do to prevent GWT from using its theme and totally use the CSS that I specify?
Well, you can be radical and just remove the CSS files that are in the com.google.gwt,user.theme.chrome/dark/standard packages (don't forget to remove then from the gwt.xml file). Then specify your own CSS....disadvantage is that you have to style absolutely everything yourself. Hope this helps.

Resources