I am trying to find a more efficient way to integrate bootstrap classes into my less file. Currently, I am doing the following, but it has the disadvantage that not every "subclass" or connected class is inherited for my own control:
.BWForm_form-control {
.form-control;
}
To address this issue with connected classes, I have taken the classes from Bootstrap and customized them for my control:
/*#region ".BWForm_form-control" addition from bootstrap */
// Additional styles here
/*#endregion */
In order to ensure the full functionality of Bootstrap for my custom controls, I applied this temporary fix. However, I am aware that this is not an ideal or sustainable solution.
What would be the best approach to create custom controls inherited from Bootstrap (or another CSS/LESS file) while maintaining all the functionalities?
Some background information about my project: Important NuGet Packages:
- Bootstrap (v3.0.0) - imported in the master page
- Bootstrap.Less (v2.3.2) - used for importing in "Site.less"
- dotless (v1.4.0.0)
- html5shiv (v0.1.0.8)
- Modernizr (v2.6.2) - imported in the master page
- Respond JS (v1.2.0)
Currently, I am not utilizing the "Bootstrap.Less (v2.3.2)" NuGet package. Instead, I renamed my bootstrap.css to bootstrap.less and utilized it as the base for inheritance in the new LESS file.
Despite these efforts, I am still encountering some issues:
Environment: Visual Studio 2013 with MVC5
Best regards, Martin