I am in need of your expertise to create these particular input fields like on the image below:
Can someone help me here to create it?
I have a bit of code but it is not working like on the image
<div class="col-lg-1 pr-0">
<div class="input-box">
<label class="label-text">Passengers</label>
<div class="form-group">
<div class="dropdown dropdown-contain">
<a class="dropdown-toggle dropdown-btn" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
<i class="la la-user form-icon"></i>
<span><span class="guest_flights d-block text-center">0</span></span>
</a>
<div class="dropdown-menu dropdown-menu-wrap">
<div class="dropdown-item adult_qty">
<div class="qty-box d-flex align-items-center justify-content-between">
<label>
<i class="la la-user"></i> Adults <!--<small>(+12)</small>-->
</label>
<div class="qtyBtn d-flex align-items-center">
<input type="text" name="adults" id="fadults" value="1" class="qtyInput_flights">
</div>
</div>
</div>
<div class="dropdown-item child_qty">
<div class="qty-box d-flex align-items-center justify-content-between">
<label>
<i class="la la-female"></i> Childs <!--<small>(-12)</small>-->
</label>
<div class="qtyBtn d-flex align-items-center">
<input type="text"name="childs" id="fchilds" value="0" class="qtyInput_flights">
</div>
</div>
</div>
<div class="dropdown-item infant_qty">
<div class="qty-box d-flex align-items-center justify-content-between">
<label>
<i class="la la-female"></i> Infants <!--<small>(-12)</small>-->
</label>
<div class="qtyBtn d-flex align-items-center">
<input type="text" name="childs" id="finfant" value="0" class="qtyInput_flights">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Related
I'm trying to use this bootstrap signup template here, but when I render it the icons for the user, email, password, etc. are missing.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<section class="vh-100" style="background-color: #eee;">
<div class="container h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-lg-12 col-xl-11">
<div class="card text-black" style="border-radius: 25px;">
<div class="card-body p-md-5">
<div class="row justify-content-center">
<div class="col-md-10 col-lg-6 col-xl-5 order-2 order-lg-1">
<p class="text-center h1 fw-bold mb-5 mx-1 mx-md-4 mt-4">Sign up</p>
<form class="mx-1 mx-md-4">
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-user fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input type="text" id="form3Example1c" class="form-control" />
<label class="form-label" for="form3Example1c">Your Name</label>
</div>
</div>
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-envelope fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input type="email" id="form3Example3c" class="form-control" />
<label class="form-label" for="form3Example3c">Your Email</label>
</div>
</div>
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-lock fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input type="password" id="form3Example4c" class="form-control" />
<label class="form-label" for="form3Example4c">Password</label>
</div>
</div>
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-key fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input type="password" id="form3Example4cd" class="form-control" />
<label class="form-label" for="form3Example4cd">Repeat your password</label>
</div>
</div>
<div class="form-check d-flex justify-content-center mb-5">
<input class="form-check-input me-2" type="checkbox" value="" id="form2Example3c" />
<label class="form-check-label" for="form2Example3">
I agree all statements in Terms of service
</label>
</div>
<div class="d-flex justify-content-center mx-4 mb-3 mb-lg-4">
<button type="button" class="btn btn-primary btn-lg">Register</button>
</div>
</form>
</div>
<div class="col-md-10 col-lg-6 col-xl-7 d-flex align-items-center order-1 order-lg-2">
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-registration/draw1.webp"
class="img-fluid" alt="Sample image" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
When I render it via the code snippet plugin on stack overflow it just removes the icons entirely, but if you look at the example at the link you can see the icons, but what I get on my project is broken image indicators in place of the icons. It's not clear to me from the HTML though where the icons are loaded (unlike e.g. the image where it's super clear). How do I get it to correctly render the icons?
The icons you are trying to use i think are part of MDBootstrap that is a UI kit built on Bootstrap, so if you want the icons to render properly you got to include MDBootstrap in your project.
If you don't want to use that you can always use official Bootstrap 5 icons (https://icons.getbootstrap.com/, https://getbootstrap.com/docs/5.1/extend/icons/) or the recommended by Bootstrap developers Fontawesome icons (https://fontawesome.com/)
The following is signup.html when a user fills the form fields then presses on the button or pressing the ENTER key nothing happens and Flask only shows the GET requests that were made to get the page before filling users
No POST request is being made
changing action="{{url_for('UI.signup')}}" TO action='/signup' does not fix the problem
{% block content%}
<section class="vh-100" style="background-color: #eee;">
<div class="container h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-lg-12 col-xl-11">
<div class="card text-black" style="border-radius: 25px;">
<div class="card-body p-md-5">
<div class="row justify-content-center">
<div class="col-md-10 col-lg-6 col-xl-5 order-2 order-lg-1">
<p class="text-center h1 fw-bold mb-5 mx-1 mx-md-4 mt-4">Sign up</p>
<form action="{{url_for('UI.signup')}}" method="POST" class="mx-1 mx-md-4" >
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-user fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input name="username" type="text" id="form3Example1c" class="form-control" />
<label class="form-label" for="form3Example1c">Username</label>
</div>
</div>
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-envelope fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input name="email" type="email" id="form3Example3c" class="form-control" />
<label class="form-label" for="form3Example3c">Email</label>
</div>
</div>
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-lock fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input name='passwrd1' type="password" id="form3Example4c" class="form-control" />
<label class="form-label" for="form3Example4c">Password</label>
</div>
</div>
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-key fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input name='passwrd2' type="password" id="form3Example4cd" class="form-control" />
<label class="form-label" for="form3Example4cd">Repeat your password</label>
</div>
</div>
<div class="d-flex justify-content-center mx-4 mb-3 mb-lg-4">
<button type="button" class="btn btn-primary btn-lg">Register</button>
</div>
</form>
</div>
<div class="col-md-10 col-lg-6 col-xl-7 d-flex align-items-center order-1 order-lg-2">
<img src="{{url_for('UI.static', filename='.jpg')}}" class="img-fluid" alt="Sample image">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{% endblock%}
I wish to use this exact html for the signin page but for some reason it is not creating post requests after filling the data
<button type="button" class="btn btn-primary btn-lg">Register</button>
type="button" creates a button that doesn't do anything. It exists solely to hook JavaScript onto.
Take that out (type="submit" is the default) and the button will submit the form when clicked.
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
How can I get these two divs to align in a row horizontally and keep the form-group intact?
No matter what kind of col-ms-sizing I do the two input groups will not align on the same line and I believe this is only happening because of the form-group class.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="container-fluid" ng-controller="PriceController as formCtrl">
<form class="form-horizontal" role="form" ng-submit="processForm()">
<div class="form-group">
<label for="inputPrice" class="col-sm-1 control-label">Price</label>
<div class="col-sm-5 input-group"> <span class="input-group-addon">$</span>
<input type="text" class="form-control" id="inputPrice" name="inputPrice"> <span class="input-group-addon">.95</span>
</div>
<label for="inputDate" class="col-sm-1 control-label">Date</label>
<div class="col-sm-5 input-group">
<input type="text" class="form-control" id="inputDate" name="inputDate" placeholder="Date">
<div class="input-group input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Date <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Today
</li>
<li>Tomorrow
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Make sure you wrap your inputs with a <div class="row"> and then make separate divs for the col-sm-* classes. I replaced col-sm-* with col-xs-* to ensure the snippet would not wrap.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="container-fluid" ng-controller="PriceController as formCtrl">
<form class="form-horizontal" role="form" ng-submit="processForm()">
<div class="form-group">
<div class="row">
<div class="col-xs-1">
<label for="inputPrice" class="control-label">Price</label>
</div>
<div class="col-xs-5">
<div class="input-group"> <span class="input-group-addon">$</span>
<input type="text" class="form-control" id="inputPrice" name="inputPrice"> <span class="input-group-addon">.95</span>
</div>
</div>
<div class="col-xs-1">
<label for="inputDate" class="control-label">Date</label>
</div>
<div class="col-xs-5">
<div class="input-group">
<input type="text" class="form-control" id="inputDate" name="inputDate" placeholder="Date">
<div class="input-group input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Date <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Today
</li>
<li>Tomorrow
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
You just have to wrap your inputs inside of col elements basically just nested columns. Make sure you are also using the correct sized columns for the correct screen sizes.
http://jsfiddle.net/kwd9cqn9/1/
<div class="container">
<div class="container-fluid">
<form class="form-horizontal">
<div class="form-group">
<div class="col-lg-6 col-sm-6 col-xs-6">
<label for="inputPrice" class="col-sm-1 control-label">Price</label>
<div class="col-lg-12 input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="inputPrice" name="inputPrice" />
<span class="input-group-addon">.95</span>
</div>
</div>
<div class="col-lg-6 col-sm-6 col-xs-6">
<label for="inputDate" class="col-sm-1 control-label">Date</label>
<div class="col-lg-12 input-group">
<input type="text" class="form-control" id="inputDate" name="inputDate" placeholder="Date" />
<div class="input-group input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Date <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Today</li>
<li>Tomorrow</li>
</ul>
</div>
</div>
</div>
</div>
</form>
</div>