CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user12160926
user12160926

Reputation:

Tabbed checkbox in Bootstrap

So I can't seem to figure out how to naturally space out the checkbox on Bootstrap so I wanted to see if there was any implementation in Bootstrap 4 to do this.

This is what I have:

    <div class="custom-control custom-radio mt-3">
        <input type="radio" name="rtd[checked]" class="custom-control-input" id="rtd3" value="3" required>
        <label class="custom-control-label" for="rtd3"><i>Certain</i> (but not all) personal information we have collected from you.</label>
        <div class="invalid-feedback">
            Select what information you would like deleted.
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-sm-1"></div>
        <div class="col-sm-11">
            <i>You must specify the personal information you would like us to delete:</i>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-sm-1"></div>
        <div class="col-sm-11">
            <div class="custom-control custom-switch">
                <input type="checkbox" class="custom-control-input" id="rtd3Transaction" name="rtd[3][transaction]">
                <label class="custom-control-label" for="rtd3Transaction">My transaction data</label>
            </div>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-sm-1"></div>
        <div class="col-sm-11">
            <div class="custom-control custom-switch">
                <input type="checkbox" class="custom-control-input" id="rtd3Device" name="rtd[3][device]">
                <label class="custom-control-label" for="rtd3Device">Information about my device(s) collected through cookies and other automated collection tools</label>
            </div>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-sm-1"></div>
        <div class="col-sm-11">
            <div class="custom-control custom-switch">
                <input type="checkbox" class="custom-control-input" id="rtd3Transaction" name="rtd[3][transaction]">
                <label class="custom-control-label" for="rtd3Transaction">Need spaced</label>
            </div>
        </div>
    </div>

enter image description here

I would like to have the last row spaced out - How would I be able to achieve this?

Upvotes: 2

Views: 292

Answers (2)

inputforcolor
inputforcolor

Reputation: 919

I'm not sure I've understood 100% the 'spaced' you're looking for but if it's simple indentation required, this result was achieved by adding ml-5 (Bootstrap's 'margin-left' property) to the last row.

More information on BS spacing here: https://getbootstrap.com/docs/4.0/utilities/spacing/

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<link rel="stylesheet" https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css>

	<style>
		
    </style>

  </head>
  
  <body>
  
   <div class="custom-control custom-radio mt-3">
        <input type="radio" name="rtd[checked]" class="custom-control-input" id="rtd3" value="3" required>
        <label class="custom-control-label" for="rtd3"><i>Certain</i> (but not all) personal information we have collected from you.</label>
        <div class="invalid-feedback">
            Select what information you would like deleted.
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-sm-1"></div>
        <div class="col-sm-11">
            <i>You must specify the personal information you would like us to delete:</i>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-sm-1"></div>
        <div class="col-sm-11">
            <div class="custom-control custom-switch">
                <input type="checkbox" class="custom-control-input" id="rtd3Transaction" name="rtd[3][transaction]">
                <label class="custom-control-label" for="rtd3Transaction">My transaction data</label>
            </div>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-sm-1"></div>
        <div class="col-sm-11">
            <div class="custom-control custom-switch">
                <input type="checkbox" class="custom-control-input" id="rtd3Device" name="rtd[3][device]">
                <label class="custom-control-label" for="rtd3Device">Information about my device(s) collected through cookies and other automated collection tools</label>
            </div>
        </div>
    </div>
    <div class="row mt-3 ml-5">
        <div class="col-sm-1"></div>
        <div class="col-sm-11">
            <div class="custom-control custom-switch ">
                <input type="checkbox" class="custom-control-input" id="rtd3Transaction" name="rtd[3][transaction]">
                <label class="custom-control-label" for="rtd3Transaction">Need spaced</label>
            </div>
        </div>
    </div>

If I've misunderstood what you're looking for please get back to me : )

Upvotes: 1

Shiny
Shiny

Reputation: 5055

You could increase the col-sm-x size of the first div and proportionally decrease the size of the second div, like this:

<div class="row mt-3">
  <div class="col-sm-2"></div> <!-- here -->
  <div class="col-sm-10">      <!-- here -->
    <div class="custom-control custom-switch">
      <input type="checkbox" class="custom-control-input" id="rtd3Transaction" name="rtd[3][transaction]">
      <label class="custom-control-label" for="rtd3Transaction">Need spaced</label>
    </div>
  </div>
</div>

Or you could use ml-x to manually add a margin to the left of the element

<div class="row mt-3">
  <div class="col-sm-1"></div>
  <div class="col-sm-11">
    <div class="custom-control custom-switch ml-3"> <!-- here -->
      <input type="checkbox" class="custom-control-input" id="rtd3Transaction" name="rtd[3][transaction]">
      <label class="custom-control-label" for="rtd3Transaction">Need spaced</label>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions