Bootstrap indenting within dd tags not working as expected

Question

I am designing (wish I was a designer) a webpage for a charity - the constitution which is basically a list of headers and information I decided to do in a tag. However, I can not seem to get the elements to behave the way I want them with sub items being indented further than their parent elements.

As you can see Item 4 is fine, yet Item 4.1 should be indented further, and any sub-items (4.1.1) from that indented further again.

I tried to use css and create two text-indent-n styles like shown below

.text-indent-4{
    text-indent: 50px;
}

.text-indent-8{
    text-indent: 100px;
}

It makes no difference when applied like this:

<dt data-toggle="tooltip" data-placement="top" title="Register of members">Register of members</dt>
  <dd>17. The board must keep a register of members, setting out </dd>
  <dd  class="text-indent-4">17.1   for each current member:</dd>
  <dd  class="text-indent-8">17.1.1 their full name and address; and</dd>
  <dd  class="text-indent-8">17.1.2 the date on which they were registered as a member of the organisation; </dd>
  <dd  class="text-indent-4">17.2   for each former member - for at least six years from the date on he/she ceased to be a member:</dd>
  <dd  class="text-indent-8">17.2.1 his/her name; and</dd>
  <dd  class="text-indent-8">17.2.2 the date on which he/she ceased to be a member. </dd>
  <dd>18    The board must ensure that the register of members is updated within 28 days of any change:</dd>
  <dd  class="text-indent-4">18.1   which arises from a resolution of the board or a resolution passed by the members of the organisation; or </dd>
  <dd  class="text-indent-4">18.2   which is notified to the organisation.  </dd>
  <dd>19    If a member or charity trustee of the organisation requests a copy of the register of members, the board must ensure that a copy is supplied to him/her within 28 days, providing the request is reasonable; if the request is made by a member (rather than a charity trustee), the board may provide a copy which has the addresses blanked out.</dd>

So the questions are:

1) How can I get each sub-item of a <dl> to indent 2) Is their a way of getting it to calculate automatically the indentation for the <dd> or will each have to be specified?

Answer 1

The simple remedy to this is to surround the sub-items with <ul></ul> tags this will indent the sub-items as required.

Thanks for the edit