https://i.sstatic.net/FHO1v.pngCan someone help me with adding separators between columns in my HTML code? I've tried the code below but it's not working. Is there a way to achieve this? I've attached a screenshot of what I'm expecting.
HTML Code:
<div class="jumbotron jumbotron-fluid controls">
<div class="container">
<form class="form-form-submit">
<div class="row">
<div class="col">
<div class="form-group">
<label for="form_name">Name *</label>
<input id="form_name" type="text" name="surname" class="form-control" placeholder="Please enter your name *"
required="required" data-error="name is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col">
<div class="form-group">
<label for="form_email">Email *</label>
<input id="form_email" type="email" name="email" class="form-control"
placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
</div>
</div>
<div class="w-100"></div>
<div class="col">
<div class="form-group">
<label for="form_phone">Phone</label>
<input id="form_phone" type="tel" name="phone" class="form-control"
placeholder="Please enter your phone number">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col">
<div class="btn-group" style="padding-top: 25px;">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</div>
</div>
</form>
</div>
To add lines between columns, I want to use the following code:
<div class="col-md-2 col-sm-4">
<div class="line">|</div>
<div>OR</div>
<div class="line">|</div>
</div>
The desired output format should look like this:
|
Name | Email
OR
Phone Button |
|