Bootstrap Outline Example

bootstrap-outline-example.markdown

Bootstrap Outline Example

A Pen by Megan Charles on CodePen.

License.

index.html

<!--
Grid Classes
The Bootstrap grid system has four classes:

xs (for phones)
sm (for tablets)
md (for desktops)
lg (for larger desktops)
-->
<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p>
  <h2>Practice makes perfect</h2>
</div><!--end of jumbotron text-center-->

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div><!--end of column class-->
    <div class="col-md-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div><!--end of column class-->
    <div class="col-md-4">
      <h3>Column 3</h3> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div><!--end of column class-->
    <div class="col-md-4">
      <h3>Column 4</h3> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div><!--end of column class-->
    <div class="col-md-4">
      <h3>Column 5</h3> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div><!--end of column class-->
    <div class="col-md-4">
      <h3>Column 6</h3> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div><!--end of column class-->
  </div><!--end of row class-->
</div><!--end of container class--> 
  
<div class="wrapper">
 <!--this is within the "container" class assigned to this segment of div, and I created a new one to define where I wanted my buttons to align to-->
  <hr>
  <!-- Standard button -->
<button type="button" class="btn btn-default">Default Button</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary Button</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success Button</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info Button</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning Button</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger Button</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link Button</button>
  </div><!--end of wrapper class-->  
  <hr><!--Page Break-->


 <div class="container">
  <form role="form">
   <div class="form-group">
      <label for="name">Name</label>
      <input type ="text" class="form-control" id="name" placeholder="Enter Name">
    </div><!--end of form-group-->
    
<!--Inline Form: To create a form where all of the elements are inline, left aligned and labels are alongside, add the class .form-inline to the <form> tag.--> 
   <div class="form-group">
      <label for="inputfile">File input</label>
      <input type="file" id="inputfile">
      <p class="help-block">Example block-level help text here.</p>
   </div><!--end of form-group-->
   
   <div class="checkbox">
      <label><input type="checkbox"> Check me out</label></div>
   
   <button type="submit" class="btn btn-default">Submit</button>
</form><!--end of inline form-->
</div><!--end of container class-->  

<hr><!--Page Break-->


<div class="container"><!--start of container-->
<form class="form-horizontal" role ="form">
   <div class="form-group">
      <label for="firstname" class="col-md-2 control-label">First Name</label>
   <div class="col-md-8">
         <input type="text" class = "form-control" id="firstname" placeholder="Enter First Name">
     </div><!--col-md-10-->
   </div><!--form group-->
   
   <div class="form-group">
      <label for="lastname" class="col-md-2 control-label">Last Name</label>
      <div class="col-md-8">
         <input type="text" class="form-control" id="lastname" placeholder="Enter Last Name">
      </div>
   </div>
   <div class="form-group">
      <div class="col-md-offset-2 col-md-10">
         <div class="checkbox">
            <label><input type="checkbox"> Remember me</label>
         </div>
      </div>
   </div>
  
   <div class="form-group">
      <div class="col-md-offset-2 col-md-10">
         <button type="submit" class="btn btn-default">Sign in</button>
      </div><!--end of form-group-->
  </div><!--end of container class?-->
  
 <form role="form">
<!--Textarea
The textarea is used when you need multiple lines of input. Change rows attribute as necessary (fewer rows = smaller box, more rows = bigger box): An example of a text box-->
<div class = "form-group">
          <label for="name">Text Area</label>
          <textarea class="form-control" rows="3"></textarea>
       </div>
    </form><!--end of role=form-->
  </div>
</div>
 

<div class="container">
  <!--CheckBoxes and Radio Buttons
Checkboxes and radio buttons are great when you want users to choose from a list of preset options.

When building a form, use checkbox if you want the user to select any number of options from a list. Use radio if you want to limit the user to just one selection.

Use .checkbox-inline or .radio-inline class to a series of checkboxes or radios for controls appear on the same line.

The following example demonstrates both (default and inline) types-->
<hr>
<label for = "name">Example of Default Checkbox and radio button </label>

<div class = "checkbox">
   <label>
      <input type = "checkbox" value = "">Option 1
   </label>
</div>

<div class = "checkbox">
   <label>
      <input type = "checkbox" value = "">Option 2
   </label>
</div>

<div class = "radio">
   <label>
      <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" checked> Option 1
   </label>
</div>

<div class = "radio">
   <label>
      <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2">
      Option 2 - selecting it will deselect option 1
   </label>
</div>

<label for = "name">Example of Inline Checkbox and radio button </label>

<div>
   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox1" value = "option1"> Option 1
   </label>
   
   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox2" value = "option2"> Option 2
   </label>
   
   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox3" value = "option3"> Option 3
   </label>
   
   <label class = "checkbox-inline">
      <input type = "radio" name = "optionsRadiosinline" id = "optionsRadios3" value = "option1" checked> Option 1
   </label>
   
   <label class = "checkbox-inline">
      <input type = "radio" name = "optionsRadiosinline" id = "optionsRadios4" value = "option2"> Option 2
   </label>
</div>  
<!--Selects
A select is used when you want to allow the user to pick from multiple options, but by default it only allows one.

Use <select> for list options with which the user is familiar, such as states or numbers.

Use multiple = "multiple" to allow the users to select more than one option.

The following example demonstrates both (select and multiple) types -->
<hr>
  <form role = "form">
   
   <div class = "form-group">
      <label for = "name">Select list</label>
      
      <select class = "form-control">
<!--you can create as many options as needed-->
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
         <option>6</option>
         <option>7</option>
         <option>8</option>
         <option>9</option>
<!--try with text in lieu of numbers-->
         <option>Item Name 1</option>
         <option>Item Name 2</option>
      </select>

      <label for = "name">Mutiple Select list</label>
      
      <select multiple class = "form-control"><!--you can add as many options as needed-->
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
         <option>6</option>
         <option>7</option>
         <option>8</option>
         <option>9</option>
<!--try with text in lieu of numbers-->
         <option>Item Name 1</option>
         <option>Item Name 2</option>
      </select> 
   </div>
</form><!--end of multiple select example-->
  
  
<!--Inputs
The most common form text field is the input field. This is where users will enter most of the essential form data. Bootstrap offers support for all native HTML5 input types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color. Proper type declaration is required to make Inputs fully styled.-->
 <form role = "form">
   
   <div class = "form-group">
      <label for = "name">Label</label>
      <input type = "text" class = "form-control" placeholder = "Text input">
   </div>
  
</form> 
<!--end of label box example-->
  
  
  </div><!--to continue with the 2nd assigned container fluid, place coding above this div-->

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.css

body {
  background: linear-gradient(to left, FloralWhite, pink, #f4597b);
}

h2, h3 {
  color: red;
}
.wrapper {
    text-align: center;
    
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />