Problem with bootstrap, sections put next to each other and can´t undo it

Problem with bootstrap, sections put next to each other and can´t undo it
0

#1

I enter to this site to look for a piece of code for a navbar in bootstrap https://hackerthemes.com/bootstrap-cheatsheet/ and use the navbar-toggler, it works for the first section of my program, but when create the second section, it was put next to the first. I don´t know why this happen. I use clear:both in css but nothing happened, I tried to make the position absolute, but when you have more than 2 sections this only messed up everything. Anyone knows how to solve this?.


#2

Can you post your code, or a link to a codepen?


#3

the html is

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS que se descargo de la pagina y fue compilado con Koala-->
    <link rel="stylesheet" href="css/bootstrap.css">
	<link rel="stylesheet" href="css/font-awesome.min.css">
	<link rel="stylesheet" href="css/estilos.css">
	
  </head>
  <body>
  <!-- <div style="clear:both;"></div> -->
    <section class="Bienvenidos">
	<div class="container">
	<header class ="Encabezado">
	
	
	<!-- la imagen debe estar en la misma carpeta que el archivo.css-->
	
	<!-- para que lo que sigue despues del menu se quede fijo le agregamos la clase navbar-fixed-top-->
	<nav class="navbar fixed-top panel-default.affix navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">   
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#!">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-md-0">
	<!--ul class="menu_ext"-->
      <li class="nav-item active"> <!-- active es para mostrar el valor que actualmente esta activo del menu-->
        <a class="nav-link" href="#!">Nosotros <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#!">Servicios</a>
      </li>
	  <li class="nav-item">
        <a class="nav-link" href="#!">Portafolios</a>
      </li>
	  <li class="nav-item">
        <a class="nav-link" href="#!">Contactos</a> 
      </li>
    </ul>
  </div>
</nav>
	
	</header>
		
	<div class="texto-bienvenido text-center">
	<p class="h4">Bienvenidos a nuestro estudio.</p>
	<h1 class="display-3 mb-3">Encantado de conocerte.</h1>
	<a href="#" class="btn btn-primary btn-lg">Ponte en contacto.</a>
	</div>
	</div>

	</section>
	
	<section class="quienes-somos py-3">
	<div class="container text-center">
	
	<img src="images/persona.svg" alt="persona" class="img-fluid mt-3 mb-3 "></img>
	<h2 class="h1">¿Quienes somos?<br></h2>
	<p>Ponemos un servicio integral al alcance de tus necesidades, desde la parte de frontend hasta el backend de tu sitio web de manera que sea adaptable a cualquier dispositivo movil.</p>
	<a href="#" class="btn btn-secundary btn-lg mb-3">Más información.</a>
	
	</div>
	</section>
	
	<section class="servicios py-3 text-center">
	
	<div class="container">
	<h2 class="h1">Nuestros servicios<br></h2>
	
	<div class="row">
	<!-- si se usa col-* o con un tamaño especifico de pantalla la suma del numero de columnas totales no puede pasar de 12-->
		<div class="col-md-4">
		a
		</div>
		<div class="col-md-4">
		a
		</div>
		<div class="col-md-4">
		a
		</div>
	</div>
	
	
	</div>
	
	</section>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
  </body>
</html>

and estilos.css

@charset "UTF-8";
body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: red;
  margin: 0;
  padding: 0; }

.Bienvenidos {
  background-color: red;
  /* Si se usa background nada mas, el background tapa el texto que se ponga encima de él */
  background-image: url("../images/negocios.png");
  background-size: cover;
  /*one image that ocuppy all the window*/
  /*min-width:33vw; /* this has to be used because background-size cover doesnt reach full page
  and if you put width only, it left a little space*/
  display: block;
  /*height:100vh;*/
  /*overflow:hidden; /*en el caso de que al poner un margen la imagen no cubra toda la pantalla*/ }

.clearfix:after {
  content: "";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both; }

.Bienvenidos {
  /*position:relative;*/ }

.Encabezado {
  background: rgba(0, 0, 0, 0.28);
  color: rgba(255, 255, 255, 0.9);
  /*position:absolute;
  left:0;
  top:0;
  z-index:0;*/ }

/*this part makes all the navbar go black and fixed-top makes it ocuppy all the window*/
.fixed-top {
  background: rgba(0, 0, 0, 0.7); }

.navbar-light .navbar-brand, .navbar-light .navbar-toggler {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.5rem; }

.navbar-light .navbar-nav .open > .nav-link, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.open, .navbar-light .navbar-nav .nav-link.active {
  color: rgba(255, 255, 255, 0.9); }

.navbar-light .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.5); }

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); }

.navbar-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  text-align: center; }

.navbar-light .navbar-nav .open > .nav-link, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.open, .navbar-light .navbar-nav .nav-link.active {
  color: rgba(255, 255, 255, 0.9);
  background: red; }

.nav-item:hover {
  background: red; }

.active {
  margin-top: .2rem; }

.btn-secundary, .btn-secundary:hover {
  background-color: #ff4;
  color: white; }

.nav-item {
  /*margin:.2rem;*/ }

.texto-bienvenido {
  margin-top: 6rem; }

.btn-primary, .btn-primary:hover {
  color: #fff;
  background-color: red;
  border-color: black; }

.btn-primary, .btn-secundary {
  text-transform: Uppercase; }

.quienes-somos {
  color: #fff;
  background-color: blue;
  display: block;
  /*position:absolute;
  left:0;
  top:100vh; /*Debido a que por una extraña razon no se pudo realizar como en el video se tuvo que cambiar el position a absolute
  para que el siguiente section se encontrara abajo y no al lado, NOTA: no funciono clear:both y clearfix:after*/
  /*width:33vw;*/ }

.servicios {
  background-color: #ff8;
  color: white;
  display: block;
  /*position:absolute;
  left:0;*/
  /*width:33vw;
  /*top:256vh;*/ }

/*background-size:cover;   sirve para que la imagen llene todo su contenedor*/

/*# sourceMappingURL=estilos.css.map */

I am form Mexico,that´s why it’s in spanish


#4

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#5

thanks a lot, I didin´t know that


#6

Your problem is with setting the body to display:flex. If you use flex, you will also have to use the properties that come with it too control things like width.

I think it is not a good idea to use flexbox on the body itself if you are also using Bootstrap.


#7

thanks a lot, I have this problem from 2 days before, in an internet ourse told me to do that but I see it was wrong, I will put a comment inmediately.