Bootstrap Reboot - Bootstrap Tutorial


Bootstrap Reboot

  • Reboot, a collection of element-specific CSS changes in a single file. Bootstrap to provide an elegant, consistent, and simple baseline to build upon.

Bootstrap Reboot Approach

  • Here are our guidelines and reasons for choosing what to override in Reboot:
    • Update some browser default values to use rems instead of ems for scalable component spacing.
    • Avoid margin-top. Vertical margins can collapse, yielding unexpected results. More importantly though, a single direction of margin is a simpler mental model.
    • For easier scaling across device sizes, block elements should use rems for margins.
    • Keep declarations of font-related properties to a minimum, using inherit whenever possible.

Bootstrap Horizontal Rules

  • The <hr> element has been simplified. Similar to browser defaults, <hr>s are styled via border-top, have a default opacity: .25, and automatically inherit their border-color via color, including when color is set via the parent.
how-to-create-horizontal-rules-with-bootstrap

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <hr>
    <div class="text-success">
      <hr>
    </div>
    <hr class="border border-danger border-2 opacity-50">
    <hr class="border border-primary border-3 opacity-75">
  </body>
</html>

Output

bootstrap-horizontal-rule

Bootstrap Inline code

  • Bootstrap inline code refers to the use of the code element in Bootstrap to display a short piece of code or programming language syntax inline with text.
  • The code element is used to indicate that the enclosed text is code, and is typically styled in a monospace font to distinguish it from the surrounding text.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    For example, <code>&lt;section&gt;</code> should be wrapped as inline.
  </body>
</html>

Output

bootstrap-inline-code

Bootstrap Code blocks

  • <pre>s for multiple lines of code. The <pre> element is reset to remove its margin-top and use rem units for its margin-bottom.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
    &lt;p&gt;And another line of sample text here...&lt;/p&gt;
    </code></pre>
  </body>
</html>

Output

bootstrap-code-block

Bootstrap Variables

  • Variables use the <var> tag.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
   <var>y</var> = <var>m</var><var>x</var> + <var>b</var>
  </body>
</html>

Output

y = mx + b

Bootstrap User input

  • Use the <kbd> to indicate input that is typically entered via keyboard.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
    To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
  </body>
</html>

Output

bootstrap-kbd-tag

Bootstrap Tables

  • An extended table to the integration with some of the most widely used CSS frameworks. It Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <table>
      <caption>
        This is an example table, and this is its caption to describe the contents.
      </caption>
      <thead>
        <tr>
          <th>Table heading</th>
          <th>Table heading</th>
          <th>Table heading</th>
          <th>Table heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
        </tr>
        <tr>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
        </tr>
        <tr>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Output

bootstrap-table

Bootstrap Forms

  • <fieldset>s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs.
  • <legend>s, like fieldsets, have also been restyled to be displayed as a heading of sorts.
  • <label>s are set to display: inline-block to allow margin to be applied.
  • <input>s, <select>s, <textarea>s, and <button>s are mostly addressed by Normalize, but Reboot removes their margin and sets line-height: inherit, too.
  • <textarea>s are modified to only be resizable vertically as horizontal resizing often “breaks” page layout.
  • <button>s and <input> button elements have cursor:

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
        <form class="bd-example">
              <fieldset>
                <legend>Example legend</legend>
                <p>
                  <label for="input">Example input</label>
                  <input type="text" id="input" placeholder="Example input">
                </p>
                <p>
                  <label for="email">Example email</label>
                  <input type="email" id="email" placeholder="test@example.com">
                </p>
                <p>
                  <label for="tel">Example telephone</label>
                  <input type="tel" id="tel">
                </p>
                <p>
                  <label for="url">Example url</label>
                  <input type="url" id="url">
                </p>
                <p>
                  <label for="number">Example number</label>
                  <input type="number" id="number">
                </p>
                <p>
                  <label for="search">Example search</label>
                  <input type="search" id="search">
                </p>
                <p>
                  <label for="range">Example range</label>
                  <input type="range" id="range" min="0" max="10">
                </p>
                <p>
                <label for="file">Example file input</label>
                  <input type="file" id="file">
                </p>
                <p>
                  <label for="select">Example select</label>
                  <select id="select">
                    <option value="">Choose...</option>
                    <optgroup label="Option group 1">
                      <option value="">Option 1</option>
                      <option value="">Option 2</option>
                      <option value="">Option 3</option>
                    </optgroup>
                    <optgroup label="Option group 2">
                      <option value="">Option 4</option>
                      <option value="">Option 5</option>
                      <option value="">Option 6</option>
                    </optgroup>
                  </select>
                </p>
                <p>
                  <label>
                    <input type="checkbox" value="">
                    Check this checkbox
                  </label>
                </p>
                <p>
              <label>
                    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                    Option one is this and that
                  </label>
                 <label>
                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                    Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls.
                  </label>
                  <label>
                    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
                    Option three is disabled
                  </label>
                </p>
                <p>
                  <label for="textarea">Example textarea</label>
                  <textarea id="textarea" rows="3"></textarea>
                </p>
                <p>
                  <label for="date">Example date</label>
                  <input type="date" id="date">
                </p>
                <p>
                  <label for="time">Example time</label>
                  <input type="time" id="time">
                </p>
                <p>
                  <label for="password">Example password</label>
                  <input type="password" id="password">
                </p>
                <p>
                  <label for="datetime-local">Example datetime-local</label>
                  <input type="datetime-local" id="datetime-local">
                </p>
                <p>
                  <label for="week">Example week</label>
                  <input type="week" id="week">
                </p>
                <p>
                  <label for="month">Example month</label>
                  <input type="month" id="month">
                </p>
                <p>
                  <label for="color">Example color</label>
                  <input type="color" id="color">
                </p>
                <p>
                  <label for="output">Example output</label>
                  <output name="result" id="output">100</output>
                </p>
                <p>
                  <button type="submit">Button submit</button>
                  <input type="submit" value="Input submit button">
                  <input type="reset" value="Input reset button">
                  <input type="button" value="Input button">
                </p>
                <p>
              <button type="submit" disabled>Button submit</button>
                  <input type="submit" value="Input submit button" disabled>
              <input type="reset" value="Input reset button" disabled>
              <input type="button" value="Input button" disabled>
             </p>
             </fieldset>
            </form>
  </body>
</html>

Output

bootstrap-form

Bootstrap Pointers on Buttons

  • Reboot includes an enhancement for role="button" to change the default cursor to pointer. Add this attribute to elements to help indicate elements are interactive. This role isn’t necessary for <button> elements, which get their own cursor change.

Sample Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet"/>
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <span role="button" tabindex="0">Non-button element button</span>
  </body>
</html>

Output

Non-button element button

Bootstrap Address

  • The <address> element is updated to reset the browser default font-style from italic to normal.
  • line-height is also now inherited, and margin-bottom: 1rem has been added. <address>s is for presenting contact information for the nearest ancestor

Sample Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h3 id="address">Address <a class="anchor-link" href="#address" aria-label="Link to this section: Address"></a></h3>
  <address>
    <strong>KaashivInfotech. </strong><br>
    3A 1st Cross treet, PH Road, <br>
    Pallavan Nagar, Maduravoya, <br>
    Chennai-600095<br>
    <abbr title="Phone">Phone:</abbr>7667668009
  </address>
</body>
</html>

Output

bootstrap-address

Bootstrap Headings and paragraphs

  • All heading elements—e.g., <h1>—and <p> are reset to have their margin-top removed. Headings have margin-bottom: .5rem added and paragraphs margin-bottom: 1rem for easy spacing.
bootstrap-header-tag

Related Searches to Bootstrap Reboot - Bootstrap Tutorial

bootstrap reboot css bootstrap reboot cdn bootstrap without reboot bootstrap reboot css download reboot scss bootstrap 5 reboot scss bootstrap disable bootstrap 5 reboot how to use bootstrap reboot bootstrap-reboot cdn bootstrap-reboot css download bootstrap reboot override bootstrap reboot scss bootstrap reboot vs normalize bootstrap-reboot.min.css cdn bootstrap reboot github bootstrap reboot vs grid
Wikitechy Rated 5 / 5 based on 378284 reviews.
Wikitechy-logo

World's No 1 Animated self learning Website with Informative tutorials explaining the code and the choices behind it all.

Wikitechy

About Us
Terms of Use
Privacy Policy
Contact Us

Workshop

Webinar

Join our Community

Advertise

Other Languages

English
Chinese
Deutsch
Russian

© 2016 - 2024 KaaShiv InfoTech, All rights reserved. Powered by Inplant Training in chennai | Internship in chennai