Скачал готовый шаблон на 3 версии, можно ли на конкретной странице этого шаблона использовать компонент из 4 версии (конкретно меня интересуют карточки с разными цветами)? Если копирую CDN 4 версии в хедер этой страницы, то навбар съезжает
Ничего не понял, если честно. Вот у меня главная страница шаблона: HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Welcome!</title> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <meta content="" name="keywords"> <meta content="" name="description"> <!-- Favicons --> <link href="img/favicon.png" rel="icon"> <link href="img/apple-touch-icon.png" rel="apple-touch-icon"> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900|Raleway:400,300,700,900" rel="stylesheet"> <!-- Bootstrap CSS File --> <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- Libraries CSS Files --> <link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet"> <!-- Main Stylesheet File --> <link rel="stylesheet" href="{{ asset('css/style.css') }}"> <!-- ======================================================= Template Name: Spot Template URL: https://templatemag.com/spot-bootstrap-freelance-template/ Author: TemplateMag.com License: https://templatemag.com/license/ ======================================================= --> </head> <body> <!-- Fixed navbar --> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/">You decide!</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="/">HOME</a></li> <li><a href="{{ route('about') }}">ABOUT</a></li> <li><a href="{{ route('tickets') }}">VOTING</a></li> <li><a href="{{ route('howItWorks') }}">HOW IT WORKS</a></li> <li><a data-toggle="modal" data-target="#myModal" href="#myModal"><i class="fa fa-envelope-o"></i></a></li> </ul> </div> <!--/.nav-collapse --> </div> </div> <div id="headerwrap"> <div class="container"> <div class="row centered"> <div class="col-lg-8 offset-lg-2"> <h1>Just imagine that <b>you will decide</b> what your place of residence will be</h1> <h2>It`s nice</h2> </div> </div> <!-- row --> </div> <!-- container --> </div> <!-- headerwrap --> <div class="container w"> <div class="row centered"> <br><br> <div class="col-lg-4"> <i class="fa fa-lightbulb-o"></i> <h4>I have an idea!</h4> <p>This is much easier than you can imagine. Just generate your idea of what you want to do with your neighborhood or home and your neighbors will hear you.</p> </div> <!-- col-lg-4 --> <div class="col-lg-4"> <i class="fa fa-laptop"></i> <h4>Easy to use</h4> <p>It is very comfortable! If someone has already generated an idea, you just need to tell your opinion about it. You can be part of this decision.</p> </div> <!-- col-lg-4 --> <div class="col-lg-4"> <i class="fa fa-thumbs-up"></i> <h4>Good job</h4> <p>Rejoice! You and your neighbors managed to make your home better: more comfortable for living, more modern and more beautiful for other people. Together you can do it.</p> </div> <!-- col-lg-4 --> </div> <!-- row --> <br> <br> </div> <!-- FOOTER --> <div id="f"> <div class="container"> <div class="row centered"> <a href="#"><i class="fa fa-twitter"></i></a><a href="#"><i class="fa fa-facebook"></i></a><a href="#"><i class="fa fa-dribbble"></i></a> </div> <!-- row --> </div> <!-- container --> </div> <!-- Footer --> <!-- MODAL FOR CONTACT --> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">contact us</h4> </div> <div class="modal-body"> <div class="row centered"> <p>We are available 24/7, so don't hesitate to contact us.</p> <p> Somestreet Ave, 987<br/> London, UK.<br/> +44 8948-4343<br/> contact@example.com </p> <form class="contact-form php-mail-form" role="form" action="contactform/contactform.php" method="POST"> <div class="form-group"> <label for="contact-name">Your Name</label> <input type="name" name="name" class="form-control" id="contact-name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" > <div class="validate"></div> </div> <div class="form-group"> <label for="contact-email">Your Email</label> <input type="email" name="email" class="form-control" id="contact-email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email"> <div class="validate"></div> </div> <div class="form-group"> <label for="contact-subject">Subject</label> <input type="text" name="subject" class="form-control" id="contact-subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject"> <div class="validate"></div> </div> <div class="form-group"> <label for="contact-message">Your Message</label> <textarea class="form-control" name="message" id="contact-message" placeholder="Your Message" rows="5" data-rule="required" data-msg="Please write something for us"></textarea> <div class="validate"></div> </div> <div class="loading"></div> <div class="error-message"></div> <div class="sent-message">Your message has been sent. Thank you!</div> <div class="form-send"> <button type="submit" class="btn btn-large">Send Message</button> </div> </form> </div> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal --> <div id="copyrights"> <div class="container"> <p> © Copyrights <strong>Spot</strong>. All Rights Reserved </p> <div class="credits"> <!-- You are NOT allowed to delete the credit link to TemplateMag with free version. You can delete the credit link only if you bought the pro version. Buy the pro version with working PHP/AJAX contact form: https://templatemag.com/spot-bootstrap-freelance-template/ Licensing information: https://templatemag.com/license/ --> Created with Spot template by <a href="https://templatemag.com/">TemplateMag</a> </div> </div> </div> <!-- JavaScript Libraries --> <script src="lib/jquery/jquery.min.js"></script> <script src="lib/bootstrap/js/bootstrap.min.js"></script> <script src="lib/php-mail-form/validate.js"></script> <script src="lib/chart/chart.js"></script> <!-- Template Main Javascript File --> <script src="js/main.js"></script> </body> </html> Я нашел в гугле конвертер с 3 на 4 версию, скопировал код, получил новый, вставил в свою страницу вместо старого. Попробовал сделать карточки: HTML: <div class="card text-white bg-info mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body"> <h5 class="card-title">Info card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> В итоге вместо этого (вложение 1) имеем это (вложение 2)