Exampe for navbar whe user is signed in (floating)

<header class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="row">
      <ul class="breadcrumb pull-left">
        <li><a href="/"><span class="glyphicon glyphicon-home"></span>Home</a></li>
        <li>Test Generator</li> 
      </ul>
      <nav role="navigation pull-right">
        <div>
          <div class="pull-right">
            <ul class="nav navbar-nav">
              <li><a class="dropdown-toggle" data-toggle="dropdown" href="#">user@gmail.com <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="/dome/Account">Account</a></li>
                  <li><a href="mailto:user@gmail.com">Support</a></li>
                  <li class="divider"></li>
                  <li><a href="/dome/Account/SignOut">Sign out</a></li>
                </ul>
              </li>
            </ul>
            <div class="navbar-text">
              Balance:  $180
            </div>
          </div>              
        </div>
      </nav>
    </div>
  </div>
</header>

Example for navbar when user is signed out (nonfloating)

<header class="navbar navbar-default">
  <div class="container">
    <div class="row">
      <div class="navbar-header">
        <a class="navbar-brand" href="http://www.TestDome.com">TestDome</a>
      </div>
      <div class="pull-right">
        <ul class="nav navbar-nav">
          <li><a href="/dome/SignIn">Sign in</a></li>
        </ul>
      </div>  
    </div>
  </div>
</header>


Intro section

<div class="container-full intro">
  <div class="container">
    <div class="row">
      <div class="col-md-12 col-lg-12 col-xs-12">
        <h2 class="text-center">
          Create Your Perfect Programming Test
        </h2>
        <div class="text-center profiler" id="JobRoles">
          <div class="row with-margin">
            I need a
            <div class="btn-group inline-block" data-toggle="buttons" id="Ranks" title="" data-original-title="">
              <label class="btn btn-primary btn-default-switchable"><input id="Rank" name="Rank" type="radio" value="0"> Junior</label>
              <label class="btn btn-primary btn-default-switchable"><input id="Rank" name="Rank" type="radio" value="1"> Senior</label>
            </div>
            <div class="tooltip fade top in" style="top: -36px; left: 458px; display: block;">
              <div class="tooltip-arrow"></div>
              <div class="tooltip-inner">
                Please pick a rank.
              </div>
            </div>test for a developer
          </div>
          <div class="row with-margin">
            in
            <div class="btn-group inline-block" data-toggle="buttons" id="Languages" data-original-title="" title="">
              <label class="btn btn-primary btn-default-switchable"><input id="Language" name="Language" type="radio" value="2"> Java</label>
              <label class="btn btn-primary btn-default-switchable"><input id="Language" name="Language" type="radio" value="1"> C#</label>
            </div>
          </div>
          <div class="clearfix"></div>
          <div class="text-center advanced">
            <a href="javascript:;" class="helper-link" id="CustomizeSkills" name="CustomizeSkills">Advanced</a>
          </div>
        </div>
        <div class="text-center skills" id="Skills" style="display:none;">
          I want to test candidate knowledge of the following skills:<br>
          <br>
          <div id="SelectedSkills"></div>
          <div class="row">
            <div class="col-xs-12 text-center">
              <button type="button" class="btn btn-primary btn-sm" id="AddNewSkill">Add new skill</button>
            </div>
          </div>
          <div id="DifficultiesSample" style="display:none;">
            <div class="btn-group" data-toggle="buttons">
              <label class="btn btn-primary btn-default-switchable"><input id="Difficulty" name="Difficulty" type="radio" value="0"> Easy</label>
              <label class="btn btn-primary btn-default-switchable active"><input id="Difficulty" name="Difficulty" type="radio" value="1"> Moderate</label>
              <label class="btn btn-primary btn-default-switchable"><input id="Difficulty" name="Difficulty" type="radio" value="2"> Hard</label>
            </div>
          </div>
          <div class="text-center advanced">
            <a href="javascript:;" id="HideSkills" class="helper-link" name="HideSkills">Back to basic</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


Generated questions list

Questions Time
1Java Learning Multiple Correct Answers Question 15 min
Generate random test 1h 42min
<div class="container test main">
  <div class="row test-holder" id="testHolder">
    <div class="col-md-12 col-lg-12 col-xs-12">
      <table class="table table-questions">
        <thead>
          <tr>
            <th class="question">
              Questions
            </th>
            <th class="time">
              Time
            </th>
          </tr>
        </thead>
        <tbody id="TestQuestions">
          <tr>
            <td>
              <span class="number">1</span><abbr data-original-title="" title=""><span class="label label-difficulty label-warning">Java</span></abbr>
              <div class="popover-content hidden">
                <div class="title">
                  Java<span class="label label-difficulty pull-right label-warning">Moderate</span>
                </div>
                <div class="content">
                  <p>
                    <b>Testing process:</b> Implementing code or fixing bugs in Java.
                  </p>
                  <p>
                    <b>Motivation:</b> Basic familiarity with programming language used on the job is a prerequisite for quickly getting up to speed.
                  </p>
                </div>
              </div><abbr data-original-title="" title=""><span class="label label-difficulty label-warning">Learning</span></abbr>
              <div class="popover-content hidden">
                <div class="title">
                  Learning<span class="label label-difficulty pull-right label-warning">Moderate</span>
                </div>
                <div class="content">
                  <p>
                    <b>Testing process:</b> Discovering, learning and applying new technology-related knowledge in a short time frame.
                  </p>
                  <p>
                    <b>Motivation:</b> Being resourceful in learning takes programmer on a new level of productivity with new technologies appearing every day.
                  </p>
                </div>
              </div><a href="http://www.TestDome.com/dome/Questions/Preview/116" data-toggle="modal" data-target="#QuestionsPreview" class="modal-question-preview">Multiple Correct Answers Question</a>
            </td>
            <td class="time">
              15 min
            </td>
          </tr>
        </tbody>
        <tfoot style="display: table-footer-group;">
          <tr>
            <td>
              <a href="#" id="GenerateAnother" name="GenerateAnother">Generate random test</a>
            </td>
            <td id="TimeLimit" class="text-right total-time">
              1h 42min
            </td>
          </tr>
        </tfoot>
      </table>
      <div class="row">
        <div class="buttons-group text-center save-button-container" style="display: block;">
          <a class="btn btn-lg btn-primary" id="GeneratorUser" href="/dome/Generator/UserDetails" name="GeneratorUser">OK, what is the next step?</a>
        </div>
      </div>
    </div>
  </div>
</div>


<footer>
  <div class="container">
    <div class="row">
      <div class="col-md-8 col-lg-8 col-xs-8 lists">
        <div class="row">
          <h2>Tests</h2>
          <ul class="col-md-3 col-lg-3 col-xs-3">
            <li>Junior Front end Java</li>
            <li>Junior Back end Java</li>
            <li>Junior Full stack Java</li>
          </ul>
          <ul class="col-md-3 col-lg-3 col-xs-3">
            <li>Junior Front end C#</li>
            <li>Junior Back end C#</li>
            <li>Junior Full stack C#</li>
          </ul>
          <ul class="col-md-3 col-lg-3 col-xs-3">
            <li>Senior Front end Java</li>
            <li>Senior Back end Java</li>
            <li>Senior Full stack Java</li>
          </ul>
          <ul class="col-md-3 col-lg-3 col-xs-3">
            <li>Senior Front end C#</li>
            <li>Senior Back end C#</li>
            <li>Senior Full stack C#</li>
          </ul>
        </div>
      </div>
      <div class="col-md-2 col-md-offset-2 col-lg-2 col-lg-offset2 col-xs-2 col-xs-offset2 copyright">
        <div class="row">
          © TestDome | <a href="/dome/Company/Terms">Terms</a>
        </div>
      </div>
    </div>
  </div>
</footer>


Tables

Name Candidates Length Price
Which of the following would be the correct body for th ...
Java
0 candidates 1h 52min
6 questions
$10 per candidate
Senior C# BackEnd Developer 0 candidates 1h 52min
6 questions
$10 per candidate
Senior C# BackEnd Developer 0 candidates 1h 52min
6 questions
$10 per candidate
<table class="table table-striped table-hover valign-middle">
  <colgroup>
    <col style="width: 49%">
    <col style="width: 17%">
    <col style="width: 17%">
    <col style="width: 17%">
  </colgroup>
  <thead>
    <tr>
      <th class="text-left">Name</th>
      <th class="text-center">Candidates</th>
      <th class="text-center">Length</th>
      <th class="text-center">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="text-left">
        <a href="#" >Which of the following would be the correct body for th ...</a><br>
        <abbr class="questiondifficulty-description no-border">
          <span class="label label-difficulty label-warning">Java</span>
        </abbr>
        <div class="hidden">
            <div class="title">Java
              <span class="label label-difficulty label-warning pull-right">Moderate</span>
            </div>
            <div class="content">
              <p><b>Testing process:</b> Implementing code or fixing bugs in Java.</p>
              <p><b>Motivation:</b> Basic familiarity with programming language used on the job is a prerequisite for quickly getting up to speed.</p>
            </div>
        </div>
      </td>
      <td class="text-center">0 candidates</td>
      <td class="text-center">1h 52min<br><span class="gray-text">6 questions</span>
      </td>
      <td class="text-center">$10 per candidate</td>
    </tr>
    <tr>
      <td class="text-left">
        <a href="#">Senior C# BackEnd Developer</a>
      </td>
      <td class="text-center">0 candidates</td>
      <td class="text-center">1h 52min<br><span class="gray-text">6 questions</span>
      </td>
      <td class="text-center">$10 per candidate</td>
    </tr>
    <tr>
      <td class="text-left">
        <a href="#">Senior C# BackEnd Developer</a>
      </td>
      <td class="text-center">0 candidates</td>
      <td class="text-center">1h 52min<br><span class="gray-text">6 questions</span>
      </td>
      <td class="text-center">$10 per candidate</td>
    </tr>
  </tbody>
</table>


Forms

$10 per candidate
Candidates are more likely to take the test if they know they will get feedback in the end.
<form class="form-horizontal tab clearfix" action="/dome/my-tests/39" method="post" novalidate="novalidate">
  <div class="col-xs-12">
    <div class="form-group">
      <label class="col-xs-3 col-md-2 control-label" for="Name">Test name</label>
      <div class="col-xs-9 col-md-10">
        <input class="form-control form-control-wide" data-val="true" data-val-required="The name is required." id="Name" maxlength="255" name="Name" type="text" value="Senior Java BackEnd Developer">
      </div>
    </div>
    <div class="form-group">
      <label class="col-xs-3 col-md-2 control-label" for="Description">Description</label>
      <div class="col-xs-9 col-md-10">
        <textarea class="form-control form-control-wide" cols="20" id="Description" maxlength="255" name="Description" rows="4"></textarea>
      </div>
    </div>
    <div class="form-group">
      <label class="col-xs-3 col-md-2 control-label" for="Price">Price</label>
      <div class="col-xs-9 col-md-10 input-placeholder">
        $10 per candidate
      </div>
    </div>
    <div class="form-group">
      <label class="col-xs-3 col-md-2 control-label" for="DaysUntilEndDate">Select value</label>
      <div class="col-xs-9 col-md-10">
        <select class="form-control valid">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
      </div>
    </div>
    <div class="form-group">
      <label class="col-xs-3 col-md-2 control-label" for="ShowScoreToCandidate">Final score</label>
      <div class="col-xs-9 col-md-10">
        <div class="checkbox">
          <label><input data-val="true" data-val-required="The ShowScoreToCandidate field is required." id="ShowScoreToCandidate" name="ShowScoreToCandidate" type="checkbox" value="true">Show to candidates</label>
        </div><span class="help-block">Candidates are more likely to take the test if they know they will get feedback in the end.</span>
      </div>
      <div class="col-xs-6 col-md-4 help-block"></div>
    </div>
    <div class="form-group buttons-group">
      <div class="col-xs-9 col-md-10 col-xs-offset-3 col-md-offset-2">
        <input type="submit" class="btn btn-primary btn-lg" value="Save">
        <input type="submit" class="btn btn-default btn-lg" value="Cancel">
      </div>
    </div>
  </div>
</form>


Tooltips

Hover over me to see tooltip

HTML:

<span class="ttp" data-toggle="tooltip" data-placement="top" title="Hover over me to see tooltip">Hover over me to see tooltip</span>

JavaScript:

$('.ttp').tooltip();


Popovers

Full popover with HTML content

Java

HTML:

<abbr class="questiondifficulty-description no-border" id="full-popover">
  <span class="label label-difficulty label-warning">Java</span>
</abbr>
<div class="hidden">
    <div class="title">Java
      <span class="label label-difficulty label-warning pull-right">Moderate</span>
    </div>
    <div class="content">
      <p><b>Testing process:</b> Implementing code or fixing bugs in Java.</p>
      <p><b>Motivation:</b> Basic familiarity with programming language used on the job is a prerequisite for quickly getting up to speed.</p>
    </div>
</div>

JavaScript:

$('#full-popover').popover({
  html: true,
  trigger: 'hover',
  placement: 'right',
  container: 'body',
  title: function(){
    return $(this).next().find('.title').html();
  },
  content: function(){
    return $(this).next().find('.content').html();
  }
});


Popover without title (as tooltip)

MCA

HTML:

<abbr data-content="Multiple Correct Answers Question" data-original-title="" title="" class="simple">MCA</abbr>

JavaScript:

$('.simple').popover({
      html: true,
      trigger: 'hover',
      placement: function (context, source) {
          var position = $(source).offset();
          var bottom = $(window).height() - position.top;
          if (bottom < 200) {
              return "top";
          }
          return "right";
      },
      container: 'body',
      title: function(){
          return $(this).next().find('.title').html();
      },
      content: function(){
          return $(this).next().find('.content').html();
      }
  });


Panels

Panel title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue tortor vel arcu porta tincidunt. Donec sagittis nec odio sed tempor. Donec pretium hendrerit nisi, eget sollicitudin ipsum volutpat id. Donec sed ligula aliquet mi molestie porttitor et et velit. Integer quam velit, tincidunt at convallis eu, bibendum sed magna. Nam tellus lorem, porttitor ut sapien a, hendrerit viverra lectus. Curabitur sed laoreet odio. Morbi tincidunt ligula sed turpis blandit consectetur. Donec at lacinia nisi, laoreet sagittis turpis. Fusce ut massa dignissim, posuere leo blandit, placerat leo. Phasellus imperdiet convallis libero, sed auctor risus accumsan a. Suspendisse tristique consequat sollicitudin.

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue tortor vel arcu porta tincidunt. Donec sagittis nec odio sed tempor. Donec pretium hendrerit nisi, eget sollicitudin ipsum volutpat id. Donec sed ligula aliquet mi molestie porttitor et et velit. Integer quam velit, tincidunt at convallis eu, bibendum sed magna. Nam tellus lorem, porttitor ut sapien a, hendrerit viverra lectus. Curabitur sed laoreet odio. Morbi tincidunt ligula sed turpis blandit consectetur. Donec at lacinia nisi, laoreet sagittis turpis. Fusce ut massa dignissim, posuere leo blandit, placerat leo. Phasellus imperdiet convallis libero, sed auctor risus accumsan a. Suspendisse tristique consequat sollicitudin.</p>
  </div>
</div>


Form buttons

<input type="submit" class="btn btn-primary btn-lg" value="Save">
<input type="submit" class="btn btn-default btn-lg" value="Cancel">

Action buttons

Take me to index

<a class="btn btn-sm btn-primary" href="#">Take me to index</a>


Labels

Default Primary Success Info Warning Danger

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>