1

I am new for for css and Bootstrap so sorry if silly question.

I want to use the Bootstrap in my project. I found a tutorial and going to follow. In the tutorial There is a folder and when I run the index.html file then you can see page with the logo.

I am trying to use the bootstrap and css in my project. I tried make same in my project with main.phtml I run my file first and I could not see the logo(image) and I was thinking the problem is the path of .css file

The problem is when I put my html file in any directory rather than under main project(no any directory) I cannot see the logo.

Below first two screenshot is the tutorial file screenshots and the second two screenshot is the my file screenshots. (I did not share any code because the css and html files are working)

Can someone explain to me why we cannot use the html files in directory or if yes how can we manage?

enter image description here

enter image description here

but when I try to add my project I cannot see the logo.

enter image description here

and the view;

enter image description here

EDIT

HoldOffHunger
  • 18,769
  • 10
  • 104
  • 133
macintosh
  • 161
  • 12
  • Hi! You seem to be new around this site, please be aware that posting code as images is considered bad practice: SO users view posts on many different kinds of media, including mobile devices that make viewing images with text tedious. Instead, please edit your question and provide some code inline. You might also want to read [this guide](https://stackoverflow.com/help/mcve)! – Oliver Baumann Oct 21 '18 at 20:19
  • Hi @OliverBaumann appreciate your comment but my question is not related any coding because it is working. Only am asking that what is the difference between two project folder and I think you do not need. If I am wrong please correct me. Thanks – macintosh Oct 21 '18 at 20:21
  • Hello, create your `img` folder insted of your `web/static/` directory, and upload `logo.png` file to your `img` folder. – Sanu Oct 21 '18 at 20:26
  • @macintosh, you posted two screenshots of an IDE. The first has the cursor set after a random input "s", which is weirdly distracting. The file browser doesn't even highlight the file we are looking at in the tree: I'm already lost. Second IDE: the file highlighted in the tree is not the one we are looking at, there is a weirdo little bulb-icon somewhere and by now I've forgotten what I'm looking for already and am frustrated because I'm on a mobile device with bad connectivity. Please do not post images because putting something into text/ASCII was too much effort. – Oliver Baumann Oct 21 '18 at 20:30
  • All screenshots edited, now you can see trees. – macintosh Oct 21 '18 at 20:44
  • It is same @Sanu – macintosh Oct 21 '18 at 20:47

1 Answers1

1

Please check here:

https://stackoverflow.com/a/20047417/6284581

you do not have to move your .html file

Your example css and img path not state correctly.

../ means one file directory up(check link above)! In your example if you start from web... then you need to go main project directory. Try this

<link href="../web/static/styles/style.css" rel="stylesheet">

<a class="navbar-brand" href="#"><img src="../web/static/style/img/logo.png"></a>

I hope it will help to you

Axis
  • 2,066
  • 2
  • 21
  • 40