CODEWITHSUNDEEP
csstwitter-bootstrapmaterial-designmaterial-design-lite
tealowpillow
tealowpillow

Reputation: 429

bootstrap 4 horizontal alignment of toggle fails

I am using a toggle element of Material Design Lite in my Bootstrap 4 framework and am unable to align the element to the right side of the column.

Note the "float-right" class works just fine for the Bootstrap element (button). I also tried applying the "text-right" class to the container, as well as justify-content-end, justify-content: flex-end, pull-right, etc... nothing works.

<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet" />

<body>
  <div class="container">
    <div class="row">
      <div class="col-8">Text row 1</div>
      <div class="col-4 float-right">
        <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect float-right" for="switch-1">
            <input type="checkbox" id="switch-1" class="mdl-switch__input float-right" checked>
          </label>
      </div>
    </div>
    <div class="row">
      <div class="col-8">Text row 2</div>
      <div class="col-4 float-right">
        <button type="button" class="btn btn-primary float-right">Submit</button>
      </div>
    </div>
  </div>
  </div>
</body>

How can I align the element to the right side of the column? For the context I am trying to get a layout similar to the settings in chrome (text left aligned, toggle right aligned):

enter image description here

Upvotes: 3

Views: 2350

Answers (1)

miken32
miken32

Reputation: 42699

With a CSS rule you can get it shifted over to the right. Because it's floating you'll need to play with padding to get it lined up just right. Another option would be putting the controls in a div.col-1 and giving them less space to move around.

label.mdl-switch { width: auto !important; }
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet" />

<body>
  <div class="container">
    <div class="row">
      <div class="col-8">Text row 1</div>
      <div class="col-4 float-right">
        <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect float-right" for="switch-1">
            <input type="checkbox" id="switch-1" class="mdl-switch__input" checked>
          </label>
      </div>
    </div>
    <div class="row">
      <div class="col-8">Text row 2</div>
      <div class="col-4 float-right">
        <button type="button" class="btn btn-primary float-right">Submit</button>
      </div>
    </div>
  </div>
</body>

Upvotes: 1

Related Questions