Bootstrap dropdowns styles

Navigation
0

I'm adding some Bootstrap nav to my website, specifically a Dropdown, but with the 3.3.7 bootstrap version I found everything strange without Dropdown style.

Then I went to the bootstrap documentation and found the version 4.0.0 that perfectly loads the dropdowns however, all my other page is with:

Huge letters where they should not be. Some elements such as TABLES and INPUTS increased their size and although they are responsive, the information looks messy.

Is there any form or version of bootstrap that works for me and the dropdowns look good and the rest of the style is acceptable?

CURRENT CDN 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">

PREVIOUS CDN 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

with version 3.3.7 of bootstrap looks like this:

With version 4.0.0 it looks like this:

The structure of my pages is as follows: 

<?php
require_once 'header.php';

//Body de la pagina

requiere_once 'footer.php';

?>

The HEADER.PHP 

<html>  
      <head>  
           <title></title>  

           <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

                   <!-- CSS -->
                 <link rel="stylesheet" type="text/css" href="css/styles.css"> 
            <link rel="stylesheet" type="text/css" href="css/estilos.css">
            <link rel="stylesheet" href="https://necolas.github.io/normalize.css/3.0.2/normalize.css"> 
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
            <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>  

</head>  
      <body>

THE FOOTER.PHP 

 </body>

 <script src="js/jquery.min.js"></script>

</html>

And the code that contains my DROPDOWNS is: 

<ul class="nav nav-pills">

    <li class="nav-item dropdown">
    <a class="nav-link active dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Prestamos</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="clientssession.php">Estado de Prestamo</a>
      <a class="dropdown-item" href="clientssession_paymentshistory.php">Historial de pagos</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Informacion General</a>
    </div>
  </li>

  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Ahorros</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="clientssession_ahorros.php">Estado de Ahorros</a>
      <a class="dropdown-item" href="#">Historial de Abonos y Retiros</a>
    </div>
  </li>
</ul>
    
asked by Nor 01.01.2019 в 23:44
source

2 answers

1

Although it is the same framework, they made several changes between version 3.3 * and version 4, the html code that should work for the dropdown you want in versions 3.3. *, is as follows: 

<ul class="nav nav-pills">    
<li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
          Dropdown <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </li>
</ul>

Obviously when you changed from version 3.3 to version 4 many of your styles of other elements were affected because as I mentioned, several things changed from one version to another.

For version 3.3. * you can take as a reference the following documentation

For version 4, consider the following documentation

    
answered by 07.01.2019 в 22:51
1

Much depends on the version of the bootstrap that you use, for example, it has always worked for me like this 

 <!-- Static navbar -->
<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="../navbar/">Default</a></li>
        <li class="active"><a href="./">Static top <span class="sr-only">(current)</span></a></li>
        <li><a href="../navbar-fixed-top/">Fixed top</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

you could check this documentation link

    
answered by 07.01.2019 в 23:18
SMTP connect () failed. https://github.com/PHPMailer/PHPMailer/wiki/Troubleshooting How to get data from a scraping page