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
Related
Can I import CSS and JavaScript files to Vuetify for importing some components? Or Can I put an entire theme that would be a basic HTML theme?
For example, I found a tool that is needed in the project can I integrate it with Vuetify such as Datatables, JS validation Plugins, or some statistical widgets, even an entire theme?
Vuetify is a UI CSS framework.
So it will grant you some CSS components.
You can add pretty much what you want to it. It will have the issue of needing an overwrite in specific places (CSS cascade/specificity mainly).
But otherwise, nothing special will block you from using it alongside other things.
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'm busy with a Nativescript app, i'm using the core dark theme but would like to add some font-awesome glyphicons and custom css. I import the core dark theme in my global app.css but don't seem to be able to do anything more in that file after importing the theme... I've tried to add page-specific css by adding a component-common.css to a specific page but when I add the styleUrls: [...] declaration to the component declaration I always get a runtime error... Is it possible at all to use custom css ontop of the core Nativescript theme? If so how would I go about it (using css files not inline in the xml)?
Yes, it is possible to use both a theme and custom CSS files.
For example, check this sample where in the same time theme has been applied to the top CSS file.
Better check (and/or post) your runtime error - it might show you the reason why the app is throwing. Perhaps due to non-existing paths for your styleeUrls !?
I made a website using a yeoman-generator webapp,bootstrap and sass. the site is built and everything was working fine but when i tried to make the site into a WordPress theme the glyphicons stopped showing.So i checked and the src path to the glyphicons were wrong. the path had everything correct but it left out the theme's name (apple).
ex:-
correct = C:\xampp\htdocs\wordpress\wp-content\themes\apple\fonts\glyphicons-halflings-regular.ttf
wrong = C:\xampp\htdocs\wordpress\wp-content\themes\fonts\glyphicons-halflings-regular.ttf
Don't change Bootstrap file location, it's not a good practice. Keep all the Bootstrap's files inside the bootstrap folder and just include the CSS and JS file from there in your page.
You can checkout this page for more info - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-get-started.php
Glyphicons are not part of Bootstrap 4 anymore.
Because UnderStrap based on Bootstrap 4 they were removed too.
use this cdn :
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
So as my title suggests I'm currently working on a Drupal webform. The issue is that since we started using bootstrap for page styling, the webform looks like crap.
We figured out that by removing the CSS files given by bootstrap our form shows the way it's supposed to.
Anyone have a clue on how to fix this issue? Perhaps a setting where we can say that bootstrap can't override anything existing or something?
Thanks in advance
Have you tried loading the Bootstrap files before your main Drupal styles are loaded? If Bootstrap is loaded into the page after your main styles it will override.
Alternatively, you could customize your Bootstrap download to exclude components you would not like included.
http://getbootstrap.com/customize/