Bootstrap doc v.2

bootstrap-doc-v-2.markdown

Bootstrap doc v.2

A Pen by Barron M Brock on CodePen.

License.

index.html

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>



<nav id="navbar">
  <header class="header_style">Bootstrap 4</header>
    <ul>
      <a class="nav-link" href="#Getting_started"><li>Getting started</li> </a>
      <a class="nav-link" href="#Layout"><li>Layout</li> </a>
      <a class="nav-link" href="#Content"><li>Content</li> </a>
      <a class="nav-link" href="#Componets"><li>Componets</li> </a>
      <a class="nav-link" href="#Utilities"><li>Utilities</li> </a>
    </ul>  
</nav>

<main id="main-doc">
  <section id="Getting_started" class="main-section">
    <header>Getting started</header>
    <p>Here is a quick starter template.Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:</p>

    <!--this is my pre tag problem resize the screen to see what I mean -->
    
   <pre><code id="starter_template">
   &lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;!-- Required meta tags --&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;

    &lt;!-- Bootstrap CSS --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css&quot;
    integrity=&quot;sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO&quot;
    crossorigin=&quot;anonymous&quot;&gt;

    &lt;title&gt;Hello, world!&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Hello, world!&lt;/h1&gt;

    &lt;!-- Optional JavaScript --&gt;
    &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
    &lt;script src=&quot;https://code.jquery.com/jquery-3.3.1.slim.min.js&quot; integrity=&quot;sha384-
    q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
    
    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js&quot; integrity=&quot;sha384-
    ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
    
    &lt;script src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js&quot; integrity=&quot;sha384-
    ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
    </pre></code>

  </section>
    
  <section id="Layout" class="main-section">
    <header>Layout</header>
    <p><strong>Containers</strong> are the main thing you use in bootstrap. Other than custom classes like <strong>text-center</strong>. Simply saying</p> 
    <pre><code>&lt;div class=&quot;container&quot;&gt;
  &lt;!-- Content here --&gt;
&lt;/div&gt;</code></pre>
    <p>will get your div in a container.</p>
    <p>Responsive grids are also a part of Bootstrap. They are built with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox" target="_blank">flexbox</a>. Very similar to flexbox bootstrap uses grids and colums. Here is an example</p>
    <pre><code>
&lt;div class=&quot;container&quot;&gt;
  &lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-sm&quot;&gt;
      One of three columns
    &lt;/div&gt;
    &lt;div class=&quot;col-sm&quot;&gt;
      One of three columns
    &lt;/div&gt;
    &lt;div class=&quot;col-sm&quot;&gt;
      One of three columns
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
    </code></pre>
  </section>
    
  <section id="Content" class="main-section">
    <header>Content</header>
    <p>Page defaults for the <strong>html</strong> and <strong>body</strong> elements are updated to provide better page-wide defaults. More specifically:</p>
    <ul>
      <li>The <strong>box-sizing</strong> is globally set on every element—including <strong>*::before</strong> and
        <strong>*::after</strong>, to <strong>border-box</strong>. This ensures that the declared width of element is never
        exceeded due to padding or border.
        <ul>
          <li  class="nested_li">No base font-size is declared on the &lt;html&gt;, but 16px is assumed (the browser default).
            font-size: 1rem is applied on the &lt;body&gt; for easy responsive type-scaling via media queries while respecting
            user preferences and ensuring a more accessible approach.</li>
        </ul>
      </li>
      <li>The &lt;body&gt; also sets a global font-family, line-height, and text-align. This is inherited later by some form elements to prevent font inconsistencies.</li>
      <li>For safety, the &lt;body&gt; has a declared background-color, defaulting to #fff.</li>
    </ul>
    
    <p>All heading elements&mdash;e.g., &lt;h1&gt;&mdash;and &lt;p&gt; are reset to have their margin-top removed. Headings have margin-bottom: .5rem added and paragraphs margin-bottom: 1rem for easy spacing.</p>
    <p>All lists&mdash;&lt;ul&gt;, &lt;ol&gt;, and &lt;dl&gt;&mdash;have their margin-top removed and a margin-bottom: 1rem. Nested lists have no margin-bottom.</p>
  </section>
    
  <section id="Componets" class="main-section">
    <header>Componets</header>
      <p><strong>Badges!</strong>. Badges are also a neet component of bootstrap. Badges also scale to match the size of the
        immediate parent element by using relative font sizing and em units.</p>
    
        <pre><code>&lt;h1&gt;Example heading &lt;span class=&quot;badge badge-secondary&quot;&gt;New&lt;/span&gt;&lt;/h1&gt;</code></pre>
    <p>Badges can also be used as part of links or buttons to provide a counter.</p>
    <pre><code>&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;
  Notifications &lt;span class=&quot;badge badge-light&quot;&gt;4&lt;/span&gt;
&lt;/button&gt;</code></pre>
    
    <p>Bootstrap also includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.</p>
    
    <pre><code>&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;Primary&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;Secondary&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-success&quot;&gt;Success&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-danger&quot;&gt;Danger&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-warning&quot;&gt;Warning&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-info&quot;&gt;Info&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-light&quot;&gt;Light&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-dark&quot;&gt;Dark&lt;/button&gt;

&lt;button type=&quot;button&quot; class=&quot;btn btn-link&quot;&gt;Link&lt;/button&gt;</code></pre>
  </section>
    
  <section id="Utilities" class="main-section">
    <header>Utilities</header>
    
    <p><strong>Display</strong> is also a function that bootstrap uses to make contianers responsive. Change the value of the display property with our responsive display utility classes. We purposely support only a subset of all possible values for display. Classes can be combined for various effects as you need.</p>
    
    <p>Display utility classes that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0; and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.</p>
    
    <p>As such, the classes are named using the format:</p>
    <ul>
      <li>.d-{value} for xs</li>
      <li>.d-{breakpoint}-{value} for sm, md, lg, and xl.</li>
    </ul>
    
    <p>Where <strong>value</strong> is one of:</p>
    
    <ul>
      <li>none</li>
      <li>inline</li>
      <li>inline-block</li>
      <li>block</li>
      <li>table</li>
      <li>table-cell</li>
      <li>table-row</li>
      <li>flex</li>
      <li>inline-flex</li>
    </ul>
    
    <p>The media queries effect screen widths with the given breakpoint or larger. For example, .d-lg-none sets display: none; on both lg and xl screens.</p>
  </section>
  
  <footer>Created by Barron V Brock 2018. And help from the fcc forums XD</footer>
  
</main>

style.css

#topic{
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size:18px;
}

.header_style{
  color:black;
  font-size: 30px;
  margin:10px;
  text-align:center;
  font-size:1.8em;
  font-weight:thin;
}

#navbar{
  position:fixed;
  top:0px;
  left:0px;
  width:150px;
  height:100%;
}

#navbar ul{
  height:88%;
  overflow-y:auto;
  overflow-x:hidden;
}

#navbar li{
  color: #4d4e53;
  padding:8px;
  padding-left:45px;
  list-style: none;
  position:relative;
  left:-50px;
  width:100%;
}

#navbar a{
    color: #4d4e53;
    text-decoration:none;
}

#navbar li:hover{
  background-color: #A9A9A9;
    color: white;
}



.nested_li{
  margin-right:10vw;
}

main section header{
  text-align:center;
  font-size:40px;
  margin-top:200px;
  font-family: monospace;
}

main section pre{
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

main section p{
  width:75vw;
  margin-left:10vw;
  font-family: monospace;
  font-size:15px;
}

main section ul{
  width:75vw;
  margin-left:10vw;
}
main section ul li{
  font-family: monospace;
  font-size:15px;
  margin-top:10px;
}

main section pre{
  width:75vw;
  padding:10px;
  outline-style:solid;
  outline-color:grey;
  margin-left:10vw;
  box-shadow:12px 12px 15px grey;
}

footer{
  margin-top:100px;
  margin-bottom:-100px;
  width:75vw;
  margin-left:10vw;
  font-family: monospace;
  font-size:20px;
}


/*ahh my really sucky media query please
dont roast me to hard*/

@media (max-width: 1080px){
  #navbar{
    position:fixed;
    width:100%;
    height:100px;
    display:block;
    background-color:#9BD4F5;
  }
  #navbar a{
    display: inline;
    float:left;
  }
}