Bootstrap - Reboot

This chapter will discuss about Bootstrap reboot. Reboot is used to reset all the styles of a particular element.

Approach

Reboot styles HTML elements with opinionated styles using only element selectors. Extra styling is done with classes only. For instance, reboot some <table> styles, then include the classes .table, .table-bordered, and more.

  • Replace default ems with rems for scalable component spacing in browsers.

  • Skip margin-top. Vertical margins collapse unexpectedly. However, a margin with single direction is a simpler concept.

  • Block elements should use rems for margins to make scaling across device sizes easier.

  • Use inherit whenever possible and limit font-related properties declarations.

This enables you to customize in real-time, however you'd like to:

  <body style="--bs-body-color: #333;">
  <!-- ... -->
    </body>

Page defaults

Reboot is used for a elements <HTML> and <body> elements to provide better page-wide defaults. More details are as below.

  • All elments have a global box-sizing, including *::before, *::after, to border-box. Padding and borders won't exceed element's declared width because of it.

    • If no font-size is set on <HTML>, 16px is assumed as browser default. Use font-size: 1rem on the <body> for accessible, responsive type-scaling, considering user preferences. Modify $font-size-root variable to override default browser setting.

  • Global styles for <body> include font-family, font-weight, line-height, and color. To avoid font discrepancies, some form elements will inherit this later.

  • <body> background-color is defaulted to #fff for security purposes.

Native font stack

  • Reboot is used for the Bootstrap uses a native font stack or system font stack for optimum text rendering on every device and OS.

  • These system fonts are designed for modern devices with improved screen rendering, changeable font support and more.

  • Learn more about native font stacks.

$font-family-sans-serif:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
Notes

  • The font stack has emoji fonts, thus the common symbols, dingbat Unicode characters will appear as colorful pictographs. Their appearance varies with the native emoji font of the browser or platform, and remain unaffected by CSS color styles.

  • font-family is applied to the <body> and automatically inherited globally in Bootstrap. Update $font-family-base and recompile the Bootstrap for global font-family change.

Headings

Bootstrap Reboot headings are used for removing the default margin that has been provided by HTML header tags which are margin-bottom: .5rem and tightened line-height.

The --bs-heading-color CSS variable allows you to change the default heading-color.

Heading Example
<h1></h1>

h1. Bootstrap heading
<h2></h2>

h2. Bootstrap heading
<h3></h3>

h3. Bootstrap heading
<h4></h4>

h4. Bootstrap heading
<h5></h5>
h5. Bootstrap heading
<h6></h6>
h6. Bootstrap heading

Paragraphs

Bootstrap 5 reboot paragraphs are used for removing default margin-top that has been provided by HTML <p> tags and set paragraph margin-bottom: 1rem.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Reboot</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <p>This is the first paragraph.</p>
    <p>This is the second paragraph.</p>
</body>
</html>

Links

Reboot provides links have default color and underline, and change on :hover but not when a user has :visited. No special :focus styles are given.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Reboot</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <p><a href="#">Visit Tutorialspoint..</a></p>
    </body>
    </html>

As a Bootstrap v5.3.x, link color is set using rgba() and new -rgb CSS variables. This allows easy customization of link color opacity. Link color opacity can be changed using CSS variable --bs-link-opacity as demostrated in the following example.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Reboot</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
       <p><a href="#" style="--bs-link-opacity: .7">Visit Tutorialspoint</a></p>
    </body>
    </html>

Bootstrap reboot targets placeholder links (those without an href) with more specific selectors. Their color and text-decoration are reset to their default values.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Reboot</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
       <p><a>Visit Tutorialspoint</a></p>
    </body>
    </html>

Horizontal rules

Reboot simplifies <hr> element. The <hr> elements are styled with border-top and opacity: .25 by default, and inherit their border-color from the parent color automatically.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Reboot</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h2 class="text-center">Horizontal rules</h2>
      <div class="container">
        <hr>

        <div class="text-primary">
          <hr>
        </div>

        <hr class="border border-warning border-3 opacity-75">
        <hr class="border border-info border-4 opacity-100">
      </div>
    </body>
    </html>

Lists

  • Bootstrap reboot has removed margin-top and set margin-bottom: 1rem of lists.

  • List elements <ul>, <ol>, and <dl> have a margin-top removed and set margin-bottom: 1rem.

Description lists have improved margins for easier styling, clear hierarchy, and spacing <dd>s reset margin-left to 0, and add margin-bottom: .5rem. <dt>s are bolded.

Inline Code

Use <code> to enclose inline code snippets. Escape HTML angle brackets as necessary.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Reboot</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container">
      The <code>&lt;section&gt;</code> element should be enclosed within an inline container.
    </div>
  </body>
  </html>

Code blocks

Bootstrap 5 Reboot Code blocks are used to put the code inside of <pre> tag. It is recommanded to escape angle brackets in code for proper rendering. <pre> element is reset to remove its margin-top.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Reboot</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
      <body>
        <pre><code>
Tutorialspoint

        
This is an example of code block.

        </code></pre>
      </body>
    </html>

Variables

Reboot variables are used to reboot the style of <var> tag elements.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Reboot</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <var>a</var><var>x</var> + <var>b</var><var>y</var> = <var>c</var>
    </body>
    </html>

User input

Reboot user input <kbd> is used to indicate input that is typically entered via keyboard.

The text enclosed within the <kbd> tag is typically dispalyed in the browser's default monospace font.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Reboot</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container">
        To save the changes, press <kbd><kbd>Ctrl</kbd> + <kbd>s</kbd></kbd><br>
        To paste the selected item, press <kbd><kbd>Ctrl</kbd> + <kbd>v</kbd></kbd>
      </div>
    </body>
    </html>

Sample output

The <samp> tag should be used to indicate sample output from a program.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Reboot</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container">
        <samp>This text should be considered as an example output generated by a computer program.</samp>
      </div>
    </body>
    </html>

Tables

Tables are modified for style <caption>s, border collapse, and consistent text-align. The .table class offers further modifications to borders and padding.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Reboot</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <table>
          <caption>
            This is a caption of table to describe the contents.
          </caption>
          <thead>
            <tr>
              <th>Employee Id</th>
              <th>Employee Name</th>
              <th>Employee Role</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>10</td>
              <td>Jhon</td>
              <td>Software Devloper</td>
            </tr>
            <tr>
              <td>20</td>
              <td>Mayra</td>
              <td>Tester</td>
            </tr>
            <tr>
              <td>30</td>
              <td>Rocky</td>
              <td>Data Analyst</td>
            </tr>
          </tbody>
        </table>
        </body>
    </html>

Forms

Form elements have been simplified for new base styles. The most significant changes are listed below:

  • <fieldset>s can be easily used as wrappers for single inputs or groups of inputs as they don't have borders, padding, or margins.

  • <legend>s have been restyled to be displayed as a heading.

  • To allow for margins, <label>s are set to display: inline-block.

  • Normalise mainly handles the styling of <input>s, <select>s, <textarea>s, and <button>s, while reboot also removes their margin and sets line-height: inherit.

  • <textarea>s are only vertically resizable to prevent page layout "breaks".

  • <button>s and <input> buttons have cursor: pointer when not disabled.

Some date inputs are not supported by the latest versions of Safari and Firefox.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Reboot</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <form class="bd-example">
        <fieldset>
          <legend>Form</legend>
          <p>
            <label for="input">Name</label>
            <input type="text" id="inputName" placeholder="Enter your name...">
          </p>
          <p>
            <label for="email">Email id</label>
            <input type="email" id="emailId" placeholder="Tutorialspoint@example.com">
          </p>
          <p>
            <label for="tel">Mobile No:</label>
            <input type="tel" id="Mob">
          </p>
          <p>
            <label for="url">Age</label>
            <input type="number" id="age">
          </p>
          <p>
            <label for="number">Number</label>
            <input type="number" id="number">
          </p>
          <p>
            <label for="search">Search Here</label>
            <input type="search" id="searchHere">
          </p>
          <p>
            <label for="range">Range</label>
            <input type="range" id="rangeExample" min="0" max="10">
          </p>
          <p>
            <label for="file">Upload file</label>
            <input type="file" id="fileinput">
          </p>
          <p>
            <label for="select">Languages</label>
            <select id="select">
              <option value="">select...</option>
              <optgroup label="Group 1">
                <option value="">HTML</option>
                <option value="">CSS</option>
                <option value="">Bootstrap</option>
              </optgroup>
              <optgroup label="Group 2">
                <option value="">C</option>
                <option value="">C++</option>
                <option value="">Java</option>
              </optgroup>
            </select>
          </p>
          <p>
            <h6>Selects the languages</h6>
            <label>
              <input type="checkbox" value="">
                HTML
            </label>
            <br>
            <label>
              <input type="checkbox" value="">
                CSS
            </label>
            <br>
            <label>
              <input type="checkbox" value="">
                Javascript
            </label>
          </p>
          <p>
            <h6>Select your gender</h6>
            <label>
              <input type="radio" name="firstOption" id="radios1" value="option1" checked>
              Female
            </label>
            <br>
            <label>
              <input type="radio" name="secondOption" id="radios2" value="option2">
              Male
            </label>
            <br>
            <label>
              <input type="radio" name="thirdOption" id="radios3" value="option3" disabled>
                Others
            </label>
          </p>
          <p>
            <label for="textarea">Feedback</label>
            <textarea id="feedbackTextarea" rows="4"></textarea>
          </p>

          <p>
            <label for="date">Birth date</label>
            <input type="date" id="birthDate">
          </p>

          <p>
            <label for="time">Time</label>
            <input type="time" id="timeInput">
          </p>
          <p>
            <label for="password">Enter Password</label>
            <input type="password" id="password">
          </p>
          <p>
            <label for="datetime-local">Local Datetime</label>
            <input type="datetime-local" id="localDatetime">
          </p>
          <p>
            <label for="week">Select week</label>
            <input type="week" id="weekInput">
          </p>
          <p>
            <label for="month">Select month</label>
            <input type="month" id="monthInput">
          </p>
          <p>
            <label for="color">Selet color</label>
            <input type="color" id="selectColor">
          </p>
          <p>
            <label for="output">Output: </label>
            <output name="result" id="output">Tutorialspoint</output>
          </p>
          <p>
            <label>Buttons</label>
            <button type="submit">Submit</button>
            <input type="reset" value="Reset">
            <input type="button" value="Button">
          </p>
          <p>
            <label>Disabled Buttons</label>
            <button type="submit" disabled>Submit</button>
            <input type="reset" value="Reset" disabled>
            <input type="button" value="Button" disabled>
          </p>
        </fieldset>
      </form>
    </body>
    </html>

Pointers on buttons

  • Reboot provides a role="button" that changes the cursor to a pointer. Use this attribute to indicate interactive elements.

  • Not necessary for <button> elements, as they have their own cursor change.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Reboot</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container">
        <span role="button" tabindex="0">Non-button element</span>
      </div>
    </body>
    </html>

Misc elements

Address

  • Reboot address element <address> is used to change the font-style from italic to normal text.

  • It inherits line height and margin-bottom is set to 1rem.

  • Preserve formatting by ending lines with <br>.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Reboot</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container">
        <address>
            <strong>ABC Corporation</strong><br>
            505 sansui street,<br>
            Eillis, CA 0178<br>
            <abbr title="Phone">P:</abbr> (212) 357-0194
          </address>
          <address>
            <a href="mailto:tutorialspoint@example.com">tutorialspoint@example.com</a>
        </address>
      </div>
    </body>
    </html>

Blockquote

Blockquotes default margin is 1em 40px, which is changed to 0 0 1rem for consistency with other elements. These are used when we want to quote content from other sources.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Reboot</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <div class="container">
    <blockquote class="blockquote">
      <p>Blockquote removes default margin of HTML blockquote tag element.</p>
    </blockquote>
    <p>Someone well-known in <cite title="Source Title">Source Title</cite>.</p>
  </div>
</body>
</html>

Inline elements

Reboot inline elements are used to put some elements abbreviations or short forms of an element that receive basic styling to make it different than other text.

Basic styling is applied to the <abbr> element to stand out from the paragraph text.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Reboot</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
      The <abbr title="Cascading Style Sheet">CSS</abbr> is a style sheet language.
  </body>
  </html>

Summary

Text elements can be made interactive to show summary. The default value of the cursor on it is text. So it is reset to the pointer to tell that the particular element is interactive and the user can click on it.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Reboot</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container">
      <details>
        <summary>Bootstrap Colors</summary>
        <p>Bootstrap colors used to give the colors to the text or the background.</p>
      </details>
      <details open>
        <summary>Bootstrap Dropdown</summary>
        <p>Dropdown menus are toggleable, contextual menus that can be enabled to show links in a list format.</p>
      </details>
    </div>
  </body>
  </html>

HTML5 [hidden] attribute

  • The golbal attribute [hidden] in HTML5 has the default styling of display: none.

  • To improve this default (display:none) reboot helps prevents its display from getting accidentally overridden by setting [hidden] {display: none !important;}.

    <input type="text" hidden>

To merely toggle the visibility of an element, meaning its display is not modified and the element can still affect the flow of document, use .invisible class instead

Advertisements