This question already has answers here:
Bootstrap full-width text-input within inline-form
(7 answers)
Closed 7 years ago.
This is how the modal looks like now. How can I get the modal wider?
One thing that works is using this
<span class="input-group-addon" id="sizing-addon1">
But it makes all the fields like this. Notice the grey thing on the left. It also makes the last input field smaller vertically.
Edit: Solved! This seems to do the trick.
input style="width:100%"
Thanks anyway!
Here's the code.
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="first-name" class="control-label"></label>
<input type="text" class="form-control" id="first-name" placeholder="First name">
</div>
<div class="form-group">
<label for="last-name" class="control-label"></label>
<input type="text" class="form-control" id="last-name" placeholder="Last name">
</div>
<div class="email">
<label for="recipient-name" class="control-label"></label>
<input type="email" class="form-control" id="email" placeholder="Your email">
</div>
<div class="form-group">
<label for="message-text" class="control-label"></label>
<textarea class="form-control" id="message-text" placeholder="Enter your message here."></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
There are various classes for different size inputs
:class=>"input-mini"
:class=>"input-small"
:class=>"input-medium"
:class=>"input-large"
:class=>"input-xlarge"
:class=>"input-xxlarge"
OR
in bootstrap 3.0 :
Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*.
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>
http://getbootstrap.com/css/#forms-control-sizes
use bootstrap 3.0
few changes in
<div class="modal-body">
replace with
<div class="modal-body col-md-12 col-lg-12">
and
replace with
<div class="form-group col-md-4 col-lg-4">
Related
I was wondering if someone knows how can I move this button slightly to the left so it goes straight to the center. This is the code:
<!-- Modal for Contact - us Button -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="exampleModalLabel">Contáctanos</h4>
</div>
<div class="modal-body">
<form action="https://formsubmit.co/myemail.com" method="POST">
<div class="form-group">
<label for="Name">Nombre</label>
<input type="text" class="form-control" id="Name" placeholder="Nombre" required>
</div>
<div class="form-group">
<label for="Phone">Celular</label>
<input type="tel" class="form-control" id="phone" placeholder="Celular" required>
</div>
<div class="form-group">
<label for="Email">Correo</label>
<input type="Email" class="form-control" id="Email-1" placeholder="Correo" required></textarea>
</div>
<div class="form-group">
<label for="Message">Mensaje</label>
<textarea class="form-control" id="Message" placeholder="Ingresa tu mensaje" required></textarea>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" style="margin:0;display:block;width:100%">Enviar</button>
</div>
</form>
</div>
</div>
</div>
</div>
here a picture of what I'm trying to say: https://imgur.com/204WlVD Hope someone can help me out, thanks!
It is hard to tell what you need to do without seeing the css, but I think that if you adjust the padding-left on the modal-footer class you should be able to move the button to the right. If you could upload what your css classes look like, that would be very helpful.
You can apply below css:
text-align: center;
margin: 0 auto;
<div class="modal-footer">
<button type="submit" class="btn btn-success" style="margin:0;display:block;width:100%">Enviar</button>
</div>
Just Use this one line style
<div class="modal-footer" style="justify-content: space-around;">
<button type="submit" class="btn btn-success">Enviar</button>
</div>
Try changing the button CSS:
.btn-success { margin: 0 auto; }
I have a boostrap model , I see a weird line in it when having two divs with col-lg-6. Can you please tell me why and help me to fix it ?
This is the model code
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Create</h4>
</div>
<form method="post" id="insert_form">
<div class="modal-body">
<div class="col-lg-6">
<div class="form-group">
<label for="Code">Code</label>
<input type="text" class="form-control" id="Code" name="Code" />
</div>
<div class="form-group">
<label for="Name">Name</label>
<input type="text" class="form-control" id="Name" name="Name" />
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="CanSale">Sale</label>
<input type="text" class="form-control" id="CanSale" name="CanSale" />
</div>
<div class="form-group">
<label for="Barcode">Barcode</label>
<input type="text" class="form-control" id="Barcode" name="Barcode" />
</div>
<div class="form-group">
<label for="Code">Descriptoin</label>
<input type="text" class="form-control" id="Description" name="Description" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" name="insert" id="insert" value="Insert" class="btn btn-success" />
</div>
</form>
</div>
below image red arrows shows the weird line that i am talking about. Please help me fix it.
I forget to place "col" divs inside <div class="row">.
I got it fixed by nesting "col-lg-6" divs inside <div class="row"> </div>
I have a basic modal that has 3 fields. Name, email, and message. The email and message appear perfectly. The name input field doesn't appear. It only appears when Name label is clicked. May I ask why it does this and how can I override it so it displays normal like email and message.
<div class="modal fade" id="contact" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal">
<div class="modal-header">
<h4>Contact Tech Site</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="contact-name" class="col-lg-2 control-label">Name:</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="contact-name" placeholder="Full Name">
</div>
</div>
<div class="form-group">
<label for="contact-email" class="col-lg-2 control-label">Email:</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="contact-email" placeholder="you#example.com">
</div>
</div>
<div class="form-group">
<label for="contact-msg" class="col-lg-2 control-label">Message:</label>
<div class="col-lg-10">
<textarea class="form-control" rows="8"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Close</a>
<button class="btn btn-primary" type="submit">Send</button>
</div>
</form>
</div>
</div>
</div>
I wasn't able to replicate this in codepen. How it appears http://snag.gy/7Zd3f.jpg
It's working for me, try taking out "fade" from first line.
It appears that I either have trouble spacing correctly or making things stack either horizontally or vertically.
Still new to Bootstrap but I'm pretty happy with what I got so far. Currently I have this for my login form:
I would like to make my contact form the same way, vertically stacked. But here is what I end up with:
<div id="contact-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Contact me!</h4>
</div>
<div class="modal-body">
<p>Got any Feedback (Positive and/or Negative) or any ideas? Please let us know!</p>
<p>Your email is only used to contact you back with an answer. We will never spam your email (Promise!)</p>
<form role="form" class="navbar-form" action="" method="post">
<span>Your Name</span>
<label for="contact-name" class="sr-only">Your Name</label>
<input type="text" id="contact-name" class="form-control" placeholder="Your Name" required>
<span>Your Email</span>
<label for="contact-email" class="sr-only">Your Email</label>
<input type="email" id="contact-email" class="form-control" placeholder="Your Email" required>
<span>Your Message</span>
<textarea id="contact-message" class="form-control" placeholder="Your message..." required></textarea>
<button type="button" class="btn btn-success btn-bg" id="contact-submit-btn"><span>Submit</span></button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Use form-groups. Just make sure you wrap your input in <div class="form-group"></div>:
<form role="form">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Iam using this modal with bootstrap:
<div class="modal" id="contact-update-view">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Update contact</h4>
</div>
<form class="form-horizontal">
<div class="modal-body">
<div class="form-group">
<label for="contact-create-name" class="col-sm-4 control-label">Name</label>
<div class="col-sm-8">
<div class="input-group">
<div class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</div>
<input type="text" class="form-control" id="contact-create-name" name="contact-create-name" data-minlength="2" placeholder="Contact's Name" data-error="Name should atleast be 2 characters long" required />
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="form-group">
<label for="contact-create-phone" class="col-sm-4 control-label">Phone</label>
<div class="col-sm-8">
<div class="input-group">
<div class="input-group-addon">
<span class="glyphicon glyphicon-phone"></span>
</div>
<input type="tel" class="form-control" id="contact-create-phone" name="contact-create-phone" placeholder="Phone Number" pattern="^(?:(?:\+?1\s*(?:[.-]\s*)?)?(?:\(\s*([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9])\s*\)|([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]))\s*(?:[.-]\s*)?)?([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2})\s*(?:[.-]\s*)?([0-9]{4})(?:\s*(?:#|x\.?|ext\.?|extension)\s*(\d+))?$" data-error="Enter a valid phone number" required/>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="form-group">
<label for="contact-create-email" class="col-sm-4 control-label">Email</label>
<div class="col-sm-8">
<div class="input-group">
<div class="input-group-addon">
<span class="glyphicon glyphicon-envelope"></span>
</div>
<input type="email" class="form-control" id="contact-create-email" name="contact-create-email" placeholder="Email" required data-error="The email is invalid"/>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="form-group">
<div class="col-sm-offset-4 col-sm-8">
<button type="submit" class="btn btn-success" data-toggle="tooltip" title="Yep! Two exclamations and a question mark,arent you excited?">Add contact!</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
I use the bootcards-desktop.css from here,I find that the backdrop is displayed above the modal.When I click on the modal it is dismissed immediately.
I open the modal with this:
<button type="button" class="btn btn-default btn-edit" data-toggle="modal" data-target="#contact-update-view">
<span class="glyphicon glyphicon-pencil"></span>
</button>
I see this difference in the css:
.modal
z-index:1050;
position:fixed;
.modal-backdrop:
position:fixed;
z-index:1040;
When I click on the modal,it disappears(as if there was a backdrop on top of the modal),how can I get the modal to work correctly with bootcards?
It's not a Bootstrap 3.3.1 issues, nor a Bootcards issue. The problem is in the setup: the bootcards-desktop.min.css file (as well as the Android and iOS versions) is a concatenated version of Bootstrap (v3.2.0 at the moment) as well as the Bootcards CSS file. This is offered so you have one less HTTP request to make. In the dist folder of the Bootcards download, you'll also find versions of the CSS files without the built-in Bootstrap: they have a -lite suffix (and are a lot smaller...).
In your Plunkr, if I change the Bootstrap version to v3.3.1 AND change bootcards-desktop.min.css to bootcards-desktop-lite.min.css it all works again.
I'll release another version of Bootcards soon that will extend Bootstrap v3.3.1.