Yesterday, I have installed Bootstrap v3.3.6 by using Composer to add Bootstrap in my Symfony project. Now i have it in my Symfony3 project but I can't use it because I tried all paths from my twig file but it doesn't find the file.
Are there some options I have to modify or something like that?
You need to put your css/js/fonts/img folder in your web directory.
In your code, calling something like that should work
<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
Related
So I created a web app using visual studio .net core 3.1. I see that boostrap came with it by default. So what I did was copy and paste the accordion example from bootstrap and was expecting it to work by default but it is not rendering. I double checked and see that jquery is referenced before boost strap. I checked the css and JS file and it is loaded, and there is no error in the console. Is there something else I need to do?
Update:
This is where I got the sample code, it is the very first example: Bootsrap example
You can open bootstrap.js in your project,you will find the version of bootstrap is v4.3.1,and you are referencing the official document of bootstrap v5.0,so you need to add the css and js of v5.0.
You can try to add the css and js of v5.0 to your _layout.cshtml.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
I am pretty new to Symfony and NPM, Composer etc. I set up my symfony project and installed Bootstrap 4 via NPM
npm install bootstrap
Now the bootstrap files are located in the "node_modules/bootstrap" folder.
How can I include this sources correctly in my base.html.twig?
<link href="{{ asset('node_modules/bootstrap/dist/css/bootstrap.min.css') }}" rel="stylesheet">
I don't know if that is the correct way. As I said, I am new to this.
You can use "import" in your js file to import css.
import 'bootstrap/dist/css/bootstrap.min.css';
https://reactstrap.github.io/
I've a custom theme under app/theme/AcmeTheme. I have the theme working and I can define my own templates under views or override template for other Bundles. The problem is that I can not figure out how to add a custom CSS file inside my theme.
So fat I've tried:
AcmeTheme/public/style.css
AcmeTheme/web/style.css
But after running assets:install and sylius:theme:assets:install the file is not copied. I have read the documentation multiple times and I can still not get it to work.
Place your style.css in app/themes/AcmeTheme/SyliusShopBundle/public/ and run sylius:theme:assets:install. Now your style.css should be available in web/bundles/_themes/AcmeTheme/template/syliusshop/ and you can include it in the html.twig with <link rel="stylesheet" href="{{ asset('bundles/syliusshop/styles.css') }}">
Solution with assets in app/themes/AcmeTheme/web/assets/ doesn't work for me. Only way to add custom assets is via app/themes/AcmeTheme/SyliusShopBundle/public/ which is pretty odd.
I'm trying to make a simple page with bootstrap and glypicons in jsf 2.2. I've included webjar's bootstrap dependency (and opening the jar I can see the fonts file are present).
When deploying the app to wildfly, bootstrap css works correctly, but icons shown are horrible (like a default font or something). Looking at the network tab in the browser, I only see 404 errors:
http://localhost:8080/proto/javax.faces.resource/bootstrap/3.1.1/fonts/glyphicons-halflings-regular.woff 404
http://localhost:8080/proto/javax.faces.resource/bootstrap/3.1.1/fonts/glyphicons-halflings-regular.ttf 404
I tried including the other dependency (bootstrap-glypicons) and I only get the 404 errors twice. What am I missing?
This is how I'm including boostrap, which works correctly for css:
<h:outputStylesheet library="webjars" name="bootstrap/3.1.1/css/bootstrap.min.css" />
And this is how I'm using the css classes:
<button><span class="glyphicon glyphicon-minus"></span></button>
You should use <link> tag instead of <h:outputStylesheet>
eg.
<link rel="stylesheet" type="text/css" media="all" href="webjars/bootstrap/3.1.1/css/bootstrap.min.css"/>
--- UPDATE
This happen because ResourceHandler in JSF add library value (webjars) to the end of URI as a parameter:
faces/javax.faces.resource/bootstrap/3.1.1/css/bootstrap.min.css?ln=webjars
in bootstrap.min.css CSS there are such references to files:
url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
so if you want to use <h:outputStylesheet> you can write own ResourceHander or you can edit bootstrap.min.css and fix paths to glyphicons-halflings-regular.* files
In my opinion is better to use standard html tag <link> instead of <h:outputStylesheet> because JSF component tree will be smaller and it act on performance. Inside bootstrap.min.css there is no EL so there is no need to use <h:outputStylesheet>
Small update: webjars has JSF specific versions of several CSS libraries, in case of the bootstrap CSS the following will work just fine:
<h:outputStylesheet library="webjars" name="bootstrap/3.3.5/css/bootstrap-jsf.css" />
Note the -jsf suffix.
I have an Octopress blog with an installed Octostrap3 theme. Everything works fine so far.
But I've been looking for the last days and I'm not able to find the responsible css files in Octostrap3 to change the colors for my Octopress blog.
Could anybody tell me which css (or scss) files I need to edit?
Ok, i've found a solution that works for me.
tomordonez' hint didn't help in my case (but thank you anyway), because there was just an screen.css in /source/stylesheets, no style.css.
If you have octostrap3 installed, you can use any bootstrap theme. To change the theme, you just have to edit the /source/_includes/custom/head.html and insert the path to the css file for your theme.
I placed my theme-css-file in /source/assets/deg0nz/, so i changed the head.html to:
<link href="{{ root_url }}/assets/deg0nz/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="{{ root_url }}/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
I have chosen a theme from bootswatch and customized it with their customization procedure. So in the end i just had to change the bootswatch.less, the variables.less and the bootstrap.css in the bootswatch-theme folder and create the min-files.
Instead of doing this you can use any bootstrap.css and place it's path in /source/_includes/custom/head.html like i described above.
Try source/stylesheets/style.css