I'm using bootstrap toggle in my project, it works really nice, but when I'm trying to align the toggle div to the right the text (on the left) and div are not aligning anymore.
I was reading about this issue and found that the clearfix class can help here, and it did solve some of the problems, but it's still not looking like it should.
JSFiddle
<ul class="list-group" style="width:200px">
<li class="list-group-item active">
<h5 class="list-group-item-heading">
<i class="fa fa-cogs"></i>
Settings
</h5>
</li>
<li class="list-group-item">
<h5 class="list-group-item-text clearfix">
Data source
<div class="toggle btn btn-primary" data-toggle="toggle" style="width: 0px; height: 0px;float: right;">
<input class="pull-right" type="checkbox" checked="" data-toggle="toggle">
<div class="toggle-group">
<label class="btn btn-primary toggle-on">On</label>
<label class="btn btn-default active toggle-off">Off</label>
<span class="toggle-handle btn btn-default"></span>
</div>
</div>
</h5>
</li>
</ul>
This is how I wish it will look (never mind the icon please):
You should create an element outside "Data source" and add line-height: 32px; for it :
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-group" style="width:200px">
<li class="list-group-item active">
<h5 class="list-group-item-heading">
<i class="fa fa-cogs"></i>
Settings
</h5>
</li>
<li class="list-group-item">
<h5 class="list-group-item-text clearfix">
<span style="line-height: 32px;">Data source</span>
<div class="toggle btn btn-primary" data-toggle="toggle" style="width: 0px; height: 0px;float: right;">
<input class="pull-right" type="checkbox" checked="" data-toggle="toggle">
<div class="toggle-group">
<label class="btn btn-primary toggle-on">On</label>
<label class="btn btn-default active toggle-off">Off</label>
<span class="toggle-handle btn btn-default"></span>
</div>
</div>
</h5>
</li>
</ul>
Related
I'm trying to make my two columns placed on the right side but when I add float left in my class the second column was ahead from my first column.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" style="margin-top: 3%;">
<div class="row">
<div class="col-md-1 col-xs-12" style="float: right;">
<p>Filter by: </p>
</div>
<div class="col-md-3 col-xs-12" style="float: right;">
<div class="input-group" id="adv-search">
<input type="text" class="form-control" placeholder="Search for hotels" />
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a>All Hotels </a></li>
<li class="divider"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
How can I make the first column ahead from the second col? Thanks!
I have a box on the left and a big div i want to wrap them with a border with a light color. I want the borter to be of square shape. How can i do this. I have also added the style of the progress bar incase if it helps. I want a border box with shade around the progress bar circle. I am using bootstrap version 4
border pic
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-3">
<span class="border">
<br><br><br>
<div class="progress blue">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">90%</div>
</div>
</span>
</span>
<br><br>
<div class="list-group">
Home
<div class="list-group-item">
List header
</div>
<div class="list-group-item">
<h4 class="list-group-item-heading">
List group item heading
</h4>
<p class="list-group-item-text">
...
</p>
</div>
<div class="list-group-item justify-content-between">
Help <span class="badge badge-secondary badge-pill">14</span>
</div> Home <span class="badge badge-light badge-pill">14</span>
</div>
</div>
<div class="col-md-9">
<br><br><br><br><br><br> <br><br><br>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link " data-toggle="tab" href="">Brief Information</a>
</li>
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href=""> Work Experience </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="">Education</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="">Voluntary Work</a>
</li>
</ul>
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">
Email address
</label>
<input type="email" class="form-control" id="exampleInputEmail1" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">
Password
</label>
<input type="password" class="form-control" id="exampleInputPassword1" />
</div>
<div class="form-group">
<label for="exampleInputFile">
File input
</label>
<input type="file" class="form-control-file" id="exampleInputFile" />
<p class="help-block">
Example block-level help text here.
</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox" /> Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">
Submit
</button>
</form>
</div>
</div>
</div>
</div>
</div>
I just add few CSS, I hope it'll help you out. Thanks
.light-border {
border: 1px solid #ccc;
}
and add light-border in <div class="row light-border">.
.light-border {
border: 1px solid #ccc;
}
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row light-border">
<div class="col-md-3">
<span class="border">
<br><br><br>
<div class="progress blue">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">90%</div>
</div>
</span>
</span>
<br><br>
<div class="list-group">
Home
<div class="list-group-item">
List header
</div>
<div class="list-group-item">
<h4 class="list-group-item-heading">
List group item heading
</h4>
<p class="list-group-item-text">
...
</p>
</div>
<div class="list-group-item justify-content-between">
Help <span class="badge badge-secondary badge-pill">14</span>
</div> Home <span class="badge badge-light badge-pill">14</span>
</div>
</div>
<div class="col-md-9">
<br><br><br><br><br><br> <br><br><br>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link " data-toggle="tab" href="">Brief Information</a>
</li>
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href=""> Work Experience </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="">Education</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="">Voluntary Work</a>
</li>
</ul>
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">
Email address
</label>
<input type="email" class="form-control" id="exampleInputEmail1" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">
Password
</label>
<input type="password" class="form-control" id="exampleInputPassword1" />
</div>
<div class="form-group">
<label for="exampleInputFile">
File input
</label>
<input type="file" class="form-control-file" id="exampleInputFile" />
<p class="help-block">
Example block-level help text here.
</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox" /> Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">
Submit
</button>
</form>
</div>
</div>
</div>
</div>
</div>
When I load my website homepage on a mobile device there is an ability to move the screen left and right, if I move it left it bounces back into place, but if I move it right it bounces back but will leave about 5px margin of white space throughout the entire webpage container except for the navbar. I have no content that is pushing the website width or margin-right. I am using bootstrap, i will upload a code snippet but the best way to see the issue is going to the website, it also only shows up on mobile devices, I don't have the problem when testing mobile view with google chrome mobile view. This problem only occurs on my homepage webpage, no other webpage has the problem.
Website link: http://buildingims.com/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="theme-color" content="#0054a5" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="theme-color" content="#333">
<title>Inspection Software for the Professional - Link Inspect Pro</title>
<link rel="shortcut icon" href="assets/img/favicon.ico?v=3">
</head>
<body>
<div id="ms-preload" class="ms-preload">
<div id="status">
<div class="spinner">
<div class="dot1"></div>
<div class="dot2"></div>
</div>
</div>
</div>
<div class="ms-site-container">
<div class="modal modal-primary" id="ms-account-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog animated zoomIn animated-3x" role="document">
<div class="modal-content">
<div class="modal-header d-block shadow-2dp no-pb">
<button type="button" class="close d-inline pull-right mt-2" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true"> <i class="zmdi zmdi-close"></i> </span>
</button>
<div class="modal-title text-center">
<a href="index.html">
<img alt="The Best Home Inspection Software" src="assets/img/logo.png" style="height: 50px; width:350px;" />
</a>
<!-- <span class="ms-logo ms-logo-white ms-logo-sm mr-1">LIP</span> <h3 class="no-m ms-site-title">Link Inspect <span>Pro</span> </h3> -->
</div>
<div class="modal-header-tabs">
<ul class="nav nav-tabs nav-tabs-full nav-tabs-2 nav-tabs-primary" role="tablist">
<li class="nav-item" role="presentation">
<i class="zmdi zmdi-account"></i> Login
</li>
<!-- <li class="nav-item" role="presentation"> <i class="zmdi zmdi-account-add"></i> Register </li>-->
<li class="nav-item" role="presentation">
<i class="zmdi zmdi-key"></i> Account Recovery
</li>
</ul>
</div>
</div>
<div class="modal-body">
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade active show" id="ms-login-tab">
<form autocomplete="off">
<fieldset>
<div class="form-group label-floating">
<div class="input-group"> <span class="input-group-addon"> <i class="zmdi zmdi-account"></i> </span>
<label class="control-label" for="ms-form-user">Email</label>
<input type="text" id="ms-form-user" class="form-control" required>
</div>
</div>
<div class="form-group label-floating">
<div class="input-group"> <span class="input-group-addon"> <i class="zmdi zmdi-lock"></i> </span>
<label class="control-label" for="ms-form-pass">Password</label>
<input type="password" id="ms-form-pass" class="form-control" required>
</div>
</div>
<div class="row mt-2">
<div class="col-md-6">
<div class="checkbox">
<label>
<input type="checkbox">Remember Me</label>
</div>
</div>
<div class="col-md-6">
<button class="btn btn-raised btn-primary pull-right">Login</button>
</div>
</div>
</fieldset>
</form>
<div class="text-center">
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="ms-recovery-tab">
<form>
<fieldset>
<div class="form-group label-floating">
<div class="input-group"> <span class="input-group-addon"> <i class="zmdi zmdi-email"></i> </span>
<label class="control-label" for="ms-form-email-re">Email</label>
<input type="email" id="ms-form-email-re" class="form-control" required/>
</div>
</div>
<button class="btn btn-raised btn-block btn-primary">Send Password</button>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<header class="ms-header ms-header-primary">
<div class="container container-full">
<div class="ms-title">
<a href="index.html">
<img alt="Link Inspect Pro Best Inspection Software" src="assets/img/logo.png" style="height:45px; width:350px;" />
</a>
</div>
<div class="header-right">
</div>
</div>
</header>
<nav class="navbar navbar-expand-md navbar-static ms-navbar ms-navbar-primary">
<div class="container container-full">
<div class="navbar-header" style="max-width:280px;">
<a class="navbar-brand" href="index.html">
<img alt="The Best Inspection Software 2018" src="assets/img/logo.png" style="width:100%; height:70%; " />
</a>
</div>
<div class="collapse navbar-collapse" id="ms-navbar">
<ul class="navbar-nav">
<li class="nav-item"> About Us
</li>
<li class="nav-item"> Features
</li>
<li class="nav-item dropdown"> Industry <i class="zmdi zmdi-chevron-down"></i>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="inspection-home.html">Home Inspection</a>
</li>
<li>
<a class="dropdown-item" href="inspection-compliance.html">Compliance Inspection</a>
</li>
<li>
<a class="dropdown-item" href="page-coming.html">Commercial Inspection</a>
</li>
<li>
<a class="dropdown-item" href="page-coming.html">Environmental Inspection</a>
</li>
<li>
<a class="dropdown-item" href="page-coming.html">Insurance Inspection</a>
</li>
</ul>
</li>
<li class="nav-item"> Contact
</li>
<li class="nav-item"> Login
</li>
<li class="nav-item">
Free Trial
</li>
</ul>
</div>
<a href="javascript:void(0)" class="ms-toggle-left btn-navbar-menu"> <i class="zmdi zmdi-menu"></i>
</a>
</div>
</nav>
<header class="ms-hero-page ms-hero-img-keyboard ms-hero-bg-dark color-white">
<div class="container index-1">
<div class="row">
<div class="col-lg-12">
<h1 class="text-uppercase typed-title">Inspection Software for the Professional <br><span class="color-primary typed-class"></span> </h1>
<p class="lead lead-sm color-light">Link Inspect Pro is a cloud based, comprehensive software that allows you to perform inspections, create reports, and keep your company organized.</p>
<ul class="ms-list-arrow">
<li>High-Speed servers and performance.</li>
<li>Comprehensive Software.</li>
<li>Professional Reports.</li>
<li>Perform Inspections.</li>
</ul>
</div>
<div class="col-lg-12 text-center">
Sign Up for Free Trial
Become a Network Inspector
</div>
</div>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="text-center ms-margin">
<a href="javascript:void(0)" class="btn btn-primary btn-raised btn-app" style="width:20%; min-width:200px">
<div class="btn-container"> <i class="fab fa-google-play"></i> <span style="text-transform:uppercase;">Get it on</span>
<br><strong>Google Play</strong>
</div>
</a>
<a href="javascript:void(0)" class="btn btn-primary btn-raised btn-app" style="width:20%; min-width:200px">
<div class="btn-container"> <i class="fa fa-apple"></i> <span>Download on the </span>
<br><strong>App Store</strong>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="container">
<section>
<h1 class="right-line">Features</h1>
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6 mb-2">
<div class="ms-icon-feature">
<div class="ms-icon-feature-icon rotate-icon"> <span class="ms-icon ms-icon-lg ms-icon-inverse"> <i class="fa fa-cloud"></i> </span>
</div>
<div class="ms-icon-feature-content">
<h4 class="color-primary">Cloud Hosting</h4>
<p>Hosted on AWS, data is synced and stored through the cloud so you can access all your data on any device with any network at any location.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mb-2">
<div class="ms-icon-feature">
<div class="ms-icon-feature-icon rotate-icon"> <span class="ms-icon ms-icon-lg ms-icon-inverse"> <i class="fa fa-clipboard"></i> </span>
</div>
<div class="ms-icon-feature-content">
<h4 class="color-primary">Professional Reports</h4>
<p>Sleek & Professional reports can be customized to ones own preference. As well as, delivere the report directly to the customer without ever leaving the site.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mb-2">
<div class="ms-icon-feature">
<div class="ms-icon-feature-icon rotate-icon"> <span class="ms-icon ms-icon-lg ms-icon-inverse"> <i class="fa fa-tablet"></i> </span>
</div>
<div class="ms-icon-feature-content">
<h4 class="color-primary">Mobile and Tablet Apps</h4>
<p>Link Inspect Pro apps for mobile devices allow seemless inspections to be done on site. Making inspections not only easy but quicker.</p>
</div>
</div>
</div>
</div>
<h1 class="right-line">Inspections</h1>
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6 mb-1">
<div class="ms-icon-feature">
<div class="ms-icon-feature-icon rotate-icon"> <span class="ms-icon ms-icon-lg ms-icon-inverse"> <i class="fa fa-shield"></i> </span>
</div>
<div class="ms-icon-feature-content">
<h4 class="color-primary">Request Inspection</h4>
<p>Never lose any information again with lead and quote tNever lose any information again with lead and quote tNever lose any information again with lead and quote t</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mb-1">
<div class="ms-icon-feature">
<div class="ms-icon-feature-icon rotate-icon"> <span class="ms-icon ms-icon-lg ms-icon-inverse"> <i class="fa fa-bars"></i> </span>
</div>
<div class="ms-icon-feature-content">
<h4 class="color-primary">Find an Inspector</h4>
<p>Never lose any information again with lead and quoteNever lose any information again with lead and quote tNever lose any information again with lead and quote t.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="ms-icon-feature">
<div class="ms-icon-feature-icon rotate-icon"> <span class="ms-icon ms-icon-lg ms-icon-inverse"> <i class="fa fa-cog"></i> </span>
</div>
<div class="ms-icon-feature-content">
<h4 class="color-primary">Inspector Network</h4>
<p>Create and edit templates, contract language, contactNever lose any information again with lead and quote tNever lose any information again with lead and quote t</p>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="wrap wrap-mountain">
<div class="container">
<h2 class="text-center text-light mb-6">Inspection Software created with <strong>You</strong> in Mind</h2>
<div class="row">
<div class="col-lg-6 order-lg-2 mb-4 center-block">
<img src="assets/img/demo/mock.png" alt="Link Inspect Pro Best Inspection Software" class="img-fluid center-block" style="max-height:400px">
</div>
<div class="col-lg-6 order-lg-1 pr-6">
<div class="text-center"> Learn More about LIP <i class="zmdi zmdi-arrow-right"></i>
</div>
</div>
</div>
</div>
</div>
<div class="container mt-6 mb-1">
<h2 class="text-center text-dark mb-6">Inspector Network</h2>
<div class="row">
<div class="col-lg-6 order-lg-2 pr-6">
</div>
<div class="col-lg-6 order-lg-1 mb-4 center-block">
<img src="assets/img/demo/mock.png" alt="Link Inspect Pro Best Inspection Software" class="img-fluid center-block" style="max-height:400px">
</div>
</div>
</div>
<style>
.trial-block{background: url(assets/img/black_wall.png) no-repeat fixed; background-size: cover; background-position: center center !important; padding: 80px 0;}.trial-form-block{background: #fff; border-radius: 4px; margin: 0 auto; max-width: 600px; padding: 35px; width: 100%;}
</style>
<section id="free-trial">
<div class="trial-block">
<div class="trial-form-block">
<div class="text-center">
<h2>Link Inspect Pro Trial</h2>
<p>Use Link Inspect Pro Software for 30 days or complete 3 inspections before subscribing</p>
</div>
<form action="https://linkinspectpro.com/users/registration" method="post" accept-charset="utf-8" name="registration_form" id="registration_form">
<div class="row">
<div class="col-sm-6">
<div class="form-group row label-floating">
<label class="control-label" for="firstname">First Name</label>
<input type="text" name="firstname" value="" id="firstname" class="form-control" maxlength="50" required/>
</div>
<div class="form-group row label-floating">
<label class="control-label" for="lastname">Last Name</label>
<input type="text" name="lastname" value="" id="lastname" class="form-control" maxlength="50" required/>
</div>
<div class="form-group row label-floating">
<label class="control-label" for="email">Email</label>
<input type="text" name="email" value="" id="email" maxlegth="150" class="form-control" required/>
</div>
<div class="form-group row label-floating">
<label class="control-label" for="password">Password</label>
<input type="password" name="password" value="" id="password" maxlength="40" class="form-control" required/>
</div>
<div class="form-group row label-floating">
<label class="control-label" for="passconf">Confirm Password</label>
<input type="password" name="passconf" value="" id="passconf" maxlength="40" class="form-control" required/>
</div>
<div class="form-group row label-floating">
<label class="control-label" for="mobile_number">Phone Number</label>
<input type="number" (keypress)="checkIfNumber($event)" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" name="mobile_number" value="" id="mobile_number" class="form-control" maxlength="12" required/>
</div>
<div class="form-group row" style="margin-top:1px">
<select name="timezone" id="timezone" class="form-control selectpicker" data-live-search="true" data-dropup-auto="false" required>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group row" style="margin-top:6px">
<select id="country" name="country" class="form-control selectpicker" data-live-search="true" data-dropup-auto="false" required>
<option value="" disabled selected>Please Select a Country</option>
<option value="227">United States</option>
<option value="39">Canada</option>
</select>
</div>
<div class="form-group row label-floating">
<label class="control-label" for="address1">Address 1</label>
<input type="text" name="address1" value="" id="address1" class="form-control" required/>
</div>
<div class="form-group row label-floating">
<label class="control-label" for="address2">Address 2</label>
<input type="text" name="address2" value="" id="address2" class="form-control" />
</div>
<div class="form-group row label-floating">
<label class="control-label" for="city">City</label>
<input type="text" name="city" value="" id="city" class="form-control" required/>
</div>
<div class="form-group row" style="margin-top:4px">
<select name="state" id="state" class="form-control selectpicker" data-live-search="true" data-dropup-auto="false" required>
<option value="" disabled selected>Please Select a State</option>
</div>
<div class="form-group row label-floating">
<label class="control-label" for="zipcode">Zipcode</label>
<input type="text" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" name="zipcode" value="" id="zipcode" class="form-control" maxlength="10" required/>
</div>
</div>
</div>
<div class="checkbox text-center" style="margin-top:20px;">
</div>
<div class="text-center" style="margin-top:19px;">
<button name="mysubmit" type="submit" id="mysubmit" title="Start Trial" class="btn btn-warning btn-raised mr-1" value="submit">Start Trial</button>
</div>
</form>
</div>
</div>
</section>
<section class="pricing-table">
<div class="container">
<div class="block-heading">
<h1>Payment Plan</h1>
<p>Subscribe for unlimited benefits.</p>
</div>
<div class="row no-gutters">
<div class="col-lg-3">
</div>
<div class="col-lg-6">
<div class="price-table price-table-info center prominent">
<div class="item"> <div class="ribbon">Subscribe</div>
<header class="price-table-header">
<h3> <sup>$</sup>30.00 <sub>/mo.</sub> </h3>
</header></div>
<div class="price-table-body">
<ul class="price-table-list">
<li> Cloud hosting and synchronization.<i class="fas fa-check" style="float: right;"></i></li>
<li> 3 free inspections included.<i class="fas fa-check" style="float: right;"></i></li>
<li> Create custom inspection workflows.<i class="fas fa-check" style="float: right;"></i></li>
<li> 2GB storage.<i class="fas fa-check" style="float: right;"></i></li>
<li> Additional inspections only $10 each.<i class="fas fa-check" style="float: right;"></i></li>
</ul>
<div class="text-center">
Buy now
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<aside class="ms-footbar">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 ms-footer-col">
<div class="ms-footbar-block text-center">
<div class="ms-footbar-block">
<div class="ms-footbar-title">
<ul class="list-inline">
<li class="list-inline-item">
Home
</li>
<li class="list-inline-item">
|
</li>
<li class="list-inline-item">
About
</li>
<li class="list-inline-item">
|
</li>
<li class="list-inline-item">
Features
</li>
<li class="list-inline-item">
|
</li>
<li class="list-inline-item">
Contact
</li>
<li class="list-inline-item">
|
</li>
<li class="list-inline-item">
Login
</li>
<li class="list-inline-item">
|
</li>
<li class="list-inline-item">
Register
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-12 text-center text-md-center">
<ul class="list-inline">
<li class="list-inline-item">
Terms of Use
</li>
<li class="list-inline-item">
|
</li>
<li class="list-inline-item">
Privacy Policy
</li>
</ul>
</div>
</div>
</div>
</aside>
<footer class="ms-footer">
<div class="container">
<p>© Copyright 2018. <br>All Rights Reserved by BIMS Corp</p>
</div>
</footer>
<div class="btn-back-top">
<a href="#" data-scroll id="back-top" class="btn-circle btn-circle-primary btn-circle-sm btn-circle-raised "> <i class="zmdi zmdi-long-arrow-up"></i>
</a>
</div>
</div>
<div class="ms-slidebar sb-slidebar sb-left sb-style-overlay" id="ms-slidebar">
<div class="sb-slidebar-container">
<header class="ms-slidebar-header">
<div class="ms-slidebar-login">
<i class="zmdi zmdi-account"></i> Login
<i class="zmdi zmdi-account-add"></i> Register
</div>
<div class="ms-slidebar-title">
<div class="ms-slidebar-t">
<h3>Link Inspect <span>Pro</span> </h3>
</div>
</div>
</header>
<ul class="ms-slidebar-menu" id="slidebar-menu" role="tablist" aria-multiselectable="true">
<li>
<a class="link" href="index.html">Home</a>
</li>
<li>
<a class="link" href="page-about.html">About Us</a>
</li>
<li>
<a class="link" href="page-features.html">Features</a>
</li>
<li class="card" role="tab" id="sch6">
<a class="collapsed" role="button" data-toggle="collapse" href="#sc6" aria-expanded="false" aria-controls="sc6">Industry</a>
<ul id="sc6" class="card-collapse collapse" role="tabpanel" aria-labelledby="sch6" data-parent="#slidebar-menu">
<li>
<a class="dropdown-item" href="inspection-home.html">Home Inspection</a>
</li>
<li>
<a class="dropdown-item" href="inspection-compliance.html">Compliance Inspection</a>
</li>
<li>
<a class="dropdown-item" href="page-coming.html">Commercial Inspection</a>
</li>
<li>
<a class="dropdown-item" href="page-coming.html">Environmental Inspection</a>
</li>
<li>
<a class="dropdown-item" href="page-coming.html">Insurance Inspection</a>
</li>
</ul>
</li>
<li>
<a class="link" href="page-contact.html">Contact Us</a>
</li>
</ul>
<div class="ms-slidebar-social ms-slidebar-block">
<h4 class="ms-slidebar-block-title">Social Links</h4>
<div class="ms-slidebar-social">
</div>
</div>
</div>
</div>
</body>
</html>
only because you have a padding of 35px on the class .trial-form-block, you have to take care of it on mobile screens with smaller values using media queries
I need the following controls in one line and aligned right. I need the two icons appear inside the textbox at the right corner. And also both the controls to be aligned right.
Here is the Plunker
<div class="col-md-12">
<div class="col-md-6">
<input type="text" id="txtDateRange"
class="form-control input-md" name="txtDateRange"
placeholder="Select Range"
ng-model="Model.RageDates" />
<span><i class="glyphicon glyphicon-remove" ></i></span>
<span class="form-control-feedback"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span>
</div>
<div class="col-md-6" style="float: right;">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>{{ selectedItem ? selectedItem.Label : 'ALL LOCATIONS' }}</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li ng-repeat="Label in Summary.Locations">
<a ng-click="dropboxitemselected(Label)">
{{Label.Label}}
</a>
</li>
</ul>
</div>
</div>
Bootstrap styles .form-control input elements as BLOCK (they are usually inline).
If you restyle that specific input element to inline-block and reduce the width a bit (unsure why that was necessary - perhaps only for SO snippet environment), you will be able to use margin-left on the span elements to walk them over a bit.
span.a1{margin-left:-50px;border:1px solid green;}
span.a2{border:1px solid red;}
#txtDateRange{display:inline-block;width:99.3%;}
div.a1 {display:inline-block;margin-left:-50px;border:1px solid green;}
div.a2 {display:inline-block; border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<p> </p>
<div class="col-md-12">
<div class="col-md-6">
<input type="text" id="txtDateRange"
class="form-control input-md" name="txtDateRange"
placeholder="Select Range"
ng-model="Model.RageDates" />
<span class="a1"><i class="glyphicon glyphicon-remove" ></i></span>
<span class="a2 xform-control-feedback"><i class="glyphicon glyphicon-calendar xfa xfa-calendar"></i></span>
</div>
<div class="col-md-6" style="float: right;">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>{{ selectedItem ? selectedItem.Label : 'ALL LOCATIONS' }}</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li ng-repeat="Label in Summary.Locations">
<a ng-click="dropboxitemselected(Label)">
{{Label.Label}}
</a>
</li>
</ul>
</div>
</div>
You may do it like this:
.col-md-6{
float: right;
}
.wrapper{
overflow: hidden;
}
#txtDateRange{
width: 100%;
}
<div class="col-md-12">
<div class="col-md-6">
<span><i class="glyphicon glyphicon-remove" ></i></span>
<span class="form-control-feedback"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span>
</div>
<div class="wrapper">
<input type="text" id="txtDateRange"
class="form-control input-md" name="txtDateRange"
placeholder="Select Range"
ng-model="Model.RageDates" />
</div>
</div>
Im having some problems with layout of bootstrap.
I have looked at the link below to find some details about the situation.
How can I get a Bootstrap column to span multiple rows?
However, i couldnt figure out how to fix this issue:
----------What i have----------
Picture current
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- First row, directions -->
<div class="row top-buffer">
<div class="col-md-12">
<br><br><br><br>
</div>
</div>
<div class="row">
<div class="col-md-2">
<a class="btn btn-primary btn-block btn-group-fill-height" href="home.html" role="button"> Home </a>
<br>
<form class="form-inline">
<div class="btn-group btn-group-lg btn-group-justified btn-group-fill-height">
<a class="btn btn-primary" href="results.html" role="button"> < </a>
<a class="btn btn-secondary " role="button"> 1/3 </a>
<a class="btn btn-primary " href="results.html" role="button"> > </a>
</div>
</form>
</div>
<div class="col-md-1">
</div>
<div class="row">
<div class="col-md-4">
<label class="checkbox-inline"><input type="checkbox" value=""></label>
<label class="checkbox-inline"><input type="checkbox" value=""></label>
<label class="checkbox-inline"><input type="checkbox" value=""></label>
<br>
<div class="form-group">
<label for="search">Search</label>
<input type="text" class="form-control" id="search">
</div>
</div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-1"></div>
<div class="col-md-4">
<form class="form-inline">
<div class="btn-group btn-group-lg btn-group-justified btn-group-fill-height">
<a class="btn btn-primary" href="results.html" role="button"> < </a>
<a class="btn btn-secondary " role="button"> 1/3 </a>
<a class="btn btn-primary " href="results.html" role="button"> > </a>
</div>
</form>
</div>
</div>
<div class="col-md-1">
</div>
</div>
</div>
</body>
</html>
----------What i want----------
picture wanted
*Note, the extended box (left) should fill the entire row
You cannot span rows or columns as if them were tabe's. You should change your markup a little
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.row { border: 1px solid #f00;}
[class*="col-"] { border: 1px solid #0f0; }
</style>
<div class="container">
<div class="row top-buffer">
<div class="col-xs-12">
</div>
</div>
<div class="row">
<div class="col-xs-2">
<a class="btn btn-primary btn-block btn-group-fill-height" href="home.html" role="button"> Home </a>
<br>
<form class="form-inline">
<div class="btn-group btn-group-lg btn-group-justified btn-group-fill-height">
<a class="btn btn-primary" href="results.html" role="button"> < </a>
<a class="btn btn-secondary " role="button"> 1/3 </a>
<a class="btn btn-primary " href="results.html" role="button"> > </a>
</div>
</form>
</div>
<div class="col-xs-1">
</div>
<div class="col-xs-4">
<label class="checkbox-inline"><input type="checkbox" value=""></label>
<label class="checkbox-inline"><input type="checkbox" value=""></label>
<label class="checkbox-inline"><input type="checkbox" value=""></label>
<br>
<div class="form-group">
<label for="search">Search</label>
<input type="text" class="form-control" id="search">
</div>
<form class="form-inline">
<div class="btn-group btn-group-lg btn-group-justified btn-group-fill-height">
<a class="btn btn-primary" href="results.html" role="button"> < </a>
<a class="btn btn-secondary " role="button"> 1/3 </a>
<a class="btn btn-primary " href="results.html" role="button"> > </a>
</div>
</form>
</div>
</div>
</div>
I changed the columns from md to xs just to prevent them from going responsive inside the snippet frame.