I'm starting in the world with html and a problem arises from minute one and it's that when I want to put an image and then some buttons, the buttons go under the image and are placed a little above it. I don't know if I'm not using the bootstrap grid system correctly but I don't know how to avoid this problem. Here is the code and an image of what happens to me:
<div class="container">
<div class="row">
<!-- Logo de la página -->
<div class="col-md-3">
<a href="./inicio.html">
<img id="logo" src="./img/wolf.png"/>
</a>
</div>
<!-- Menú superior -->
<div class="col-md-9">
<a class="boton" href="./inicio.html">Boton 1</a>
<a class="boton" href="./inicio.html">Boton 2</a>
<a class="boton" href="./inicio.html">Boton 3</a>
<a class="boton" href="./inicio.html">Boton 4</a>
<a class="boton" href="./inicio.html">Boton 5</a>
<a class="boton" href="./inicio.html">Boton 6</a>
</div>
</div>
</div>
Thank you very much for the help :)
The explanation for what happens to you is simple. You are not loading Bootstrap correctly .
Make sure in your code that you reference the path where it is located, both for su
.css
and su.js
. Also keep in mind that the loading of the library depends on Jquery , so it must be loaded before the Bootstrap one .My example shows the correct load order for you to keep in mind, as well as looking like using your HTML the Bootstrap classes are taking action.