Styles Bootstrap

Navigation
2

I'm doing a web app to which I want to incorporate bootstrap as well as custom styles. The problem is that I take the default bootstrap styles but not the custom ones I apply. For example: in the index.php I have a jumbotron, which I want to customize. 

          <?php include('includes3/meta2.php'); ?>

            //Mas codigo
        <div class="jumbotron">
        <div class="container"><h1>QUIENES SOMOS</h1></div>
        <img src="img3/imgHeadAcercaDe.jpg">
      </div>

And in the .css 

/*JUMBOTRON*/

.jumbotron {
background-color: transparent;
position: relative;
padding-top: 0;
padding-bottom: 0;
}

.jumbotron img {
width: 100%;
}

.jumbotron h1{
position: absolute;
bottom: 25%;
color: #FFF;
text-shadow: 3px 3px 1px #18367c;
font-size: 40px;
font-weight: 400;
}

However, I do not take those styles since it does not look like this and when I see it through F12 it shows me that the jumbotron style takes it from bootstrap.min.css and typography, etc. inherited from body.

In the meta2.php: 

      <!DOCTYPE html>
     <html lang="es">
     <head>
     <meta charset="utf-8>"
     <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--Stylesheets-->
     <link rel="stylesheet" type="text/css" href="css3/estilos.css"/>
      <!--Bootstrap-->
     <script 
      src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
      <link rel='stylesheet' type='text/css' href='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>

How could I fix it?

    
asked by Maria Laura 19.02.2018 в 15:07
source

2 answers

1

friend styles, should be applied in HTML , after that you should:

  • put your custom stylesheet in second position
  • then invoke bootstrap , p so the latter does not over write your styles

    • CODE SHOW 

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <link rel="stylesheet" href="MiHojaEstilos.css">
</head>
<body>

</body>
</html>
      

    the styles being cascaded, the ones from the link to   boostrap and then those of MiHojaEstilos.css in this way   keep the styles that you generated yourself

        
    answered by 19.02.2018 / 15:13
    source
    5

    As the Bootstrap documentation says you have to add the following code to your tag > head . You should not forget to import the JavaScript files! 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    If you already have the bootstrap.min.css or bootstrap.css file in any folder of your project, it would be something like this: 

    <link rel="stylesheet" href="css/bootstrap.min.css">

    Your code should look like this: 

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

        <!-- Acá es donde tienes mal apuntada la dirección, te falta el http -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

        <title>Hello, world!</title>
</head>
        
    answered by 19.02.2018 в 15:17
    Error java.lang.ArrayIndexOutOfBoundsException Remove blank spaces [duplicated]