Bootrap Vertical Input Group

Developer
Brent Jackson
Size
2,269 Kb
Views
28,336
  1. Bootrap Vertical Input Group Previews
  2. Bootrap Vertical Input Group HTML Codes
  3. Bootrap Vertical Input Group CSS Codes

How do I make an bootrap vertical input group?

Like what Pure CSS has. ¯_(ツ)_/¯ . What is a bootrap vertical input group? How do you make a bootrap vertical input group? This script and codes were developed by Brent Jackson on 15 September 2022, Thursday.

Bootrap Vertical Input Group Previews
IQ Test

Bootrap Vertical Input Group - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bootrap Vertical Input Group</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container-fluid"> <h1>Bootstrap Vertical Input Group</h1> <p> Like in <a href="https://purecss.io/forms/#grouped-inputs" target="_blank"> Pure CSS </a> </p> <form> <fieldset class="input-group-vertical"> <div class="form-group"> <label class="sr-only">Email Address</label> <input type="text" class="form-control" placeholder="Email Address"> </div> <div class="form-group"> <label class="sr-only">Username</label> <input type="text" class="form-control" placeholder="Username"> </div> <div class="form-group"> <label class="sr-only">Password</label> <input type="text" class="form-control" placeholder="Password"> </div> <div class="form-group"> <label class="sr-only">Spirit Animal</label> <input type="text" class="form-control" placeholder="Spirit Animal"> </div> </fieldset> <button type="submit" class="btn btn-primary">Sign Up</button> <button type="reset" class="btn btn-link">Cancel</button> </form>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
</body>
</html>

Bootrap Vertical Input Group - Script Codes CSS Codes

.input-group-vertical { margin-bottom: 10px;
}
.input-group-vertical .form-control { border-radius: 0;
}
.input-group-vertical .form-group { margin-bottom: 0;
}
.input-group-vertical .form-group:not(:last-child) .form-control:not(:focus) { border-bottom-color: transparent;
}
.input-group-vertical .form-group:first-child .form-control { border-top-left-radius: 3px; border-top-right-radius: 3px;
}
.input-group-vertical .form-group:last-child .form-control { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; top: -2px;
}
Bootrap Vertical Input Group - Script Codes
Bootrap Vertical Input Group - Script Codes
Home Page Home
Developer Brent Jackson
Username jxnblk
Uploaded September 15, 2022
Rating 3
Size 2,269 Kb
Views 28,336
Do you need developer help for Bootrap Vertical Input Group?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Brent Jackson (jxnblk) Script Codes
Name
Whitespace Mixins
Fitter Happier Text
Bootstrap Thumbnail Radio Group
Paginated Tiles with CSS Multi-Column Layout
Building SVG Icons with React
Dropbar
Colors
Chrome-like Spinning Loading Indicator
Absolute Grid
React 0.14 Template
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!