I'm currently switching over to Bootstrap 3 from bootstrap 2. How do you center the input field in Bootstrap 3? The text centers correctly. It used to work for BS2. I have tried moving the 'style='text-align:center' in div's but still no luck.
JSfiddle
Updated fiddle with answer
<div id="Email_Alert_Modal" class="modal show" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="text-align: center">
<h3>Email Alert</h3>
</div>
<div class="modal-body" style="text-align: center">
<h4>Please enter email address that the alert will be sent to.</h4>
<label for="send_email"> </label> <input style="width:200px" type="email" class="form-control" name="email" id="send_email" placeholder="johndoe#yahoo.com" title="Input Email Address">
</div>
<div class="modal-footer">
<button class="btn btn btn-primary" onclick='Email_Alert()' >Send</button>
<button class="btn btn btn" data-dismiss="modal" >Cancel</button>
</div>
</div>
</div>
</div>
Set
margin: 0 auto;
for input element
Related
I made a bootstrap modal that will open when a button is clicked. A popup window will appear when the button is clicked. I want to shift the button to top right corner of the screen. I also want to change the colour of the button. How can I do so?
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#logIn">Log in</button>
<!-- Modal -->
<div class="modal fade" id="logIn" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title1">Log in</h4>
</div>
<div class="modal-body">
<form class="sing_in_form">
<input type="text" placeholder="Email">
<input type="text" placeholder="password">
<p class="message"> Forgot password?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Log in</button>
</div>
</div>
</div>
</div>
Add a class to the button and then target it in CSS.
See Codepen: https://codepen.io/manaskhandelwal1/pen/ZEGLvaz
HTML
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-lg btnStyle" data-toggle="modal" data-target="#logIn">Log in</button>
<!-- Modal -->
<div class="modal fade" id="logIn" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title1">Log in</h4>
</div>
<div class="modal-body">
<form class="sing_in_form">
<input type="text" placeholder="Email">
<input type="text" placeholder="password">
<p class="message"> Forgot password?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Log in</button>
</div>
</div>
</div>
CSS
button.btnStyle {
background-color: blue;
color: white;
position: absolute;
top: 10px;
right: 10px;
}
I have modal window and i want 4 inline inputs. But they have 15px padding on side and beetween 2 inputs is total 30px padding.
How is possible make 15px space beetween inputs?
edit: I want same spacing on sides and beetween inputs.
My try on jsfiddle:
jsfiddle
Code:
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Here's another option. You can add a class and a bit of css:
.spacing > div + div{padding-left: 0;}
http://jsfiddle.net/5u2paavk/
Sure, use a special class to adjust the padding and negative margins on the row and col- like this:
.row.no-margin {
margin-left: -7.5px;
margin-right: -7.5px;
}
.row.no-margin > .col-xs-3{
padding-left: 7.5px;
padding-right: 7.5px;
}
Demo on Codeply
I want that when I move my cursor on an image, it should show 3 buttons coming and then when I click on any one of them, a modal should open. I am actually done with this, but the problem is when I click on any of the buttons appearing, a modal is reflected and as soon as I try to close that modal, those three options are shown on that image rather dis-appearing. Please anyone help.
Here is the code:
<div class="row text-center">
<div class="col-sm-4">
<div class="thumbnail">
<div class="caption">
<button class="btn" data-toggle="modal" data-target="#myModal1a" style="color:#000">Add</button>
<button class="btn" data-toggle="modal" data-target="#myModal1b" style="color:#000">Delete</button>
<button class="btn" data-toggle="modal" data-target="#myModal1c" style="color:#000">Modify</button>
</div>
<img src="Department.png" style="position:fixed" alt="ALT NAME" width="250" height="60">
</div>
<h3 class="text" id="D1"><b>Department Options </b></h3>
</div>
</div>
<!-- Modal 1a -->
<div class="modal fade" id="myModal1a" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4><span class="glyphicon glyphicon-lock"></span> Create Department</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="psw">Department Name</label>
<input type="text" class="form-control" id="psw" placeholder="Provide a name">
</div>
<div class="form-group">
<label for="usrname">Department ID</label>
<input type="text" class="form-control" id="usrname" placeholder="Provide an ID">
</div>
<button type="submit" class="btn btn-block">Submit
<span class="glyphicon glyphicon-ok"></span>
</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span> Cancel
</button>
<p>Need help?</p>
</div>
</div>
</div>
</div>
If you simply wanna hide those buttons whenever the modal is closed, then its a cakewalk if you use jQuery. You just need to use the hidden.bs.modal event of Bootstrap modals in the following way:
$('#myModal1a').on('hidden.bs.modal', function () {
$('.imgButton').each(function () {
$(this).hide();
})
})
Assuming that you provide a class called 'imgButton' to all the buttons :)
Bootstrap Modal code
<!-- Signup Modal -->
<div class="modal fade" id="signUpForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h3 class="modal-title" id="myModalLabel">Please Sing Up</h3>
</div>
<div class="modal-body">
<?php echo form_open('Registration')?>
<div class="form-group">
<label for="login-email" class="control-label">Email:</label>
<input type="text" class="form-control" name="login-email" id="login-email">
</div>
<div class="form-group">
<label for="username" class="control-label">Username:</label>
<input type="text" class="form-control" name="username" id="username">
</div>
<div class="form-group">
<label for="password" class="control-label">Password:</label>
<input type="password" class="form-control" name="password" id="password">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Signup</button>
</div>
<?php echo form_close()?>
</div>
</div>
</div>
And I have controller named Registration. when I click on button to launch the modal nothing happens. Button code that launches the modal.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signUpForm">Signup
</button>
You should add jQuery bootstrap "REQUEST"
More info here http://getbootstrap.com/2.3.2/javascript.html#modals
Add reference to jquery and bootstrap.min.js files in header and also add links for bootstrap css files.
Rows with inputs seam wider then other rows (example is a button).
http://jsfiddle.net/ujnw8x4p/2/
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container">
<div tabindex="-1" role="dialog" class="modal" size="lg" index="0" style="z-index: 1050; display: block;">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title">Bootstrap Modal with horizontal form and input addon</h3>
</div>
<div class="modal-body ng-scope">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputLinkPp" class="hidden-xs col-sm-3 control-label">Website</label>
<div class="input-group col-sm-9 xs-margin">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input type="text" class="form-control" id="inputLinkPp" placeholder="link to your page"/>
</div>
</div>
<div class="form-group">
<p class="col-sm-offset-3 col-sm-9" style="text-align: right">
<button type="button" class="btn btn-success">
<i class="glyphicon glyphicon-link"></i> Create</button>
</p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
It seams like the modals padding is not respected by the input-group-addon.
But maybe i am not supposed to us input-groups in horizontal forms?
Any ideas on it?
I came up with this using only the Bootstrap classes. It looks like it accomplishes what you need, the only issue is the vertical alignment on the <label> doesn't match up with the <input>. Would need some custom css to override that. Here's the code:
<div class="container">
<div tabindex="-1" role="dialog" class="modal" size="lg" index="0" style="z-index: 1050; display: block;">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title">Bootstrap Modal with horizontal form and input addon</h3>
</div>
<div class="modal-body ng-scope">
<div class="row">
<div class="col-xs-2 text-right" >
<label>Website</label>
</div>
<div class="col-xs-10">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input type="text" class="form-control" id="inputLinkPp" placeholder="link to your page"/>
</div>
</div>
</div>
<br/>
<div class="row">
<div class="col-xs-12 text-right">
<div class="form-group">
<button type="button" class="btn btn-success">
<i class="glyphicon glyphicon-link"></i> Create</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Oh and I accidentally removed the <form> tag from it, so that would need to be added back in. Here's a link to the Bootply:
Bootply
Hope that helps!
Finally i found a working solution.
Not sure though whether its the correct way or not.
Added this in my style sheet:
.form-horizontal .input-group {
padding-left: 15px;
padding-right: 15px;
}
http://jsfiddle.net/ujnw8x4p/3/