I am using Handlebars and my templating engine but when I am working in a partial view the css files referenced in the main layout view are not being populated in the autocomplete dropdown.
Is there a way to have project based css files so the files dont have to be included on each individual view?
The example I have is that I am using bootstrap and it is include on the main layout view. When I create an individual page view I no longer have the classes in bootstrap available in the dropdown when i start typing.
If I have
<button class="bt
the bootstrap classes .btn, .btn-default etc. do not show up
Related
I am learning web development and I am trying to use the COREui 4.0.1 Bootstrap admin template in an existing Symfony 5.3 project instead of standard Bootstrap 5 components and utilities. I am trying to get the page to look like https://coreui.io/demo/free/3.4.0/.
The project was created using symfony new my_project_name --full. I added Bootstrap CSS with https://getbootstrap.com/docs/5.0/getting-started/introduction/#css and JS with https://getbootstrap.com/docs/5.0/getting-started/introduction/#bundle to my base.html.twig.
Steps that I took:
Create a new controller
Create an associated view using a twig template
Replaced the Bootstrap JS with https://coreui.io/docs/4.0/getting-started/introduction/#bundle and CSS with https://coreui.io/docs/4.0/getting-started/introduction/#css in my base.html.twig
What I was expecting:
When accessing the controller/view I would see https://coreui.io/demo/free/3.4.0/
The actual result:
Minor styling changes (from COREui rather than original Bootstrap) but no layout changes
The CoreUI CSS and JS that you have added to your project is to be used in the same way that you would use Bootstrap components and utilities i.e. adding to existing HTML elements.
Viewing the page source at the demo you provided at https://coreui.io/demo/free/3.4.0/ shows the HTML elements that you would need to have in your own project, that would then have CoreUI (in this case) CSS and JS components applied to them.
Using that demo https://coreui.io/demo/free/3.4.0/, if you wanted a side navigation bar you would need to have a HTML element like:
<div class="c-sidebar c-sidebar-dark c-sidebar-fixed c-sidebar-lg-show" id="sidebar">
<div class="c-sidebar-brand d-lg-down-none">
...
I have a web app all developed with a Bootstrap theme, now I would want to replace just the checkboxes inside the application with those coming from mdbootstrap, basically a Material Checkbox.
Is that possible to load just the part of the CSS related to the checkboxes and not all the rest?
Is there any other way to have just the Material checkboxes in a bootstrap theme ?
Of course you can. What you have to do is copy all of the relevant css from Material website into your own stylesheets. If you inspect element, you'll notice that all styles related to checkboxes revolve around .form-check class.
Once you copy all of the styles, rename them to match bootstrap's naming convention.
Is there a way to include a css file with a view model and not a view?
I've tried looking at the nativescript documentation and have not been able to find the answer
This view model is used/presented in a number of different views so adding the css classes to each view folders css file works but makes it harder to maintain as I now have duplicate css classes floating about in different folders.
Alternatively i could put it in the global css file however this can quickly become too large of a file if i need to do this for multiple view models/ styles.
Use case:
A list of items that get validated in an async manner which will change css class based on status (simple use case example background-color changes to: white/red/yellow/green).
please note that I am coding a non-angular app.
Since Angular uses view encapsulation is it possible to support multiple themes in Angular 2? I mean the user should be able to click on a button and change the color theming of the whole application.
PS: I am using Angular 4 with angular-cli with SASS support.
Currently I am able to generate static themes with a _variable.scss file which is imported in each component's sass based stylesheet.
But, my requirement is end user should be able to choose his own color theme.
Ideally in non-angular websites I would just add a new compiled css file to the <head> tag using javascript. Since shadow DOM generates separate style for each component and adds them in to the <head> how I change the style for each component dynamically?
you can try the css method var(), for more details can read this blog
I am creating a joomla module which uses bootstrap to style the various input fields. In my module's default.php file, I have incorporated bootstrap via the normal css link <link type="text/css" src="http://mylink.com/modules/mod_mymodule/css/bootstrap.min.css">. This works well with a non-bootstrap template but with a template which does use bootstrap, certain elements of the template do not display properly as a result of the bootstrap css file I have linked in my module. If I unlink the bootstrap file in my module, the input elements in my module are not responsive and the display of the module is just horrible.
My question is, how will I be able to incorporate bootstrap to my module without distorting the display of a bootstrap enabled template and also have my module displaying perfectly in a non-bootstrap template?
I realized the Joomla site I am using uses Bootstrap 2.3.2. Simply had to style my form to match the existing bootstrap file