Resaltar texto con Bootstrap

Hola a todos,

¿Cómo puedo hacer para resaltar un texto en bloque pero que abarque todo el ancho del monitor y usando Bootstrap? Gracias.

Respuestas

¿A qué te refieres con resaltar un texto? ¿Cambiar el color de fondo? ¿El color de letra? ¿Hacerlo más grande?

@javiereguiluz

17 septiembre 2016, 9:17

Algo así como el rectángulo negro que muestro en la imagen. No se cómo hacerlo. Gracias.

http://subefotos.com/ver/?5c311924c76977e7b33169991c775b01o.jpg

@matthewhallu

17 septiembre 2016, 14:27

Para hacer ese rectángulo negro, no tienes que hacer nada más que usar un <div> normal y corriente y ya ocupará toda la anchura de la página.

El gran problema es que la mayoría de páginas que usan Bootstrap tienen esta estructura:

<body>
  <div class="container">
    ...
  </div>
</body>

El elemento .container limita la anchura de todos los contenidos de la página, por lo que si metes el <div> dentro no te va a funcionar. Lo que tienes que hacer es lo siguiente:

<body>
  <div class="container">
    ... aquí algunos contenidos de la página ...
  </div>
 
  <div>
    ... aquí el TEXTO RESALTADO ...
  </div>
 
  <div class="container">
    ... aquí el resto de contenidos de la página ...
  </div>
</body>

@javiereguiluz

17 septiembre 2016, 15:16

Hola gracias por responder !! en serio gracias!...

Me olvide de aclarar que en el bloque negro atra va un texto ahi va la imagen como seria que quede

http://subefotos.com/ver/?28ebfe22e541d7f2ade879a50a91be9fo.jpg

<header>
        <div class="header-content">
          <div class="header-content-inner">
              <h2 class="section-heading" >GRUPO DAG</h2> 
                <hr>
 
             <div class="linea"><p>Grupo Dag es una empresa basada en la innovacion tecnológica que presta           servicios para
                    el mercado automotor en la reparación y repintado de  carrocería.
               </p> </div>
 
             <a href="#about" class=" btn btn-primary btn-xl page-scroll">Seguí explorando</a>
            </div>
        </div>
    </header>

tengo asi y me lo encierra pero no el 100% de la pagina como en la imagen , en este momento esta asi : plantilla1969.epizy.com

@matthewhallu

17 septiembre 2016, 15:30

El problema es que el elemento .linea está encerrado en otros elementos que le impiden crecer. En concreto, .header-content le roba 50px en cada lateral debido a un padding y el elemento .header-content-inner no le deja crecer más de 1.000px de ancho porque tiene un max-width.

La solución rápida podría ser:

<header>
    <div class="header-content">
      <div class="header-content-inner">
          <h2 class="section-heading" >GRUPO DAG</h2> 
            <hr>
        </div>
    </div>
 
    <div class="linea">
      <p>Grupo Dag es una empresa basada en la innovacion tecnológica que presta
      servicios para el mercado automotor en la reparación y repintado de  carrocería.</p>
 
      <a href="#about" class=" btn btn-primary btn-xl page-scroll">Seguí explorando</a>
    </div>
</header>

@javiereguiluz

17 septiembre 2016, 15:52

Mmmm, se borra todo. Un bajón, pero si modifico la hoja de estilo de .linea:

.linea{
    background-color: rgba(0,0,0,0.9);    
    border-radius: 4px ;   
    width: 144%;
}

Se me va para la derecha o se agranda, pero no queda centrado. ¿Se podrá hacer algo desde la hoja de estilo? Discúlpame, soy muy nuevo.

@matthewhallu

17 septiembre 2016, 16:15