API tools faq
paste
Advertisement
Guest User

BootstrapDemo

a guest
Oct 22nd, 2019
87
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 14.00 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html lang="en">
  3.   <head>
  4.     <!-- Required meta tags -->
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.     <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
  8.     <!-- Bootstrap CSS -->
  9.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  10. <link rel="stylesheet" href="style.css">
  11.  
  12.     <title>Bootstrap Demo</title>
  13.   </head>
  14.   <body>
  15.  
  16.     <div class="container-fluid">
  17.  
  18.         <div class="row">
  19.  
  20.             <div class="col-12">
  21.                 <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  22.                     <a class="navbar-brand" href="#">
  23.                         <img src="images/1548726.svg" width="30" height="30" alt="">
  24.                       </a>
  25.                     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  26.                       <span class="navbar-toggler-icon"></span>
  27.                     </button>
  28.                  
  29.                     <div class="collapse navbar-collapse" id="navbarSupportedContent">
  30.                       <ul class="navbar-nav mr-auto">
  31.                         <li class="nav-item active">
  32.                           <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
  33.                         </li>
  34.                         <li class="nav-item">
  35.                           <a class="nav-link" href="sewcondpage.html">Link</a>
  36.                         </li>
  37.                         <li class="nav-item">
  38.                             <a class="nav-link" href="#">Link</a>
  39.                           </li>
  40.                        
  41.                       </ul>
  42.                     </div>
  43.                   </nav>
  44.  
  45.             </div>
  46.         </div>
  47.  
  48.         <div class="row">
  49.  
  50.             <div class="col-6  offset-md-3">
  51.  
  52.                 <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  53.                     <ol class="carousel-indicators">
  54.                       <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
  55.                       <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
  56.                       <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  57.                     </ol>
  58.                     <div class="carousel-inner">
  59.                       <div class="carousel-item active">
  60.                         <img src="images/htmlbg.jpg" class="d-block w-100" alt="...">
  61.                       </div>
  62.                       <div class="carousel-item">
  63.                         <img src="images/htmlbg1.jpg" class="d-block w-100" alt="...">
  64.                       </div>
  65.                       <div class="carousel-item">
  66.                         <img src="images/htmlbg2.jpg" class="d-block w-100" alt="...">
  67.                       </div>
  68.                     </div>
  69.                     <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
  70.                       <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  71.                       <span class="sr-only">Previous</span>
  72.                     </a>
  73.                     <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
  74.                       <span class="carousel-control-next-icon" aria-hidden="true"></span>
  75.                       <span class="sr-only">Next</span>
  76.                     </a>
  77.                   </div>
  78.             </div>
  79.  
  80.         </div>
  81.  
  82.         <div class="row mt-3">
  83.  
  84.                 <div class="col-12">
  85.                         <div class="card-deck">
  86.                                 <div class="card">
  87.                                   <img src="images/html.svg" class="card-img-top" alt="...">
  88.                                   <div class="card-body">
  89.                                     <h5 class="card-title">Card title</h5>
  90.                                     <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
  91.                                     <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  92.                                   </div>
  93.                                 </div>
  94.                                 <div class="card">
  95.                                   <img src="images/css.svg" class="card-img-top" alt="...">
  96.                                   <div class="card-body">
  97.                                     <h5 class="card-title">Card title</h5>
  98.                                     <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
  99.                                     <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  100.                                   </div>
  101.                                 </div>
  102.                                 <div class="card">
  103.                                   <img src="images/js.svg" class="card-img-top" alt="...">
  104.                                   <div class="card-body">
  105.                                     <h5 class="card-title">Card title</h5>
  106.                                     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
  107.                                     <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  108.                                   </div>
  109.                                 </div>
  110.                               </div>
  111.                 </div>
  112.  
  113.         </div>
  114.  
  115.  
  116.         <div class="row mt-3">
  117. <div class="col-4">
  118.     <img src="images/htmlbg1.jpg" class="img-fluid" alt="">
  119. </div>
  120. <div class="col-8">
  121.  
  122. <h1>text</h1>
  123. <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempora vero blanditiis eligendi doloribus esse impedit accusamus deserunt, placeat similique voluptates quo reprehenderit eius culpa? Rerum totam nostrum repudiandae reiciendis exercitationem!</p>
  124.  
  125. </div>
  126.         </div>
  127.         <div class="row mt-3">
  128.             <div class="col-12">
  129.                     <div class="jumbotron">
  130.                             <h1 class="display-4">Hello, world!</h1>
  131.                             <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  132.                             <hr class="my-4">
  133.                             <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  134.                             <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
  135.                           </div>
  136.             </div>
  137.         </div>
  138.         <div class="row">
  139.             <div class="col-12">
  140.                     <div class="accordion" id="accordionExample">
  141.                             <div class="card">
  142.                               <div class="card-header" id="headingOne">
  143.                                 <h2 class="mb-0">
  144.                                   <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
  145.                                     Collapsible Group Item #1
  146.                                   </button>
  147.                                 </h2>
  148.                               </div>
  149.                          
  150.                               <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
  151.                                 <div class="card-body">
  152.                                   Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
  153.                                 </div>
  154.                               </div>
  155.                             </div>
  156.                             <div class="card">
  157.                               <div class="card-header" id="headingTwo">
  158.                                 <h2 class="mb-0">
  159.                                   <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
  160.                                     Collapsible Group Item #2
  161.                                   </button>
  162.                                 </h2>
  163.                               </div>
  164.                               <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
  165.                                 <div class="card-body">
  166.                                   Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
  167.                                 </div>
  168.                               </div>
  169.                             </div>
  170.                             <div class="card">
  171.                               <div class="card-header" id="headingThree">
  172.                                 <h2 class="mb-0">
  173.                                   <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
  174.                                     Collapsible Group Item #3
  175.                                   </button>
  176.                                 </h2>
  177.                               </div>
  178.                               <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
  179.                                 <div class="card-body">
  180.                                   Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
  181.                                 </div>
  182.                               </div>
  183.                             </div>
  184.                           </div>
  185.             </div>
  186.         </div>
  187.         <div class="row">
  188.                 <div class="col-4">
  189.                   <div class="list-group" id="list-tab" role="tablist">
  190.                     <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
  191.                     <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
  192.                     <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
  193.                     <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
  194.                   </div>
  195.                 </div>
  196.                 <div class="col-8">
  197.                   <div class="tab-content" id="nav-tabContent">
  198.                     <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">T1</div>
  199.                     <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">T2</div>
  200.                     <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">T3</div>
  201.                     <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">T4</div>
  202.                   </div>
  203.                 </div>
  204.               </div>
  205.     </div>
  206.  
  207.  
  208.  
  209.     <!-- Optional JavaScript -->
  210.     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  211.     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  212.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  213.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  214.   </body>
  215. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!