<div class="lrm-user-modal-container">
<!-- this is the container wrapper -->
<div class="lrm-user-modal-container-inner">
<!-- this is the container wrapper -->
<ul class="lrm-switcher -is-not-login-only">
<li><a href="#0" class="lrm-switch-to-link lrm-switch-to--login lrm-ficon-login selected">
Sign in </a></li>
<li><a href="#0" class="lrm-switch-to-link lrm-switch-to--register lrm-ficon-register">
New account </a></li>
</ul>
<div class="lrm-signin-section is-selected">
<!-- log in form -->
<form class="lrm-form" action="#0" data-action="login">
<div class="lrm-fieldset-wrap">
<div class="lrm-integrations lrm-integrations--login">
</div>
<p class="lrm-form-message lrm-form-message--init"></p>
<div class="fieldset">
<label class="image-replace lrm-email lrm-ficon-mail" title="Email or Username"></label>
<input name="username" class="full-width has-padding has-border" type="text" aria-label="Email or Username" placeholder="Email or Username" required="" value="" autocomplete="username" data-autofocus="1">
<span class="lrm-error-message"></span>
</div>
<div class="fieldset">
<label class="image-replace lrm-password lrm-ficon-key" title="Password"></label>
<input name="password" class="full-width has-padding has-border" type="password" aria-label="Password" placeholder="Password" required="" value="">
<span class="lrm-error-message"></span>
<span class="hide-password lrm-ficon-eye" data-show="Show" data-hide="Hide" aria-label="Show"></span>
</div>
<div class="fieldset">
<label class="lrm-nice-checkbox__label lrm-remember-me-checkbox">
Remember me <input type="checkbox" class="lrm-nice-checkbox lrm-remember-me" name="remember-me" checked="">
<div class="lrm-nice-checkbox__indicator"></div>
</label>
</div>
<div class="lrm-integrations lrm-integrations--login lrm-integrations-before-btn">
</div>
<div class="lrm-integrations-otp"></div>
</div>
<div class="fieldset fieldset--submit fieldset--default">
<button class="full-width has-padding" type="submit">
Log in
</button>
</div>
<div class="lrm-fieldset-wrap">
<div class="lrm-integrations lrm-integrations--login">
</div>
</div>
<input type="hidden" name="redirect_to" value="">
<input type="hidden" name="lrm_action" value="login">
<input type="hidden" name="wp-submit" value="1">
<!-- Fix for Eduma WP theme-->
<input type="hidden" name="lp-ajax" value="login">
<input type="hidden" id="security-login" name="security-login" value="929c2037f7"><input type="hidden" name="_wp_http_referer" value="/en/">
<!-- For Invisible Recaptcha plugin -->
<span class="wpcf7-submit" style="display: none;"></span>
</form>
<p class="lrm-form-bottom-message"><a href="#0" class="lrm-switch-to--reset-password">Forgot your
password?</a></p>
<!-- <a href="#0" class="lrm-close-form">Close</a> -->
</div>
<!-- lrm-login -->
<div class="lrm-signup-section">
<!-- sign up form -->
<form class="lrm-form" action="#0" data-action="registration" data-lpignore="true">
<div class="lrm-fieldset-wrap lrm-form-message-wrap">
<p class="lrm-form-message lrm-form-message--init"></p>
</div>
<div class="lrm-fieldset-wrap">
<div class="lrm-integrations lrm-integrations--register">
</div>
<div class="fieldset fieldset--username">
<label class="image-replace lrm-username lrm-ficon-user" for="signup-username" title="Username*"></label>
<input name="username" class="full-width has-padding has-border" id="signup-username" type="text" placeholder="Username*" required="" aria-label="Username*" autocomplete="off" data-lpignore="true">
<span class="lrm-error-message"></span>
</div>
<div class="fieldset fieldset--login">
<label class="image-replace lrm-username lrm-ficon-user" for="signup-login" title="Login"></label>
<input name="login" class="full-width has-padding has-border" id="signup-login" type="text" autocomplete="off" data-lpignore="true">
</div>
<div class="clearfix lrm-row">
<div class="lrm-col-half-width lrm-col-first fieldset--first-name lrm-col">
<label class="image-replace lrm-username lrm-ficon-user" for="signup-first-name" title="First name*"></label>
<input name="first-name" class="full-width has-padding has-border" id="signup-first-name" type="text" placeholder="First name*" required="" aria-label="First name*" autocomplete="off" data-lpignore="true">
<span class="lrm-error-message"></span>
</div>
<div class="lrm-col-half-width lrm-col-last fieldset--last-name lrm-col">
<label class="image-replace lrm-username lrm-ficon-user" for="signup-last-name" title="Last name"></label>
<input name="last-name" class="full-width has-padding has-border" id="signup-last-name" type="text" placeholder="Last name" aria-label="Last name" autocomplete="off" data-lpignore="true">
<span class="lrm-error-message"></span>
</div>
</div>
<div class="fieldset fieldset--email">
<label class="image-replace lrm-email lrm-ficon-mail" for="signup-email" title="Email*"></label>
<input name="email" class="full-width has-padding has-border" id="signup-email" type="email" placeholder="Email*" required="" autocomplete="off" aria-label="Email*">
<span class="lrm-error-message"></span>
</div>
<div class="fieldset">
<div class="lrm-position-relative">
<label class="image-replace lrm-password lrm-ficon-key" for="signup-password" title="Password"></label>
<input name="password" class="full-width has-padding has-border" id="signup-password" type="password" placeholder="Password" required="" value="" autocomplete="new-password" aria-label="Password">
<span class="lrm-error-message"></span>
<span class="hide-password lrm-ficon-eye" data-show="Show" data-hide="Hide"></span>
</div>
<span class="lrm-pass-strength-result"></span>
</div>
<div class="fieldset">
<div class="lrm-position-relative">
<label class="image-replace lrm-password lrm-ficon-key" for="signup-password-confirmation"></label>
<input name="password-confirmation" class="full-width has-padding has-border" id="signup-password-confirmation" type="password" placeholder="Password" required="" value="" autocomplete="new-password">
<span class="lrm-error-message"></span>
<span class="hide-password lrm-ficon-eye" data-show="Show" data-hide="Hide"></span>
</div>
</div>
<div class="lrm-integrations lrm-integrations--register">
</div>
<div class="fieldset fieldset--terms">
<label class="lrm-nice-checkbox__label lrm-accept-terms-checkbox">I agree with the <a href="/terms-of-use">Terms Of Use</a>. <input type="checkbox" class="lrm-nice-checkbox lrm-accept-terms" name="registration_terms" value="yes">
<span class="lrm-error-message"></span>
<div class="lrm-nice-checkbox__indicator"></div>
</label>
</div>
<div class="lrm-integrations lrm-integrations--register lrm-info lrm-info--register">
</div>
</div>
<div class="fieldset fieldset--submit fieldset--default">
<button class="full-width has-padding" type="submit">
Create account </button>
</div>
<div class="lrm-fieldset-wrap">
<div class="lrm-integrations lrm-integrations--register">
</div>
</div>
<input type="hidden" name="redirect_to" value="">
<input type="hidden" name="lrm_action" value="signup">
<input type="hidden" name="wp-submit" value="1">
<!-- Fix for Eduma WP theme-->
<input type="hidden" name="is_popup_register" value="1">
<input type="hidden" id="security-signup" name="security-signup" value="3161c831a5"><input type="hidden" name="_wp_http_referer" value="/en/">
<!-- For Invisible Recaptcha plugin -->
<span class="wpcf7-submit" style="display: none;"></span>
</form>
<!-- <a href="#0" class="lrm-close-form">Close</a> -->
</div>
<!-- lrm-signup -->
<div class="lrm-reset-password-section">
<!-- reset password form -->
<form class="lrm-form" action="#0" data-action="lost-password">
<div class="lrm-fieldset-wrap">
<p class="lrm-form-message">Lost your password? Please enter your email address. You will
receive mail with link to set new password.</p>
<div class="fieldset">
<label class="image-replace lrm-email lrm-ficon-mail" title="Email or Username"></label>
<input class="full-width has-padding has-border" name="user_login" type="text" required="" placeholder="Email or Username" data-autofocus="1" aria-label="Email or Username">
<span class="lrm-error-message"></span>
</div>
<div class="lrm-integrations lrm-integrations--reset-pass">
</div>
<input type="hidden" name="lrm_action" value="lostpassword">
<input type="hidden" name="wp-submit" value="1">
<input type="hidden" id="security-lostpassword" name="security-lostpassword" value="9b051ad131"><input type="hidden" name="_wp_http_referer" value="/en/">
</div>
<div class="fieldset fieldset--submit fieldset--default">
<button class="full-width has-padding" type="submit">
Reset password </button>
</div>
<!-- For Invisible Recaptcha plugin -->
<span class="wpcf7-submit" style="display: none;"></span>
</form>
<p class="lrm-form-bottom-message"><a href="#0" class="lrm-switch-to--login">Back to login</a></p>
</div>
<!-- lrm-reset-password -->
</div>
<!-- lrm-user-modal-container -->
<a href="#0" class="lrm-close-form" title="close">
<span class="lrm-ficon-close"></span>
</a>
</div> Write, Run & Share Bootstrap code online using OneCompiler's Bootstrap online editor for free. It's one of the robust, feature-rich online editor for Bootstrap. Getting started with the OneCompiler's Bootstrap online editor is really simple and pretty fast. The editor shows sample boilerplate code when you choose language as 'Bootstrap' and start writing code to learn and test online instantly.
Bootstrap is a free CSS framework for front-end web development. It contains CSS and JavaScript based design templates for styling like typography, forms, buttons, navigation, and other interface components. It helps developers to develop websites faster and also easy to use. You can use built-in classes hence you don't need to develop elements from scratch.
| Text colors | |||
|---|---|---|---|
| .text-muted | .text-primary | .text-success | .text-info |
| .text-warning | .text-danger | .text-secondary | .text-white |
| .text-dark | .text-body | .text-light |
| Background colors | |||
|---|---|---|---|
| .bg-primary | .bg-success | .bg-info | .bg-warning |
| .bg-danger | .bg-secondary | .bg-dark | .bg-light |
| Class | Description |
|---|---|
| .table | basic |
| .table-striped | adds zebra-stripes to a table |
| .table-bordered | adds borders on all sides of the table and cells |
| .table-hover | adds a hover effect with grey background color on table rows |
| .table-primary | adds Blue color to table row indicating an important action |
| .table-dark | adds a black background to the table |
| .table-success | adds Green color to table row indicating successful or positive action |
| .table-danger | adds Red color to table row indicating a negative action |
| .table-info | adds Light blue to table row indicating a neutral informative change or action |
| .table-warning | Orange to table row indicating attention required |
| .table-active | apply the hover color Grey to the table row or table cell |
| .table-secondary | Grey: Indicates a slightly less important action |
| .table-light | Light grey table or table row background |
| .table-dark | Dark grey table or table row background |
| .thead-dark | adds a black background to table headers |
| thead-light | adds a grey background to table header |
<img src="sample.jpg" class="rounded" alt="Sample text" />
| Class | Description |
|---|---|
| .rounded | adds rounded corners to an image |
| .rounded-circle | shapes the image to a circle |
| .img-thumbnail | shapes the image to a thumbnail |
| .float-right/.float-left | floats image to right/left |
| .mx-auto.d-block | Center an image by adding the utility classes .mx-auto (margin:auto) and .d-block (display:block) |
| .img-fluid | Responsive images automatically adjust to fit the screen's size |
The below button classes can be used on <a>, <button> or <input>.
<button type="button" class="btn">Basic Button</button>
<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-secondary">Secondary Button</button>
<button type="button" class="btn btn-success">Success Button</button>
<button type="button" class="btn btn-info">Info Button</button>
<button type="button" class="btn btn-warning">Warning Button</button>
<button type="button" class="btn btn-danger">Danger Button</button>
<button type="button" class="btn btn-dark">Dark Button</button>
<button type="button" class="btn btn-light">Light Button</button>
<button type="button" class="btn btn-link">Link Button</button>
<button type="button" class="btn btn-outline-primary">Primary Outline Button</button>
<button type="button" class="btn btn-outline-secondary">Secondary Outline Button</button>
<button type="button" class="btn btn-outline-success">Success Outline Button</button>
<button type="button" class="btn btn-outline-info">Info Outline Button</button>
<button type="button" class="btn btn-outline-warning">Warning Outline Button</button>
<button type="button" class="btn btn-outline-danger">Danger Outline Button</button>
<button type="button" class="btn btn-outline-dark">Dark Outline Button</button>
<button type="button" class="btn btn-outline-light text-dark">Light Outline Button</button>
<div class="spinner-border text-muted"></div>
<div class="spinner-border text-primary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-info"></div>
<div class="spinner-border text-warning"></div>
<div class="spinner-border text-danger"></div>
<div class="spinner-border text-secondary"></div>
<div class="spinner-border text-dark"></div>
<div class="spinner-border text-light"></div>
<!-- growing spinners-->
<div class="spinner-grow text-muted"></div>
<div class="spinner-grow text-primary"></div>
<div class="spinner-grow text-success"></div>
<div class="spinner-grow text-info"></div>
<div class="spinner-grow text-warning"></div>
<div class="spinner-grow text-danger"></div>
<div class="spinner-grow text-secondary"></div>
<div class="spinner-grow text-dark"></div>
<div class="spinner-grow text-light"></div>
<!--Spinner size-->
<div class="spinner-border spinner-border-sm"></div>
<div class="spinner-grow spinner-grow-sm"></div>
| Class | Description |
|---|---|
| .col- | extra small devices with screen width less than 576px |
| .col-sm- | small devices with screen width equal to or greater than 576px |
| .col-md- | medium devices with screen width equal to or greater than 768px |
| .col-lg- | large devices with screen width equal to or greater than 992px |
| .col-xl- | xlarge devices with screen width equal to or greater than 1200px |
<div class="row">
<div class="col-3">col-3</div>
<div class="col-6">col-6</div>
<div class="col-3">col-3</div>
</div>
Add the data-toggle="tooltip" to create a tooltip to an element.
<a href="#" data-toggle="tooltip" title="Click to see the result">Run</a>