Roxanne Roxanne - 3 months ago 18
HTML Question

Align columns on single row CSS to create labels for a toggle

I created a toggle switch (just a fancy CSS input checkbox type) taken from w3schools. This toggle checkbox will switch between two states : Draw and Erase.

I am trying to add some "label" to my checkbox using the the W3.CSS Responsive classes, w3-.row. HTML Code:

<div class="container-fluid">
<div class="row content">
<div class="col-sm-2 sidenav text-center" id="left_col">
<div class="well ">
<div class="w3-row w3-container">
<div class="w3-col s4 w3-center" style="width:none">
<p>Draw</p>
</div>
<div class="w3-col s4 w3-center" style="width:none">
<label class="switch">
<input type="checkbox" id="editor_draw_erase"></input>
<div class="slider round"></div>
</label>
</div>
<div class="w3-col s4 w3-center" style="width:none">
<p> Erase </p>
</div>
</div>
</div>
</div>
</div>

How it looks (The fiddle): https://jsfiddle.net/gdbcn02g/

How I wish it would like:
toggle switch

Maybe w3-row/col is not the best approach to label my toggle switch as I am very new to CSS and everything web-programming. I tried also styling using the .table but same results. Looking forward to suggestions.

Answer

There are a multitude of options to align things horizontally. The easiest would be to add display: inline-block; to your w3-col class. You could also add float: left or play around with flexbox.

Comments