4

estoy conociendo el mundo de bootstrap.

Me mandaron a realizar una práctica sencilla, pero siempre termino con el mismo problema. La separación entre elementos. A continuación les mostraré mi inquietud, quizás es una tontería pero quisiera ayuda con ello, se los agradecería, gracias. La meta es la siguiente imagen: introducir la descripción de la imagen aquí


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css\bootstrap.min.css">

    <title>Document</title>
</head>

<body>
    <div class="container">    
        <nav class="col-sm-12 navbar navbar-expand-sm bg-dark">
                <form class="form-inline">
                    <div class="input-group">
                        <span class="input-group-text">@</span>
                        <input type="text" class="form control" id="username" name="username" placeholder="Username...">
                    </div>
                </form>
        </nav>
        <br>
        <div class="row justify-content-between">
            <div class="col-sm-4 alert alert-primary">
                <strong>
                    Prueba de componente alert
                </strong>
            </div>
            <div class="col-sm-4 alert alert-secondary">
                <strong>
                    Prueba de componente alert
                </strong>
            </div>
            <div class="col-sm-4 alert alert-success">
                <strong>
                    Prueba de componente alert
                </strong>
            </div>
        </div>


        <div class="row justify-content-between">
            <div class="col-sm-4 alert alert-danger">
                <strong>
                    Prueba de componente alert
                </strong>
            </div>
            <div class="col-sm-4 alert alert-warning">
                <strong>
                    Prueba de componente alert
                </strong>

            </div>
            <div class="col-sm-4 alert alert-info">
                <strong>
                    Prueba de componente alert
                </strong>
            </div>
        </div>


        <div class="row justify-content-between">
            <div class="col-sm-6 alert alert-light">
                <strong>
                    Prueba de componente alert
                </strong>
            </div>
            <div class="col-sm-6 alert alert-dark ">
                <strong>
                    Prueba de componente alert
                </strong>
            </div>
        </div>
    </div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>       
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>       
<script src="js\bootstrap.min.js"></script>
</body>      
</html>

Pero por desgracia, obtengo totalmente lo contrario:

introducir la descripción de la imagen aquí

Intenté disminuyendo el espacio entre columnas, pero no es lo que quiero, se ve muy pequeño, muy encogido. Y sin embargo, cuando intento escribir más se sale del alert

introducir la descripción de la imagen aquí

3 respuestas 3

2

Lo que pasa es que los estilos de la clase alert se los estas aplicando a los div con la clase col, lo que podrías hacer es crear un elemento div dentro de cada elemento con la clase col y añadirle los estilos alert, te pongo un ejemplo:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</head>

<body>
	<nav class="col-sm-12 navbar navbar-expand-sm bg-dark mb-3">
		<form class="form-inline">
			<div class="input-group">
				<span class="input-group-text">@</span>
				<input type="text" class="form control" id="username" name="username" placeholder="Username...">
			</div>
		</form>
	</nav>
	<div class="container">

		<div class="row justify-content-between">
			<div class="col-sm-4">
				<div class="alert alert-primary">
					<strong>Prueba de componente alert</strong>
				</div>
			</div>
			<div class="col-sm-4">
				<div class="alert alert-secondary">
					<strong>Prueba de componente alert</strong>
				</div>
			</div>
			<div class="col-sm-4">
				<div class="alert alert-success">
					<strong>Prueba de componente alert</strong>
				</div>
			</div>
		</div>

		<div class="row justify-content-between">
			<div class="col-sm-4">
				<div class=" alert alert-danger">
					<strong>Prueba de componente alert</strong>
				</div>
			</div>
			<div class="col-sm-4">
				<div class="alert alert-warning">
					<strong>Prueba de componente alert</strong>
				</div>
			</div>
			<div class="col-sm-4">
				<div class="alert alert-info">
					<strong>Prueba de componente alert</strong>
				</div>
			</div>
		</div>

		<div class="row justify-content-between">
			<div class="col-sm-6">
				<div class="alert alert-light">
					<strong>Prueba de componente alert</strong>
				</div>
			</div>
			<div class="col-sm-6">
				<div class="alert alert-dark">
					<strong>Prueba de componente alert</strong>
				</div>
			</div>
		</div>
	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>

</html>

1
  • 1
    Excelente, muchas gracias.
    – Dabydat
    Commented el 7 may. 2020 a las 0:15
2

Tu problema radica en la distribución entre los row y col que estas intentando implementar. Estas muy cerca, sólo debes ajustar un poco la distribución de los elementos

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="col-sm-12 navbar navbar-expand-sm bg-dark mb-3">
  <form class="form-inline">
    <div class="input-group">
      <span class="input-group-text">@</span>
      <input type="text" class="form control" id="username" name="username" placeholder="Username...">
    </div>
  </form>
</nav>

<div class="container">
  <div class="row justify-content-between">
    <div class="col-sm-4">
      <div class="alert alert-primary">
        <strong>
          Prueba de componente alert
        </strong>
      </div>
      
      <div class="alert alert-danger">
        <strong>
          Prueba de componente alert
        </strong>
      </div>
    </div>
    
    <div class="col-sm-4">
      <div class="alert alert-secondary">
        <strong>
          Prueba de componente alert
        </strong>
      </div>
      
      <div class="alert alert-warning">
        <strong>
          Prueba de componente alert
        </strong>
      </div>
    </div>
    
    <div class="col-sm-4">
      <div class="alert alert-success">
        <strong>
          Prueba de componente alert
        </strong>
      </div>
      
      <div class="alert alert-info">
        <strong>
          Prueba de componente alert
        </strong>
      </div>
    </div>
  </div>
  
  <div class="row justify-content-between">
    <div class="col-sm-6">
      <div class="alert alert-light">
        <strong>
          Prueba de componente alert
        </strong>
      </div>
    </div>
    
    <div class="col-sm-6">
      <div class="alert alert-dark">
        <strong>
          Prueba de componente alert
        </strong>
      </div>
    </div>
  </div>
</div>

Te dejo este link para que le eches un vistazo y entiendas mejor como trabajan las columnas en Bootstrap ;)

1
  • Muchas gracias.
    – Dabydat
    Commented el 7 may. 2020 a las 0:14
1

Prueba a agregar un div padre para cada alert y asi puedas controlar el margin y padding del elemento.

Asi con pr-1 pl-1 al div se le agrega padding derecho e izquierdo respectivamente.

 <div class="row justify-content-between">
        <div class="col-sm-4 pr-1 pl-1">
            <div class=" alert alert-primary">
                <strong>
                    Prueba de componente alert
                </strong>
            </div>
        </div>

        <div class="col-sm-4 pr-1 pl-1">
            <div class=" alert alert-primary">
                <strong>
                    Prueba de componente alert
                </strong>
            </div>
        </div>

        <div class="col-sm-4 pr-1 pl-1">
            <div class=" alert alert-primary">
                <strong>
                    Prueba de componente alert
                </strong>
            </div>
        </div>

    </div>

Siempre toma en cuenta las diferencias que existen entre el border, el margin y el padding. Distribucion de elemento html

Margin: La distancia que mantiene un elemento de otro

Padding: La distancia que mantienen los elementos dentro del mismo elemento. En este caso del div padre agregamos un padding para obtener el espacio requerido del alert.

Border: Grosor o anchura de un elemento.

1
  • Perfecto ¡Gracias!
    – Dabydat
    Commented el 7 may. 2020 a las 0:18

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.