HTML/Bootstrap layout

Issue

I’m trying to layout a section like the image here.

list of items

I’m using bootstrap 4. I’ve tried laying out with rows and cols but can never achieve this look. Right now I’m using a <ul> and <li>. Inside the <li> I have 3 inputs. I’ve tried putting all three inside a <div class="form-group form-inline"> and also tried separating them out to individual "form-group" divs with no luck. I’m sure I just don’t understand enough about how to lay things out. I’m hoping someone can help me understand and maybe help me out here.

This is as close as I have come but I can’t seem to get the widths correct and it seems to break onto the new line.

<div id="cardBody" class="card-body">
  <div class="row">
    <div class="container-fluid">
      <div class="col-md-6">
        <label class="control-label ml-2">Description</label>
      </div>
      <div class="col-md-4">
        <label class="control-label">Link</label>
      </div>
      <div class="col-md-1">
        <label class="control-label">Count</label>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <form>
        <ul id="itemList" class="list-group">
          <li class="list-group-item">
            <div class="form-group form-inline mb-0">
              <label for="description">&#8942;&#8942;</label>
              <input type="text" class="form-control ml-2 mr-2" id="description" placeholder="">

              <label class="sr-only" for="link">Link</label>
              <input type="text" class="form-control mr-2" id="link" placeholder="">

              <label class="sr-only" for="count">Count</label>
              <input type="text" class="form-control mr-2" id="count" placeholder="">
            </div>
          </li>
          <li class="list-group-item">
            <div class="form-group form-inline mb-0">
              <label for="description2">&#8942;&#8942;</label>
              <input type="text" class="form-control ml-2 mr-2" id="description2" placeholder="">

              <label class="sr-only" for="link2">Link</label>
              <input type="text" class="form-control mr-2" id="link2" placeholder="">

              <label class="sr-only" for="count2">Count</label>
              <input type="text" class="form-control mr-2" id="count2" placeholder="">
            </div>
          </li>
          <li class="list-group-item">&#8942;&#8942;</li>
          <li class="list-group-item">4</li>
          <li class="list-group-item">5</li>
          <li class="list-group-item">6</li>
        </ul>
      </form>
    </div>
  </div>
</div>

closest attempt

Anyway, thanks in advance for any help or insight you can provide.

Solution

This worked for me. You may want to put the inline styles in your css file.

<div class="container">
  <div id="cardBody" class="card-body">
    <div class="row">
      <div class="container-fluid d-flex">
        <div class="col-md-7">
          <label class="control-label ml-4">Description</label>
        </div>
        <div class="col-md-4">
          <label class="control-label">Link</label>
        </div>
        <div class="col-md-1">
          <label class="control-label">Count</label>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <form>
          <ul id="itemList" class="list-group">
            <li class="list-group-item">
              <div class="row">
                <div class="col-7 form-group form-inline mb-0">
                  <div class="d-flex" style="width: 100%;">
                    <label for="description">&#8942;&#8942;</label>
                    <input type="text" class="form-control ml-2" id="description" placeholder="" style="width: 100%;">
                  </div>
                </div>
                <div class="col-4 form-group form-inline mb-0" style="width: 100%;">
                  <input type="text" class="form-control mr-2" id="link" placeholder="" style="width: 100%;">
                </div>
                <div class="col-1 form-group form-inline mb-0" style="width: 100%;">
                  <input type="text" class="form-control mr-2" id="count" placeholder="" style="width: 100%;">
                </div>
              </div>
            </li>
            <li class="list-group-item">
              <div class="row">
                <div class="col-7 form-group form-inline mb-0">
                  <div class="d-flex" style="width: 100%;">
                    <label for="description">2</label>
                    <input type="text" class="form-control ml-2" id="description" placeholder="" style="width: 100%;">
                  </div>
                </div>
                <div class="col-4 form-group form-inline mb-0" style="width: 100%;">
                  <input type="text" class="form-control mr-2" id="link" placeholder="" style="width: 100%;">
                </div>
                <div class="col-1 form-group form-inline mb-0" style="width: 100%;">
                  <input type="text" class="form-control mr-2" id="count" placeholder="" style="width: 100%;">
                </div>
              </div>
            </li>
            <li class="list-group-item">
              <div class="row">
                <div class="col-7 form-group form-inline mb-0">
                  <div class="d-flex" style="width: 100%;">
                    <label for="description">3</label>
                    <input type="text" class="form-control ml-2" id="description" placeholder="" style="width: 100%;">
                  </div>
                </div>
                <div class="col-4 form-group form-inline mb-0" style="width: 100%;">
                  <input type="text" class="form-control mr-2" id="link" placeholder="" style="width: 100%;">
                </div>
                <div class="col-1 form-group form-inline mb-0" style="width: 100%;">
                  <input type="text" class="form-control mr-2" id="count" placeholder="" style="width: 100%;">
                </div>
              </div>
            </li>
            <li class="list-group-item">
              <div class="row">
                <div class="col-7 form-group form-inline mb-0">
                  <div class="d-flex" style="width: 100%;">
                    <label for="description">4</label>
                    <input type="text" class="form-control ml-2" id="description" placeholder="" style="width: 100%;">
                  </div>
                </div>
                <div class="col-4 form-group form-inline mb-0" style="width: 100%;">
                  <input type="text" class="form-control mr-2" id="link" placeholder="" style="width: 100%;">
                </div>
                <div class="col-1 form-group form-inline mb-0" style="width: 100%;">
                  <input type="text" class="form-control mr-2" id="count" placeholder="" style="width: 100%;">
                </div>
              </div>
            </li>
            <li class="list-group-item">
              <div class="row">
                <div class="col-7 form-group form-inline mb-0">
                  <div class="d-flex" style="width: 100%;">
                    <label for="description">5</label>
                    <input type="text" class="form-control ml-2" id="description" placeholder="" style="width: 100%;">
                  </div>
                </div>
                <div class="col-4 form-group form-inline mb-0" style="width: 100%;">
                  <input type="text" class="form-control mr-2" id="link" placeholder="" style="width: 100%;">
                </div>
                <div class="col-1 form-group form-inline mb-0" style="width: 100%;">
                  <input type="text" class="form-control mr-2" id="count" placeholder="" style="width: 100%;">
                </div>
              </div>
            </li>
          </ul>
        </form>
      </div>
    </div>
  </div>
</div>

Answered By – jasond1284

Answer Checked By – Marie Seifert (AngularFixing Admin)

Leave a Reply

Your email address will not be published.