2

La pagina hecha con bootstrap se me pega al borde de la pantalla, ¿cómo puedo dejar un espacio?

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Theme Template for Bootstrap</title>


    <link rel="stylesheet" href="css/styleFormNavBar.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style3.css">
    <link rel="stylesheet" href="css/estilos.css">
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap theme -->
    <link href="css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="css/bootstrap-theme.min.css" rel="stylesheet">
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="theme.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">

<!-- jQuery library -->
<script src="jq/jquery.min.js"></script>
<script src="jq/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.min.js"></script>
  </head>

  <body>

    <nav class="navbar navbar-inverse ">
      <div class="container">
        <div class="navbar-header collapse navbar-collapse">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">navbar-inverse</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <img src="ims/logo2.jpg" height="50" width="50"> 
        </div>

        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-left">
            <li ><a href="#">Solicitudes</a></li> <!--class="active" -->
            <li><a href="#">Certificados</a></li>
            <li><a href="#">Administrativo</a></li>            
            <li><a href="#">Reportes</a></li>            
            <li><a href="#">Estado de Trámites</a></li>   
            <li>&nbsp; &nbsp; &nbsp;</li>  
            <li><button class="btn btn-primary navbar-btn navbar-right">Iniciar Sesión</button>   </li>      
          </ul>

        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="slider">
      <div class="slides">
        <div class="slide">
          <img src="ims/11.jpg" alt="">
        </div>

        <div class="slide">
          <img src="ims/22.jpg" alt="">
        </div>

        <div class="slide">
          <img src="ims/33.jpg" alt="">
        </div>

        <div class="slide">
          <img src="ims/44.jpg" alt="">
        </div>
      </div>
      <div onclick="goLeft()" class="btnLeft fas fa-chevron-left"></div>
      <div onclick="goRight()" class="btnRight fas fa-chevron-right"></div>
    </div>

      <div class="row">
        <div class="col-sm-4">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title"><a href="#"> Solicitudes</a></h3>
            </div>
            <div class="panel-body">
             <img src="ims/funcionario.jpg" height="200" width="320">
            </div>
          </div>

          <div class="panel panel-primary">
            <div class="panel-heading">
              <h3 class="panel-title"><a href="#l">Certificados</a></h3>
            </div>
            <div class="panel-body">
              <img src="ims/carta_laboral.jpg" height="200" width="320">
            </div>
          </div>
        </div><!-- /.col-sm-4 -->

        <div class="col-sm-4">
          <div class="panel panel-success">
            <div class="panel-heading">
              <h3 class="panel-title"><a href="cesantias.html">Reportes</a></h3>
            </div>
            <div class="panel-body">
              <img src="ims/reporte.png" height="200" width="320">
            </div>
          </div>

          <div class="panel panel-info">
            <div class="panel-heading">
              <h3 class="panel-title"><a href="permisos.html">Estado de Trámites</a></h3>
            </div>
            <div class="panel-body">
              <img src="ims/tramite.jpg" height="200" width="320">
            </div>
          </div>
        </div><!-- /.col-sm-4 -->

        <div class="col-sm-4">
          <div class="panel panel-warning">
            <div class="panel-heading">
              <h3 class="panel-title"><a href="capacitacion.html">Iniciar Sesión</a></h3>
            </div>
            <div class="panel-body">
              <img src="ims/cerradura.jpg" height="200" width="320">
            </div>
          </div>

          <div class="panel panel-danger">
            <div class="panel-heading">
              <h3 class="panel-title"><a href="nomina.html">Administrativo</a></h3>
            </div>
            <div class="panel-body">
              <img src="ims/novedades.jpg" height="200" width="320">
            </div>
          </div>
        </div><!-- /.col-sm-4 -->



      <div class="footer" >        
        <div class="col-sm-7">
          <div >
          <strong>Hospital General de Medellín</strong><br>
          El Hospital General de Medellín es una Empresa Social del Estado que presta servicios de salud hasta la alta complejidad, centrados en la seguridad del paciente, brindando afecto, confianza, satisfacción y promoviendo buenas prácticas ambientales y de calidad.
          </div> 
        </div>    
        <div class="col-sm-5">
          <div > Conmutador: (574) 384 7300 Fax: (574) 232 0227<br>
              Carrera 48 No.32 - 102 Medellín - Colombia<br>
              Código postal 0500515<br>
              [email protected]   <br><br>           

          </div>     
        </div>      
      </div><!-- footer -->      


    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="../../dist/js/bootstrap.min.js"></script>
    <script src="../../assets/js/docs.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
    <script type="text/javascript">
  var slides = document.getElementsByClassName("slide");
  var index = 0;
  function goLeft() {
    if(index == 0) index = slides.length - 1;
    else index--;

    slides[0].style.marginLeft = "-" + index * 1100 + "px";
  }
  function goRight() {
    if(index == slides.length -1) index = 0;
    else index++;

    slides[0].style.marginLeft = "-" + index * 1100 + "px";
  }

  //for auto Navigation
</script>
  </body>
</html>

¿Estaría bien un espacio a la izquierda? introducir la descripción de la imagen aquí

2
  • 2
    Hola, tienes 2 formas de hacerlo, una poniendo paddings en el html, o saber lo basico de bootstrap, que es metiendo el contenido en un <div class="container"></div>. Tambien puede ser class container-fluid. Despues del slider tienes row, pero estas necesitan un contenedor el 19 mar. 2019 a las 16:58
  • 2
    Viendo la imagen que agregaste, creo que la mejor solucion es la que menciona @FranciscoGarrido, deberias encapsular tu row dentro de un <div class="container">
    – IvanS95
    el 19 mar. 2019 a las 17:02

2 respuestas 2

5

Con las siguientes clases podrás hacer margin o padding (espaciado externo e interno):

Margin right y left (espaciado externo, ambos lados):

<div class="mx-5 my-5"></div>

O simplemente:

<div class="m-5"></div>

O con padding:

<div class="p-5"></div>

O con container y container-fluid:

<div class="container"></div>
<div class="container-fluid"></div>

Estos dos últimos harán un margen horizontal (x).

Agregando alguna de esas clases a un div en especifico harás que este tenga un espaciado en sus lados, te recomiendo que veas la documentación de la pagina de Bootstrap 4.

0
1

Lo más fácil que puedes hacer es consumir Bootstrap y en el Body poner una sección con clase container.

<body>
   <section class="container">
      <!--Tú código-->
   </section>
</body>

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.