Yukiugk

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); Bootstrap 4 Utilities ❮ Previous Next ❯ Bootstrap 4 Utilities Bootstrap 4 has alot of utility/helper classes to quickly style elements without using any CSS code. Borders Use the border classes to add or remove borders from an element: Example Example <span class="border"></span> <span class="border border-0"></span> <span class="border border-top-0"></span> <span class="border border-right-0"></span> <span class="border border-bottom-0"></span> <span class="border border-left-0"></span> Try it Yourself » Border Color Add a color to the border with any of the contextual border color classes: Example Example <span class="border border-primary"></span> <span...

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> Bootstrap 4 Scrollspy (Advanced) ❮ Previous Next ❯ Bootstrap 4 Scrollspy Scrollspy is used to automatically update links in a navigation list based on scroll position. How To Create a Scrollspy The following example shows how to create a scrollspy: Example <!-- The scrollable area --> <body data-spy="scroll" data-target=".navbar" data-offset="50"> <!-- The navbar - The <a> elements are used to jump to a section in the scrollable area --> <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> ...   <ul class="navbar-nav">     <li><a href="#section1">Section 1</a></li>     ... </nav> <!-- Section 1 --> <div id="section1">   <h1>Section 1</h1>   <p>Try to scroll this page and look at the navigati...

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); Bootstrap 4 Popover ❮ Previous Next ❯ Bootstrap 4 Popover The Popover component is similar to tooltips; it is a pop-up box that appears when the user clicks on an element. The difference is that the popover can contain much more content. Toggle popover Toggle popover $(document).ready(function(){ $('[data-toggle="popover"]').popover(); }); How To Create a Popover To create a popover, add the data-toggle="popover" attribute to an element. Use the title attribute to specify the header text of the popover, and use the data-content attribute to specify the text that should be displayed inside the popover's body: <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a> Note: Popovers mus...

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> Bootstrap 4 Tooltip ❮ Previous Next ❯ Bootstrap 4 Tooltip The Tooltip component is small pop-up box that appears when the user moves the mouse pointer over an element: Hover over me Hover over me $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); How To Create a Tooltip To create a tooltip, add the data-toggle="tooltip" attribute to an element. Use the title attribute to specify the text that should be displayed inside the tooltip: <a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a> Note: Tooltips must be initialized with jQuery: select the specified element and call the tooltip() method. The following code will enable all tooltips in the document: Example <script> $(document).ready(function(){     $('[data-toggle="tooltip"]')...

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); Bootstrap 4 Modal ❮ Previous Next ❯ Bootstrap 4 Modal The Modal component is a dialog box/popup window that is displayed on top of the current page: Open modal Modal Heading × Modal body.. Close How To Create a Modal The following example shows how to create a basic modal: Example <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">   Open modal </button> <!-- The Modal --> <div class="modal" id="myModal">   <div class="modal-dialog">     <div class="modal-content">       <!-- Modal Header -->       <div class="modal-header"...

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> Bootstrap 4 Carousel ❮ Previous Next ❯ Bootstrap 4 Carousel The Carousel is a slideshow for cycling through elements. How To Create a Carousel The following example shows how to create a basic carousel with indicators and controls: Example <div id="demo" class="carousel slide" data-ride="carousel">   <!-- Indicators -->   <ul class="carousel-indicators">     <li data-target="#demo" data-slide-to="0" class="active"></li>     <li data-target="#demo" data-slide-to="1"></li>     <li data-target="#demo" data-slide-to="2"></li>   </ul>   <!-- The slideshow -->   <div class="carousel-inner">     <div class="car...

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> Bootstrap 4 Custom Forms ❮ Previous Next ❯ Bootstrap 4 Custom Forms Bootstrap 4 comes with customized form elements, that are meant to replace browser defaults: Custom checkbox Default checkbox Custom radio Default radio Custom Range: Default Range: Custom select menu One Two Three Default select menu One Two Three Custom file upload Custom Checkbox To create a custom checkbox, wrap a container element, like <div>, with a class of .custom-control and .custom-checkbox around the checkbox. Then add the .custom-control-input to the input with type="checkbox". Tip: If you use labels for accompanying text, add the .custom-control-label class to it. Note that the value of the for attribute should match the id of the checkbox: Custom checkbox Default checkbox Example <form>   <div class="custom-control custom-checkbox">   ...

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> Bootstrap 4 Inputs Group ❮ Previous Next ❯ Bootstrap 4 Input Groups The .input-group class is a container to enhance an input by adding an icon, text or a button in front or behind the input field as a "help text". Use .input-group-prepend to add the help text in front of the input, and .input-group-append to add it behind the input. At last, add the .input-group-text class to style the specified help text. @ @example.com Example <form>   <div class="input-group mb-3">     <div class="input-group-prepend">       <span class="input-group-text">@</span>     </div>     <input type="text" class="form-control" placeholder="Username">   </div>   <div class="input-group mb-3">     <input type="text" cl...

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); Bootstrap 4 Form Inputs ❮ Previous Next ❯ Supported Form Controls Bootstrap supports the following form controls: input textarea checkbox radio select Bootstrap Input Bootstrap supports all the HTML5 input types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color. Note: Inputs will NOT be fully styled if their type is not properly declared! Name: Password: The following example contains two input elements; one of type="text" and one of type="password" . As we mentioned in the Forms chapter, we use the .form-control class to style inputs with full-width and proper padding, etc: Example <div class="form-group">   <label for="usr">Name:</label>   <input type="text" class...

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> Bootstrap 4 Forms ❮ Previous Next ❯ Bootstrap 4's Default Settings Form controls automatically receive some global styling with Bootstrap: All textual <input> , <textarea> , and <select> elements with class .form-control have a width of 100%. Bootstrap 4 Form Layouts Bootstrap provides two types of form layouts: Stacked (full-width) form Inline form Bootstrap 4 Stacked Form Email: Password: Remember me Submit The following example creates a stacked form with two input fields, one checkbox, and a submit button. Add a wrapper element with .form-group , around each form control, to ensure proper margins: Example <form action="/action_page.php">   <div class="form-group">     <label for="email">Email address:</label>     <input type="ema...