Sidebar is not left-aligned - Bootstrap
Question
I'm practicing with Bootstrap and this element in the sidebar stays at the bottom and not to the right as it should appear.
I've tried floating it to the right but it doesn't change position.
Here you are the code use it.
I don't know what else I could try so I appreciate your help.
HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Aprendiendo Bootstrap</title>
<link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container border">
<div class="row">
<header id="header" class="col-12 bg-primary text-white p-2 pl-5">
<h1>Aprendiendo Bootstrap</h1>
</header>
<nav id="menu" class="col-12 bg-secondary text-white">
<ul class="row w-50">
<li class="col">Inicio</li>
<li class="col">Página 1</li>
<li class="col">Página 2</li>
<li class="col">Página 3</li>
<li class="col">Contacto</li>
</ul>
</nav>
<section id="content" class="col-12">
<div class="row">
<section id="products" class="col-9 border m-2">
<h2>Productos</h2>
<hr>
<div class="items">
<div class="row">
<div class="item col bg-primary m-2">
Producto
</div>
<div class="item col bg-warning m-2">
Producto
</div>
<div class="item col bg-danger m-2">
Producto
</div>
</div>
<div class="row mt-5">
<div class="item col bg-primary m-2">
Producto
</div>
<div class="item col bg-warning m-2">
Producto
</div>
<div class="item col bg-danger m-2">
Producto
</div>
<div class="item col bg-success m-2">
Producto
</div>
</div>
<div class="row mt-1 justify-content-around">
<div class="item col-3 bg-primary">
Producto
</div>
<div class="item col-3 bg-warning">
Producto
</div>
<div class="item col-3 bg-primary">
Producto
</div>
</div>
</div>
</section>
<aside class="col-3 border">
<h2>Barra lateral</h2>
<div class="lateral row bg-light align-items-center">
<div class="col-4 bg-primary align-self-start">
Elemento 1
</div>
<div class="col-4 bg-success align-self-center">
Elemento 2
</div>
<div class="col-4 bg-warning align-self-end">
Elemento 3
</div>
</div>
</aside>
</div>
</section>
<footer class="col-lg-12 bg-info">
Máster en Bootstrap - Cristina Martínez©
</footer>
</div>
</div>
<script type="text/javascript" src="JQuery/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="Bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
If you need more information, please can you ask me.
THANKS!
1 answers
solution1
0 ACCPTED 2020-09-29 18:38:12
Your main div has got a class of m-2 on it. Which means margin is being applied to the div. If you update your code to this it should work
<section id="products" class="col-9">
and
<aside class="col-3">
The border on the div and aside might also be pushing the width of each to wide. So try with and without border.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.