phvaillant

.blue {
    background-color: lightblue;
}

.green {
    background-color: lightgreen;
}

.red {
    background-color: salmon;

phvaillant

<h2>
                  &lt;ods-box&gt;
</h2>

<div class="ods-box">
                 The style of this element is the following:<br />
  <ul>
    <li><i>background: #FFF;</i> = the background color is white </li>
    <li><i>border-radius: 3px;</i> = the box has rounded corners</li>
    <li><i>border: solid 1px #E5E5E5;</i> = the box is outlined with a thin grey border</li>

phvaillant

.boxwithborder {
    border: 1px grey solid;
    margin-bottom: 20px;
}

phvaillant

<p>
    I am content between a start tag and an end tag
</p>
<h2>
    I am also content between a different start tag and a different end tag.
</h2>

phvaillant

<h2>
    A title of level 2
</h2>

<ol>
  <li>
      First element
  </li>
  <li>
      Second element

phvaillant

<div class="ods-box fullwidth  firstlevel">
  <h2>
    BOITE 1 (DIV)
  </h2>
</div>
                
<div class="ods-box halfwidth firstlevel">
  <h2>
    BOITE 2 (DIV)
  </h2>

phvaillant

<div class="ods-box halfwidth firstlevel">
  DIV
</div>

<div class="ods-box halfwidth firstlevel">
  
  <div class="ods-box fullwidth secondlevel">
    DIV WITHIN A DIV
  </div>

phvaillant

<div class="row">
   <div class="col-xs-1 blue">
      Column 1
   </div>
   <div class="col-xs-1 red">
      Column 2
   </div>
   <div class="col-xs-1 blue">
      Column 3
   </div>

phvaillant

.red {
    background-color: salmon;
    height: 100px;
}

.blue {
    background-color: lightblue;
    height: 100px;
}

phvaillant

<div class="row">
    <div class="col-xs-3 red">
        First element on the first line
    </div>
    <div class="col-xs-4 blue">
        Second element on the first line
    </div>
</div>
<div class="row">
    <div class="col-xs-2 blue">