How to fix the content on the left, with Bootstrap

Navigation
0

The content has been left on the left side when what I'm trying to do is stay focused and I do not identify why that happens to me.

Attach an image. 

.nosotros{
    background: no-repeat center center; 
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    height: 600px;
}

.texto-nosotros {
	margin-top: 200px;
}

.caja-nosotros {
	  width: 100%;
    height:inherit;    
    padding: 50px;
    border: 1px solid black;
    box-sizing: border-box;
}
<div class="container-fluid">
<div class="nosotros" style="background-image: url(imagenes/parallax.png); background-size: 100%;">
    
        <article>
          <div class="col-md-10 offset-md-2">
                  <div class="texto-nosotros">
                        <h1 class="text-center"><b>ACERCA DE</b> “JOSÉ MIGUEL, ARTE Y BELLEZA”</h1><br>

                    <div class="caja-nosotros">
                        <p>Durante más de 15 años de profesionalismo, experiencia y servicios, José Miguel Sanchez Gonzalez, tenia la 
                        firme idea de crear un espacio para la gente actual, moderna y vanguardista, es asi, como en el 2010 abre sus 
                        puertas “José Miguel arte y belleza” como una gran alternativa a los grandes y prestigiosos centros de estetica 
                        de la ciudad de Bogotá, en la que se ofrecen productos y servicios de gran calidad a precios apropiados.</p>
                    </div>
                  </div>
               </div>
         </article>>

</div>
</div>
    
asked by linjai 12.09.2017 в 17:26
source

4 answers

2

Class offset-md-2 does not exist, change it to col-md-offset-1 and it should behave as you wish. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="border:1px solid green;width:50%;margin-left:25%;padding:20px 0px 20px 0px">
  <div style="border:1px solid red" class="col-xs-10 col-xs-offset-1">
    Div centrado
  </div>
</div>
    
answered by 12.09.2017 / 17:53
source
1

You can try to solve it by applying div within <article> class class = "justify-content-center" and / or removing offset .

    
answered by 12.09.2017 в 17:40
1

You only have one error in this part:

You're not telling him not to take the whole grid to focus, you just have to change that for this, <div class="col-md-12 offset-md-2"> 

.nosotros {
  background: no-repeat center center;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;
  height: 600px;
}

.texto-nosotros {
  margin-top: 200px;
}

.caja-nosotros {
  width: 100%;
  height: inherit;
  border: 1px solid black;
  box-sizing: border-box;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="nosotros" style="background-image: url(http://cdn.homedit.com/wp-content/uploads/2011/08/137CLUB2ST.png); background-size: 100%;">

    <article>
      <div class="col-md-12 offset-md-2">
        <div class="texto-nosotros">
          <h1 class="text-center"><b>ACERCA DE</b> “JOSÉ MIGUEL, ARTE Y BELLEZA”</h1><br>

          <div class="caja-nosotros">
            <p>Durante más de 15 años de profesionalismo, experiencia y servicios, José Miguel Sanchez Gonzalez, tenia la firme idea de crear un espacio para la gente actual, moderna y vanguardista, es asi, como en el 2010 abre sus puertas “José Miguel arte
              y belleza” como una gran alternativa a los grandes y prestigiosos centros de estetica de la ciudad de Bogotá, en la que se ofrecen productos y servicios de gran calidad a precios apropiados.</p>
          </div>
        </div>
      </div>
    </article>

  </div>
</div>
    
answered by 12.09.2017 в 17:44
1

Change line <div class="col-md-10 offset-md-2"> to this <div class="col-lg-12">

Here you can see the documentation link

    
answered by 12.09.2017 в 17:48
select an option with multiple select .load (fn) does not work when migrating to .on ('load') Jquery 3.1