0

Intento hacer una tabla modal que salen cuando se hace clic en un botón. Hice un código con la ayuda del sitio oficial de Bootstrap sobre los Modal pensando que marcharía, pero, aunque el botón está presente, no hay una tabla que salga. Tienen ustedes una idea ?

El codigo de la pagina esta sobre Bitbucket en index.html pero aqui esta el codigo si le necesiten. Señalé la línea donde comienza el código modal con un comentarion Example Modal Button :

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

<head>

    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link href="css/styles.css" rel="stylesheet">
    <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/bootstrap-social.css">
    <!--#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 -->

    <title>Ristorante Con Fusion</title>

    <!-- Bootstrap -->

    <!--#link href="css/bootstrap.min.css" rel="stylesheet">
    <!--#link href="css/bootstrap-theme.min.css" rel="stylesheet">
    <!--#link href="css/mystyles.css" rel="stylesheet">
    <!--#link href="css/font-awesome.min.css" rel="stylesheet">
    <!--#link href="css/bootstrap-social.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <nav class="navbar navbar-inverse navbar-toggleable-sm fixed-top" role = "navigation">
        <div class="container">
            <a class="navbar-brand" href="#"><img src="img/logo.png" height="30" width="41"></a>
            <div class="collapse navbar-collapse" id="Navbar">
                <ul class="navbar-nav nav">
                    <li class="nav-item active"><a class="nav-link" href="#"><span class="fa fa-home fa-lg"></span> Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="./aboutus.html"><span class="fa fa-info fa-lg"></span> About</a></li>
                    <li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-list fa-lg"></span> Menu</a></li>
                    <li class="nav-item"><a class="nav-link" href="./contactus.html"><span class="fa fa-address-card fa-lg"></span> Contact</a></li>
                </ul>
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item"><a class="nav-link" data-toggle="modal" data-target="#loginModal"><span class="fa fa-sign-in"></span> Login</a></li>
                </ul>
            </div>            
        </div>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
            <span class="navbar-toggler-icon"></span>
        </button>
    </nav>

     <div id="loginModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg" role="content">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Login </h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <form class="form-inline">
                    <div class="form-group">
                        <label class="sr-only" for="exampleInputEmail3">Email address</label>
                        <input type="email" class="form-control form-control-sm mr-1" id="exampleInputEmail3" placeholder="Enter email">
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="exampleInputPassword3">Password</label>
                        <input type="password" class="form-control form-control-sm mr-1" id="exampleInputPassword3" placeholder="Password">
                    </div>
                    <div class="form-check">
                        <label class="form-check-label">
                            <input class="form-check-input" type="checkbox"> Remember me
                        </label>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary btn-sm">Sign in</button>
            </div>
        </div>
        </div>
    </div>

    <header class="jumbotron">

        <!-- Main component for a primary marketing message or call to action -->

        <div class="container">
            <div class="row row-header">
                <div class="col-12 col-sm-12">
                    <h1>Ristorante con Fusion</h1>
                    <p style="padding:40px;"></p>
                    <p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our
                        lipsmacking creations will tickle your culinary senses!</p>
                </div>
                <div class="col col-sm align-self-center">
                    <p style="padding:20px;"></p>
                    <img src="img/logo.png" class="img-fluid">
                </div>
                <div class="col-12 col-sm align-self-center">
                    <p style="padding:40px;"></p>
                    <a type="button" class="btn btn-warning btn-sm btn-block"
                     data-placement="bottom" data-toggle="modal" data-target="#exampleModal">Reserve table</a>
                </div>
                <!--Example Modal Button-->
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                  Launch demo modal
                </button>
                <!-- Modal -->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        ...
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                      </div>
                    </div>
                  </div>
                </div>
            </div>
        </div>
    </header>

<div class="container">
    <div class="row row-content">
        <div class="col">
            <div id="mycarousel" class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner" role="listbox">
                        <div class="carousel-item active">
                            <img class="d-block img-fluid"
                                src="img/uthappizza.png" alt="Uthappizza">
                            <div class="carousel-caption d-none d-md-block">
                                <h2>Uthappizza <span class="badge badge-danger">HOT</span> <span class="badge badge-pill badge-default">$4.99</span></h2>
                        <p class="hidden-xs-down">A unique combination of Indian Uthappam (pancake) and
                          Italian pizza, topped with Cerignola olives, ripe vine
                          cherry tomatoes, Vidalia onion, Guntur chillies and
                          Buffalo Paneer.</p>
                            </div>
                        </div>

                        <div class="carousel-item">
                            <img class="media-object img-thumbnail" src="img/buffet.png" alt="Buffet">
                            <div class="carousel-caption d-none d-md-block">
                                <h2>Weekend Grand Buffet</h2>
                                <p>Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six
                                    main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per
                                    person </p>
                                <p><a class="btn btn-primary btn-xs"href="#">More &raquo;</a></p>
                            </div>
                        </div>

                        <div class="carousel-item">
                            <img class="d-flex mr-3 img-thumbnail align-self-center" src="img/alberto.png" alt="Alberto Somayya">
                            <div class="carousel-caption d-none d-md-block">
                                <h2 class="mt-0">Alberto Somayya</h2>
                                <p class="hidden-xs-down">Award winning three-star Michelin chef with wide
                                 International experience having worked closely with
                                 whos-who in the culinary world, he specializes in
                                  creating mouthwatering Indo-Italian fusion experiences.
                                 </p>
                            </div>
                        </div>
                    </div>
                    <ol class="carousel-indicators">
                        <li data-target="#mycarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#mycarousel" data-slide-to="1"></li>
                        <li data-target="#mycarousel" data-slide-to="2"></li>
                    </ol>
                    <a class="carousel-control-prev" href="#mycarousel" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                    </a>
                    <a class="carousel-control-next" href="#mycarousel" role="button" data-slide="next">
                        <span class="carousel-control-next-icon"></span>
                    </a>
            </div>
        </div>
    </div>
    <div class="row row-content">
        <div class="col-sm-4 col-md-3 flex-last">
            <p style="padding:20px;"></p>
            <h3 align=center>Our Lipsmacking Culinary Creations</h3>
        </div>
        <div class="col-sm col-md flex-first">
                <div class="media">
                    <img class="d-flex mr-3 img-thumbnail align-self-center"
                         src="img/uthappizza.png" alt="Uthappizza">
                    <div class="media-body">
                        <h2 class="mt-0">Uthappizza  <span class="badge badge-danger">HOT</span> <span class="badge badge-pill badge-default">$4.99</span></h2>
                        <p class="hidden-xs-down">A unique combination of Indian Uthappam (pancake) and
                          Italian pizza, topped with Cerignola olives, ripe vine
                          cherry tomatoes, Vidalia onion, Guntur chillies and
                          Buffalo Paneer.</p>
                    </div>
                </div>
        </div>
    </div>


    <div class="row row-content">
    <div class="row row-content">
        <div class="col">

        </div>
    </div>
        <div class="col-xs-12 col-sm-9">
            <div class="media">
                <div class = "media-body">
                    <h2>Weekend Grand Buffet</h2>
                    <p>Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six
                        main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per
                        person </p>
                    <p><a class="btn btn-primary btn-xs"href="#">More &raquo;</a></p>
                </div>
                    <div class="media-right media-middle">
                        <a href="#">
                            <img class="media-object img-thumbnail" src="img/buffet.png" alt="Buffet">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row row-content align-items center">
        <div class="col-sm-4 col-md-3 flex-last">
            <p style="padding:20px;"></p>
            <h3 align=center>Meet our Culinary Specialists</h3>
        </div>
        <div class="col-sm col-md flex-first">
                <div class="media">
                    <img class="d-flex mr-3 img-thumbnail align-self-center" src="img/alberto.png" alt="Alberto Somayya">
                    <div class="media-body">
                        <h2 class="mt-0">Alberto Somayya</h2>
                        <h4>Executive Chef</h4>
                        <p class="hidden-xs-down">Award winning three-star Michelin chef with wide
                         International experience having worked closely with
                         whos-who in the culinary world, he specializes in
                          creating mouthwatering Indo-Italian fusion experiences.
                         </p>
                    </div>
                </div>
        </div>
    </div>

    <div class="row row-content" id="form">
        <div class="col-xs-12 col-sm-3">
            <p style="padding:20px;"></p>
            <h3 align="center">Reserve a Table</h3>
        </div>
        <div class="col-xs-12 col-sm-9">
            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <label class="col-sm-2 control-label">Number of Guests</label>
                    <div class="radio col-sm-10">
                        <label class="radio-inline"><input name="guests" type="radio" value=""> 1 </label>
                        <label class="radio-inline"><input name="guests" type="radio" value=""> 2 </label>
                        <label class="radio-inline"><input name="guests" type="radio" value=""> 3 </label>
                        <label class="radio-inline"><input name="guests" type="radio" value=""> 4 </label>
                        <label class="radio-inline"><input name="guests" type="radio" value=""> 5 </label>
                        <label class="radio-inline"><input name="guests" type="radio" value=""> 6 </label>
                    </div>
                </div>
                <div class="form-group">
                    <label for="date" class="col-sm-2 control-label">Date and Time</label>
                    <div class="col-sm-3 has-feedback">
                        <input type="text" class="form-control" id="date" placeholder="Date">
                        <i class="glyphicon glyphicon-calendar form-control-feedback"></i>
                    </div>
                    <div class="col-sm-3 col-sm-push-1 has-feedback">
                        <input type="text" class="form-control" id="time" placeholder="Time">
                        <i class="glyphicon glyphicon-time form-control-feedback"></i>
                    </div>
                </div>
                <div class="form-group col-sm-10 col-sm-push-2">
                    <a class="btn btn-primary" type="submit" href="#">Reserve</a>
                </div>
                <div class="col-sm-12 alert alert-warning alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <p><strong>Warning:</strong> Please <a href="tel:85212345678" class="alert-link">call</a> us to reserve for more than six guests</p>
                </div>
            </form>
        </div>
    </div>
</div>


    <div class="row row-content" id="form">
        <div class="col-xs-12 col-sm-3">
            <p style="padding:20px;"></p>
            <h3 align="center">Key Figures</h3>
        </div>
        <div class="col-xs-12 col-sm-9">
            <div class="table-responsive">
                <table class="table">
                <thead class="bg-warning">

                </tbody>
                </table>
                </div>
            </div>
        </div>
    </div>


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!-- # script src="js/bootstrap.min.js"></script>

    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/tether/dist/js/tether.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

    <script>
        $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip();
         });
    </script>
    <script>
        $('#myModal').on('shown.bs.modal', function () {
          $('#myInput').focus()
        })
    </script>

</body>

</html>
1
  • que error te da? el 21 nov. 2017 a las 18:19

2 respuestas 2

2

Revise bien tu código y lo probé copiando el CDN de la pagina de bootstrap, quitando le tus rutas lo cual puede que estés llamando mal las librerías, ademas el button que llama al modal debes dirigir el data-target al id del contenedor modal, en este caso #myModal.

        $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip();
         });

        $('#myModal').on('shown.bs.modal', function () {
          $('#myInput').focus()
        })
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<nav class="navbar navbar-inverse navbar-toggleable-sm fixed-top" role = "navigation">
        <div class="container">
            <a class="navbar-brand" href="#"><img src="img/logo.png" height="30" width="41"></a>
            <div class="collapse navbar-collapse" id="Navbar">
                <ul class="navbar-nav nav">
                    <li class="nav-item active"><a class="nav-link" href="#"><span class="fa fa-home fa-lg"></span> Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="./aboutus.html"><span class="fa fa-info fa-lg"></span> About</a></li>
                    <li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-list fa-lg"></span> Menu</a></li>
                    <li class="nav-item"><a class="nav-link" href="./contactus.html"><span class="fa fa-address-card fa-lg"></span> Contact</a></li>
                </ul>
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item"><a class="nav-link" data-toggle="modal" data-target="#loginModal"><span class="fa fa-sign-in"></span> Login</a></li>
                </ul>
            </div>            
        </div>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
            <span class="navbar-toggler-icon"></span>
        </button>
    </nav>

     <div id="loginModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg" role="content">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Login </h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <form class="form-inline">
                    <div class="form-group">
                        <label class="sr-only" for="exampleInputEmail3">Email address</label>
                        <input type="email" class="form-control form-control-sm mr-1" id="exampleInputEmail3" placeholder="Enter email">
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="exampleInputPassword3">Password</label>
                        <input type="password" class="form-control form-control-sm mr-1" id="exampleInputPassword3" placeholder="Password">
                    </div>
                    <div class="form-check">
                        <label class="form-check-label">
                            <input class="form-check-input" type="checkbox"> Remember me
                        </label>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary btn-sm">Sign in</button>
            </div>
        </div>
        </div>
    </div>

    <header class="jumbotron">

        <!-- Main component for a primary marketing message or call to action -->

        <div class="container">
            <div class="row row-header">
                <div class="col-12 col-sm-12">
                    <h1>Ristorante con Fusion</h1>
                    <p style="padding:40px;"></p>
                    <p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our
                        lipsmacking creations will tickle your culinary senses!</p>
                </div>
                <div class="col col-sm align-self-center">
                    <p style="padding:20px;"></p>
                    <img src="img/logo.png" class="img-fluid">
                </div>
                <div class="col-12 col-sm align-self-center">
                    <p style="padding:40px;"></p>
                    <a type="button" class="btn btn-warning btn-sm btn-block"
                     data-placement="bottom" data-toggle="modal" data-target="#exampleModal">Reserve table</a>
                </div>
                <!--Example Modal Button-->
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                  Launch demo modal
                </button>
                <!-- Modal -->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        ...
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                      </div>
                    </div>
                  </div>
                </div>
            </div>
        </div>
    </header>

<div class="container">
    <div class="row row-content">
        <div class="col">
            <div id="mycarousel" class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner" role="listbox">
                        <div class="carousel-item active">
                            <img class="d-block img-fluid"
                                src="img/uthappizza.png" alt="Uthappizza">
                            <div class="carousel-caption d-none d-md-block">
                                <h2>Uthappizza <span class="badge badge-danger">HOT</span> <span class="badge badge-pill badge-default">$4.99</span></h2>
                        <p class="hidden-xs-down">A unique combination of Indian Uthappam (pancake) and
                          Italian pizza, topped with Cerignola olives, ripe vine
                          cherry tomatoes, Vidalia onion, Guntur chillies and
                          Buffalo Paneer.</p>
                            </div>
                        </div>

                        <div class="carousel-item">
                            <img class="media-object img-thumbnail" src="img/buffet.png" alt="Buffet">
                            <div class="carousel-caption d-none d-md-block">
                                <h2>Weekend Grand Buffet</h2>
                                <p>Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six
                                    main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per
                                    person </p>
                                <p><a class="btn btn-primary btn-xs"href="#">More &raquo;</a></p>
                            </div>
                        </div>

                        <div class="carousel-item">
                            <img class="d-flex mr-3 img-thumbnail align-self-center" src="img/alberto.png" alt="Alberto Somayya">
                            <div class="carousel-caption d-none d-md-block">
                                <h2 class="mt-0">Alberto Somayya</h2>
                                <p class="hidden-xs-down">Award winning three-star Michelin chef with wide
                                 International experience having worked closely with
                                 whos-who in the culinary world, he specializes in
                                  creating mouthwatering Indo-Italian fusion experiences.
                                 </p>
                            </div>
                        </div>
                    </div>
                    <ol class="carousel-indicators">
                        <li data-target="#mycarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#mycarousel" data-slide-to="1"></li>
                        <li data-target="#mycarousel" data-slide-to="2"></li>
                    </ol>
                    <a class="carousel-control-prev" href="#mycarousel" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                    </a>
                    <a class="carousel-control-next" href="#mycarousel" role="button" data-slide="next">
                        <span class="carousel-control-next-icon"></span>
                    </a>
            </div>
        </div>
    </div>
    <div class="row row-content">
        <div class="col-sm-4 col-md-3 flex-last">
            <p style="padding:20px;"></p>
            <h3 align=center>Our Lipsmacking Culinary Creations</h3>
        </div>
        <div class="col-sm col-md flex-first">
                <div class="media">
                    <img class="d-flex mr-3 img-thumbnail align-self-center"
                         src="img/uthappizza.png" alt="Uthappizza">
                    <div class="media-body">
                        <h2 class="mt-0">Uthappizza  <span class="badge badge-danger">HOT</span> <span class="badge badge-pill badge-default">$4.99</span></h2>
                        <p class="hidden-xs-down">A unique combination of Indian Uthappam (pancake) and
                          Italian pizza, topped with Cerignola olives, ripe vine
                          cherry tomatoes, Vidalia onion, Guntur chillies and
                          Buffalo Paneer.</p>
                    </div>
                </div>
        </div>
    </div>


    <div class="row row-content">
    <div class="row row-content">
        <div class="col">

        </div>
    </div>
        <div class="col-xs-12 col-sm-9">
            <div class="media">
                <div class = "media-body">
                    <h2>Weekend Grand Buffet</h2>
                    <p>Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six
                        main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per
                        person </p>
                    <p><a class="btn btn-primary btn-xs"href="#">More &raquo;</a></p>
                </div>
                    <div class="media-right media-middle">
                        <a href="#">
                            <img class="media-object img-thumbnail" src="img/buffet.png" alt="Buffet">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row row-content align-items center">
        <div class="col-sm-4 col-md-3 flex-last">
            <p style="padding:20px;"></p>
            <h3 align=center>Meet our Culinary Specialists</h3>
        </div>
        <div class="col-sm col-md flex-first">
                <div class="media">
                    <img class="d-flex mr-3 img-thumbnail align-self-center" src="img/alberto.png" alt="Alberto Somayya">
                    <div class="media-body">
                        <h2 class="mt-0">Alberto Somayya</h2>
                        <h4>Executive Chef</h4>
                        <p class="hidden-xs-down">Award winning three-star Michelin chef with wide
                         International experience having worked closely with
                         whos-who in the culinary world, he specializes in
                          creating mouthwatering Indo-Italian fusion experiences.
                         </p>
                    </div>
                </div>
        </div>
    </div>

    <div class="row row-content" id="form">
        <div class="col-xs-12 col-sm-3">
            <p style="padding:20px;"></p>
            <h3 align="center">Reserve a Table</h3>
        </div>
        <div class="col-xs-12 col-sm-9">
            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <label class="col-sm-2 control-label">Number of Guests</label>
                    <div class="radio col-sm-10">
                        <label class="radio-inline"><input name="guests" type="radio" value=""> 1 </label>
                        <label class="radio-inline"><input name="guests" type="radio" value=""> 2 </label>
                        <label class="radio-inline"><input name="guests" type="radio" value=""> 3 </label>
                        <label class="radio-inline"><input name="guests" type="radio" value=""> 4 </label>
                        <label class="radio-inline"><input name="guests" type="radio" value=""> 5 </label>
                        <label class="radio-inline"><input name="guests" type="radio" value=""> 6 </label>
                    </div>
                </div>
                <div class="form-group">
                    <label for="date" class="col-sm-2 control-label">Date and Time</label>
                    <div class="col-sm-3 has-feedback">
                        <input type="text" class="form-control" id="date" placeholder="Date">
                        <i class="glyphicon glyphicon-calendar form-control-feedback"></i>
                    </div>
                    <div class="col-sm-3 col-sm-push-1 has-feedback">
                        <input type="text" class="form-control" id="time" placeholder="Time">
                        <i class="glyphicon glyphicon-time form-control-feedback"></i>
                    </div>
                </div>
                <div class="form-group col-sm-10 col-sm-push-2">
                    <a class="btn btn-primary" type="submit" href="#">Reserve</a>
                </div>
                <div class="col-sm-12 alert alert-warning alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <p><strong>Warning:</strong> Please <a href="tel:85212345678" class="alert-link">call</a> us to reserve for more than six guests</p>
                </div>
            </form>
        </div>
    </div>
</div>


    <div class="row row-content" id="form">
        <div class="col-xs-12 col-sm-3">
            <p style="padding:20px;"></p>
            <h3 align="center">Key Figures</h3>
        </div>
        <div class="col-xs-12 col-sm-9">
            <div class="table-responsive">
                <table class="table">
                <thead class="bg-warning">

                </tbody>
                </table>
                </div>
            </div>
        </div>
    </div>
    

0

No lo muestra por contiene la etiqueta fade,

puedes también cambiar el valor por medio de Jquery

<script>
    $(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
     });
</script>
<script>
    $('#myModal').modal.("show") //para que se renderize
    $('#myModal').on('shown.bs.modal', function () {
      $('#myInput').focus()
    })

</script>
1
  • Por desgracia, cambié el último script y ya no funciona el 26 nov. 2017 a las 18:21

Tu Respuesta

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

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