I have an below code.I would like to know how to increase the height of "container" class.I have check in google but unable to find any solution.Please check my below code and advise how to do this
<main class="d-flex align-items-center min-vh-100 py-3 py-md-0">
<div class="container">
<div class="card login-card">
<div class="row no-gutters">
<div class="col-md-5">
<img src="assets/images/login2.jpg" alt="login" class="login-card-img" >
</div>
<div class="col-md-7">
<div class="card-body">
<div class="brand-wrapper">
<img src="assets/images/logo.jpg" alt="logo" class="logo" style="width:130px;height:130px">
</div>
<p class="login-card-description">Sign In</p>
<form action="#!">
<div class="form-group">
<label for="email" class="sr-only">Email</label>
<input type="email" name="email" id="email" class="form-control" placeholder="Email address">
</div>
<div class="form-group mb-4">
<label for="password" class="sr-only">Password</label>
<input type="password" name="password" id="password" class="form-control" placeholder="***********">
</div>
<input name="login" id="login" class="btn btn-block login-btn mb-4 text-align: center;" type="button" value="Login">
</form>
<div class="form-group">
<label for="password" class="sr-only">Password</label>
<input type="password" name="password" id="password" class="form-control" placeholder="Password">
</div>
</div>
</main>
In css file:
.container{
height: 1000px
}
OR
<div class="container" style= "height:1000px;">
Keep in mind that div and main are both block elements so it can be an idea to inspect that the main element does not block the height increase of the div.
You can add class to your container, just like in your <main:
<div class="container min-vh-100">
Try any one of the ways:
External CSS
.container {
height: 1000px
}
Inline CSS
<div class="container" style="height: 1000px;">
Maybe you want only pass the image down, just like this?
<img src="assets/images/login2.jpg" alt="login" class="login-card-img" style="margin-top: 150px" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<main class="d-flex align-items-center min-vh-100 py-3 py-md-0">
<div class="container">
<div class="card login-card">
<div class="row no-gutters">
<div class="col-md-5">
<img src="assets/images/login2.jpg" alt="login" class="login-card-img" style="margin-top: 150px" />
</div>
<div class="col-md-7">
<div class="card-body">
<div class="brand-wrapper">
<img src="assets/images/logo.jpg" alt="logo" class="logo" style="width:130px;height:130px">
</div>
<p class="login-card-description">Sign In</p>
<form action="#!">
<div class="form-group">
<label for="email" class="sr-only">Email</label>
<input type="email" name="email" id="email" class="form-control" placeholder="Email address">
</div>
<div class="form-group mb-4">
<label for="password" class="sr-only">Password</label>
<input type="password" name="password" id="password" class="form-control" placeholder="***********">
</div>
<input name="login" id="login" class="btn btn-block login-btn mb-4 text-align: center;" type="button" value="Login">
</form>
<div class="form-group">
<label for="password" class="sr-only">Password</label>
<input type="password" name="password" id="password" class="form-control" placeholder="Password">
</div>
</div>
</main>
Related
How to place lines between columns. This is the below code i am working on but still not working. is there any way we can add separator? i added the screen shot what i am 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>
Expecting to place this code to show lines:
<div class="col-md-2 col-sm-4">
<div class="line">|</div>
<div>OR</div>
<div class="line">|</div>
</div>
I want output like this.
|
Name | Email
OR
Phone Button |
|
I'm not sure if this is what you're trying to do.
.v-line {
width: 5px;
background-color: teal;
}
.or {
background-color: #e9ecef;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron jumbotron-fluid controls">
<div class="container">
<form class="form-form-submit">
<div class="d-flex flex-row">
<div class="d-inline-block w-50">
<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_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>
<div class="v-line d-flex align-items-center justify-content-center">
<span class="or">OR</span>
</div>
<div class="d-inline-block w-50">
<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="col">
<div class="btn-group" style="padding-top: 25px;">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</div>
</div>
</div>
</form>
</div>
You can shrink the fields by one col unit, so that both the left and right fields are col-md-5. This will give them a total column span of 10, leaving 2 spare (as Bootstrap columns always total 12).
From here, you can add offset-md-2 to the right-most columns to create a gap composed of 2 columns:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="jumbotron jumbotron-fluid controls">
<div class="container">
<form class="form-form-submit">
<div class="row">
<div class="col-md-5">
<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-md-5 offset-md-2">
<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-md-5">
<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-md-5 offset-md-2">
<div class="btn-group" style="padding-top: 25px;">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</div>
</div>
</form>
</div>
Note that you cannot (easily) make the gap comprise of only 1 unit while keeping both columns the same length (as the total column count is even). However, you can make use of any combination of column + offset + column that totals twelve. For example, col-md-5 + offset-md-1 + col-md-6.
I know there is a better way to do this but right now this is I can remember. Basically, just create an empty col div in between the two columns:
<div class="jumbotron jumbotron-fluid controls">
<div class="container">
<form class="form-form-submit">
<div class="row">
<div class="col-5"`enter code here`>
<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-1">
</div>
<div class="col-6">
<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-5">
<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-1">
</div>
<div class="col-6">
<div class="btn-group" style="padding-top: 25px;">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</div>
</div>
</form>
</div>
I'm trying to make a form with bootstrap 4, and I have a problem with align one column to the bottom:
And this is my code:
<div class="col-md-3 m-2">
<div class="row">
<div class="col-12 d-flex flex-column border border-primary bg-light rounded form-group h-100">
<h3>text</h3>
<div class="form-group">
<label for="i1">i1</label>
<input type="text" class="form-control" name="i1" id="i1" placeholder="i1" value="223108853">
</div>
<div class="form-group">
<label for="i1">i1</label>
<input type="text" class="form-control" name="i1" id="i1" placeholder="i1" value="223108853">
</div>
</div>
<div class="col-12 border border-primary bg-light rounded form-group h-100 col align-self-end">
<h3>bottom box</h3>
<div class="form-group">
<label for="i1">i1</label>
<input type="text" class="form-control" name="i1" id="i1" placeholder="i1" value="223108853">
</div>
<div class="form-group">
<label for="i1">i1</label>
<input type="text" class="form-control" name="i1" id="i1" placeholder="i1" value="223108853">
</div>
<div class="form-group">
<label for="i1">i1</label>
<input type="text" class="form-control" name="i1" id="i1" placeholder="i1" value="223108853">
</div>
<div class="form-group">
<label for="i1">i1</label>
<input type="text" class="form-control" name="i1" id="i1" placeholder="i1" value="223108853">
</div>
</div>
</div>
</div>
https://jsfiddle.net/rotor82/c7ugmsw8/3/
I'm not sure how to fix it, I tried align-self-end but it doesn't work.
If you set the following element to margin-bottom: 0 (it's currently set to 15px), you'll solve your problem.
.col-md-3.m-2:nth-of-type(2) .col-12:last-of-type {
margin-bottom: 0;
}
jsFiddle
I want that the input fiels are in the same line. But I don't know what am I doing wrong. Can somebody help me? I am using Bootstrap 4.
This is how I wanted it:
enter image description here
html code
<body>
<div class="container h-100">
<div class="row">
<div class="col-12">
<div id="content">
<h1>Contact Page</h1>
<h3>Contact Us</h3>
<hr>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6 offset-md-3">
<form class="form-group">
<div class="form-inline">
<input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
</div>
</form>
</div>
<div class="col-md-6 offset-md-3">
<form class="form-group">
<div class="form-inline">
<input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
</div>
</form>
<button type="submit" class="btn btn-default">Send invitation</button>
</div>
</div>
</div>
Add "form-row" or "row" in your code.
<form>
<div class="container">
<div class="form-row">
<div class="form-group mx-sm-3 mb-2">
<input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
</div>
<div class="form-group mx-sm-3 mb-2">
<input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
</div>
</div>
<div class="form-row">
<div class="form-group mx-sm-3 mb-2">
<button type="submit" class="btn btn-default">Send invitation</button>
</div>
</div>
</div>
</form>
OR
<form>
<div class="container">
<div class="row">
<div class="form-group mx-sm-3 mb-2">
<input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
</div>
<div class="form-group mx-sm-3 mb-2">
<input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
</div>
</div>
<div class="row">
<div class="form-group mx-sm-3 mb-2">
<button type="submit" class="btn btn-default">Send invitation</button>
</div>
</div>
</div>
</form>
Restructure you form.
- Use one tag for this form. Do Not use for every input a form tag.
- delete the div with class form-inline.
- Add class form-inline to div with class="col-md-6 offset-md-3".
<div class="container">
<form>
<div class="form-inline">
<div class="form-group mx-sm-3 mb-2">
<input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
</div>
<div class="form-group mx-sm-3 mb-2">
<input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
</div>
</div>
<div class="form-group mx-sm-3 mb-2">
<button type="submit" class="btn btn-default">Send invitation</button>
</div>
</form>
</div>
Row or form-row doesn't really matter. Form-row changes the gutter. It's to your own preference.
I have researched this to the max and haven't been able to find ANY information. I started thinking, maybe it had to do with media queries, but I really couldn't get anything to work for me.
My question is, how can I make a wrap responsive? I utilize Twitter Bootstrap and am running into a unique issue.
I have a simple wrap that looks like this:
.wrap {
width: 800px;
margin: 0 auto;
}
Then, I have a form, that looks like this:
<div class="wrap">
<div class="col-sm-12">
<form class="form-inline" name="contactform">
<div class="col-sm-6 form-group form-sty">
<label class="sr-only" for="first" required>First Name</label>
<input type="text" class="form-control-sty" name="first" placeholder="First Name">
</div>
<div class="col-sm-6 form-group form-sty">
<label class="sr-only" for="last" required>Last Name</label>
<input type="text" class="form-control-sty" name="last" placeholder="Last Name">
</div>
<div class="col-sm-6 form-group form-sty">
<label class="sr-only" for="phone" required>Phone</label>
<input type="text" class="form-control-sty" name="phone" placeholder="Phone">
</div>
<div class="col-sm-6 form-group form-sty">
<label class="sr-only" for="email" required>Email</label>
<input type="email" class="form-control-sty" name="mailfrom" placeholder="Email">
</div>
<div class="col-sm-12 form-sty">
<label class="sr-only" for="comment">Comment</label>
<textarea class="form-control-sty" name="message" id="message" rows="7" placeholder="What's on your mind?" required></textarea>
</div>
<div class="col-sm-12 form-sty form-sty-btn">
<button type="submit" value="Submit" class="btn btn-default col-sm-12">Send</button>
</div>
</form>
</div>
</div>
The issue I'm having is, since this sits inside of a wrap, when the site scales down the form fails to scale as well since it is filling the entirety of the 800px wrap.
I'm not looking for an answer as much as I'm looking for suggestions?
THanks for any help you can offer.
You can also view the actual website for a better idea, here: www.bestillcreative.com
.wrapper{
width:100%:
max-width:800px;
}
.wrap {
width:100%;
max-width:800px;
margin: 0 auto;
}
.form-sty{
margin:10px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrap">
<div class="col-sm-12">
<form class="form-inline" name="contactform">
<div class="col-sm-6 form-group form-sty">
<div class="col-sm-3 col-md-4"> <label for="first" required>First Name</label></div>
<div class="col-sm-3 col-md-2"> <input type="text" class="form-control-sty" name="first" placeholder="First Name"></div>
</div>
<div class="col-sm-6 form-group form-sty">
<div class="col-sm-3 col-md-4"> <label for="last" required>Last Name</label></div>
<div class="col-sm-3 col-md-2"><input type="text" class="form-control-sty" name="last" placeholder="Last Name"></div>
</div>
<div class="col-sm-6 form-group form-sty">
<div class="col-sm-3 col-md-4"> <label for="phone" required>Phone</label></div>
<div class="col-sm-3 col-md-2"><input type="text" class="form-control-sty" name="phone" placeholder="Phone"></div>
</div>
<div class="col-sm-6 form-group form-sty">
<div class="col-sm-3 col-md-4"><label for="email" required>Email</label></div>
<div class="col-sm-3 col-md-2"><input type="email" class="form-control-sty" name="mailfrom" placeholder="Email"></div>
</div>
<div class="col-sm-6 form-sty">
<div class="col-sm-3 col-md-4"><label for="comment">Comment</label></div>
<div class="col-sm-9 col-md-8"><textarea class="form-control-sty" name="message" id="message" rows="7" placeholder="What's on your mind?" required></textarea></div>
</div>
<div class="col-sm-12 form-sty form-sty-btn">
<button type="submit" value="Submit" class="btn btn-default col-sm-12">Send</button>
</div>
</form>
</div>
</div>
Try this structure
I am working on http://steam-to-rent.ch/mietdampfanlagen.html. As you can see I am using Bootstrap collapse and when you click on the "Anfrage" button it's displaying a Bootstrap's Modal. The problem is that when you click on the second "modal button" (Anfrage) and then you close that modal the background overlay color remains and I can't interact with the page. How can I solve it?
This is the code
<button type="button" class="btn btn-primary special"
style="background: #fadf3e; border: 2px solid #000; color: #000; margin-bottom: 20px; margin-top: -10px; width: 100%;"
data-toggle="modal"
data-target=".bs-example-modal-sm">Anfrage</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<h4 style="color: #000;">Mietdampfanlage 21 kg/h 10 bar</h3>
<div class="col-sm-12 form">
<form class="form-modal" role="form" method="post" action="index.php">
<div class="form-group" style="margin-bottom: 15px !important;">
<div class="col-sm-12">
<input type="text" class="form-control" id="name" name="name" placeholder="Vorname, Name" value="">
</div>
</div>
<div class="form-group" style="margin-bottom: 15px !important;">
<div class="col-sm-12 ">
<input type="text" class="form-control" id="name" name="firma" placeholder="Firma" value="">
</div>
</div>
<div class="form-group" style="margin-bottom: 15px !important;">
<div class="col-sm-12 ">
<input type="email" class="form-control" id="email" name="email" placeholder="E-Mail" value="">
</div>
</div>
<div class="form-group" style="margin-bottom: 15px !important;">
<div class="col-sm-12">
<input type="text" class="form-control" id="name" name="telefon" placeholder="Telefon" value="">
</div>
</div>
<div class="form-group" style="margin-bottom: 15px !important;">
<div class="col-sm-12">
<input type="text" class="form-control" id="name" name="zeit" placeholder="Zeitraum" value="">
</div>
</div>
<div class="form-group" style="margin-bottom: 15px !important;">
<div class="col-sm-12">
<textarea class="form-control" rows="4" name="message" placeholder="Nachricht"></textarea>
</div>
</div>
<div class="form-group" style="margin-bottom: 15px !important;">
<div class="col-sm-12">
<input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">
</div>
</div>
<div class="form-group" style="margin-bottom: 15px !important;">
<div class="col-sm-10 col-sm-offset-2">
<! Will be used to display an alert to the user>
</div>
</div>
</form></div>
</div>
</div>
</div>
Edit:
<button id="modal_1" type="button" class="btn btn-primary special" style="background: #fadf3e; border: 2px solid #000; color: #000; margin-bottom: 20px; margin-top: -10px; width: 100%;" data-toggle="modal" data-target=".bs-example-modal-sm">Anfrage</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="row">
<div class="col-sm-12 form">
<div class="modal-header">
<h4 style="color: #000;">Mietdampfanlage 21 kg/h 10 bar</h4>
</div>
<form class="form-modal" role="form" method="post" action="index.php">
<div class="col-sm-12">
<div class="form-group">
<input type="text" class="form-control" id="name" name="name" placeholder="Vorname, Name" value="">
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<input type="text" class="form-control" id="name" name="firma" placeholder="Firma" value="">
</div>
</div>
<div class="col-sm-12 ">
<div class="form-group">
<input type="email" class="form-control" id="email" name="email" placeholder="E-Mail" value="">
</div>
</div>
<div class="col-sm-12 ">
<div class="form-group">
<input type="text" class="form-control" id="name" name="telefon" placeholder="Telefon" value="">
</div>
</div>
<div class="col-sm-12 ">
<div class="form-group">
<input type="text" class="form-control" id="name" name="zeit" placeholder="Zeitraum" value="">
</div>
</div>
<div class="col-sm-12 ">
<div class="form-group">
<textarea class="form-control" rows="4" name="message" placeholder="Nachricht"></textarea>
</div>
</div>
<div class="col-sm-12 ">
<div class="form-group">
<input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">
</div>
</div>
<div class="form-group" style="margin-bottom: 15px !important;">
<div class="col-sm-10 col-sm-offset-2">
<! Will be used to display an alert to the user>
</div>
</div>
</form></div>
</div>
</div>
</div>
</div>
data-backdrop="static"
data-keyboard="false"
first look and see if there is data-backdrop="Static" anywhere. That would do it. Also make sure data-keyboard is NOT false just to make sure you can interact.
Last I want you to look at the the ID's on the buttons and modals. make sure they are all different. I dont see an ID on this modal here so I would suggest something like
id="modal_1"
on the button AND the modal. Make sure it matches