diff options
add input groups code
1 files changed, 42 insertions, 18 deletions
| -rw-r--r-- | demo/index.html | 60 |
diff --git a/demo/index.html b/demo/index.html index 26d277d..59ced86 100644 --- a/demo/index.html +++ b/demo/index.html @@ -8,6 +8,11 @@ header > h4 { margin-top: 4rem; } + .bg-grey { + background-color: #efefef; + padding: 1rem; + border-radius: .3rem; + } </style> </head> <body> @@ -88,50 +93,50 @@ </section> <div class="columns"> <div class="column"> - First column + <div class="bg-grey">First column</div> </div> <div class="column"> - Second column + <div class="bg-grey">Second column</div> </div> <div class="column"> - Third column + <div class="bg-grey">Third column</div> </div> <div class="column"> - Fourth column + <div class="bg-grey">Fourth column</div> </div> <div class="column"> - Fifth column + <div class="bg-grey">Fifth column</div> </div> <div class="column"> - Sixth column + <div class="bg-grey">Sixth column</div> </div> </div> <div class="columns"> <div class="column col-4"> - First column + <div class="bg-grey">First column</div> </div> <div class="column col-4"> - Second column + <div class="bg-grey">Second column</div> </div> <div class="column"> - Third column + <div class="bg-grey">Third column</div> </div> <div class="column"> - Fourth column + <div class="bg-grey">Fourth column</div> </div> </div> <div class="columns"> <div class="column col-2"> - First column + <div class="bg-grey">First column</div> </div> <div class="column col-4"> - Second column + <div class="bg-grey">Second column</div> </div> <div class="column col-4"> - Third column + <div class="bg-grey">Third column</div> </div> <div class="column col-2"> - Fourth column + <div class="bg-grey">Fourth column</div> </div> </div> </section> @@ -230,11 +235,11 @@ <form> <div class="form-group"> <label class="form-label" for="input-example-1">Name</label> - <input class="form-input" type="text" id="input-example-1" placeholder="Name"> + <input class="form-input" type="text" id="input-example-1" placeholder="Name" /> </div> <div class="form-group"> <label class="form-label" for="input-example-2">Email</label> - <input class="form-input" type="email" id="input-example-2" placeholder="Email"> + <input class="form-input" type="email" id="input-example-2" placeholder="Email" /> </div> <div class="form-group"> <select class="form-select"> @@ -281,13 +286,13 @@ <div class="form-group columns"> <label class="form-label col-3" for="input-example-4">Name</label> <div class="col-9"> - <input class="form-input" type="text" id="input-example-4" placeholder="Name"> + <input class="form-input" type="text" id="input-example-4" placeholder="Name" /> </div> </div> <div class="form-group columns"> <label class="form-label col-3" for="input-example-5">Email</label> <div class="col-9"> - <input class="form-input" type="email" id="input-example-5" placeholder="Email"> + <input class="form-input" type="email" id="input-example-5" placeholder="Email" /> </div> </div> <div class="form-group columns"> @@ -348,6 +353,25 @@ </div> </section> + <section id="input-groups"> + <header class="text-center"><h4>input groups</h4></header> + <div class="columns"> + <div class="column"> + <div class="input-group"> + <span class="input-group-addon">slack.com/</span> + <input type="text" class="form-input" placeholder="site name" /> + </div> + </div> + <div class="column"> + <div class="input-group"> + <span class="input-group-addon">slack.com/</span> + <input type="text" class="form-input" placeholder="site name" /> + <button class="btn btn-primary input-group-btn">Submit</button> + </div> + </div> + </div> + </section> + <section id="media"> <header class="text-center"><h4>media</h4></header> <div class="columns"> |