Develop Reference

How to make a space between buttons in bootstrap using ml-auto?

I have two seperated buttons that have created, but they closely packed to another there is no space in between i have tried to use ml-auto. There is not much difference on the UI side and need some help around it.
<div class="form-group row">
<div class="col-xs-3 ml-auto">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Start New Course
</button>
</div>
</div>
<div class="form-group row">
<div class="col-xs-3 ml-auto">
<a class="btn btn-large btn-success" id="viewCourse" href="#Url.Action("ViewCourses", "Home")">View Grades</a>
<script type="text/javascript">
$('#ViewCourses').on('click', function (e) {});
</script>
</div>
</div>

First of all I think both of your buttons need to sit inside a .row element. Right now they are on different rows. Then you can apply a class like .mr-2 (margin right of 2 units, or increase the number if you want more) to the first button wrapper. Then you will have some spacing between your buttons.
<div class="row">
<div class="form-group">
<div class="col-xs-3 mr-2">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Start New Course
</button>
</div>
</div>
<div class="form-group">
<div class="col-xs-3">
<a class="btn btn-large btn-success" id="viewCourse" href="#Url.Action("ViewCourses", "Home")">View Grades</a>
<script type="text/javascript">
$('#ViewCourses').on('click', function (e) {});
</script>
</div>
</div>
</div>
You can see a working solution here: https://codepen.io/razvan-tudosa/pen/YzqvQVm
More info about how to space stuff you can find in the twitter bootstrap docs: https://getbootstrap.com/docs/4.5/utilities/spacing/

Not able to access input text box value to code behind asp.net c#

Here my page :
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<%# Register Assembly="Microsoft.ReportViewer.WebForms" Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>
<asp:HiddenField ID="hdnfromDate" Value="" runat="server" />
<asp:HiddenField ID="hdntoDate" Value="" runat="server" />
<div id="myModal1" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Issue Invoice</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form id="reused_form" runat="server">
<p>
Send invoice to...
</p>
<div class="form-group">
<label for="name">
To:</label>
<input type="text" class="form-control"
id="name" name="name" readonly maxlength="50" runat="server">
</div>
<div class="form-group">
<label for="email">
CC:</label>
<input type="email" ID="cc" class="form-control" runat="server" multiple>
</div>
<div class="form-group">
<strong><i>Note:</i><small>&nbsp<i>The invoice can not be edited after issuing.</i></small></strong>
</div>
<asp:LinkButton CssClass="btn btn-warning m-btn btn-block btn-lg m-btn--custom m-btn--icon m-btn--air " OnClick="Onbtn3_Click" Text="Issue Invoice " ID="LinkButton3" runat="server"></asp:LinkButton>
</form>
<div id="success_message" style="width: 100%; height: 100%; display: none;">
<h3>Sent your message successfully!</h3>
</div>
<div id="error_message"
style="width: 100%; height: 100%; display: none;">
<h3>Error</h3>
Sorry there was an error sending your form.
</div>
</div>
</div>
</div>
</div>
In cs File i am trying to access email value using cc.Value as for email textbox id is cc. But it always gets empty string. In my default master page i have a form tag which runs at server so if i keep this modal in a form runat server then gives me error saying page can have only one form tag. Please can anyone help me out. Thanks in advance

This may help
There is Text property available, so you can use textBox.Text to get textbox contian. In your case cc.Text.

Try textBox.text(). Should work.

As Html 5 type=“email” control is not available using runat attribute, you can access TextBox like below:
<asp:TextBox ID="txtBoxCc" runat="server" TextMode="Email"></asp:TextBox>
Now in codebehind you can access it like txtBoxCc.Text
Also, you have to put it like below:
if(!Page.IsPostBack) {
string cc = txtBoxCc.Text;
}

How to open a modal from code behind?

I am trying to open a modal on a button click. Modal can be opened using a button click
<asp:Button ID="Button4" runat="server" class="btn btn-info" data-toggle="modal" OnClientClick="return false;" data-target="#View1" Text="View Details" />
I need to open this modal at the end of a function, but I don't know how to make that happen, from c# code behind. I tried:
protected void Button2_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, this.GetType(), "ModalView", "<script>$('#View1').modal('show');</script>", false);
}
Design
<!-- modal 1 -->
<div class="modal fade" id="View1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" runat="server">
<div class="modal-dialog">
<div class="modal-content">
<div class="alert alert-success">
<strong>Well done!</strong> Successfully Saved
</div>
</div>
<!-- modal-content -->
</div>
<!-- modal-dialog -->
</div>
<!-- modal -->

First of all please make sure ScriptManager is placed in form tag of aspx page.
secondly make sure the code is working on client side.
Refer my below code:
aspx code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="myModal" class="modal fade" 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 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<asp:ScriptManager runat="server"></asp:ScriptManager>
</form>
</body>
serverside code:
protected void Button1_Click(object sender, EventArgs e)
{
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append(#"<script language='javascript'>");
sb.Append(#"$('#myModal').modal('show');");
sb.Append(#"</script>");
ClientScript.RegisterStartupScript(this.GetType(), "JSScript", sb.ToString());
}

I would guess that your script is running before the HTML it's trying to refer to is actually rendered. You can check it easily by doing a View Source on your rendered page. If that startup script is higher up the page than your HTML for your modal, then it won't work because the script runs as soon as it's rendered on the page, and it's before the HTML is rendered, so it tries to run "show" on an element that doesn't exist yet. You don't get an error because the way jQuery works means that if its selector doesn't match any element(s), it simply doesn't execute whatever command you specified to be run on the selected element(s).
If this is the issue, you can fix it easily by changing your startup script so that it doesn't run the "show" code until the whole page has loaded. This can be done using jQuery's standard "document.ready" syntax (I have used the shorthand version here):
ScriptManager.RegisterStartupScript(this, this.GetType(), "ModalView", "<script>$(function() { $('#View1').modal('show'); });</script>", false);
You also need to ensure you've got a ScriptManager control in your page somewhere (within the <form> tag):
<asp:ScriptManager runat="server"></asp:ScriptManager>

There can be two problems:
You are trying to load the model before page loads
Your id of modal is different
Change view1 to div1
Please try this code
ScriptManager.RegisterStartupScript(this, this.GetType(), "ModalView", "
<script>$(document).ready(function(){$('#Div1').modal('sho‌​w');});</script>", false);

Bootstrap textbox width and alignment changes when minimizing window

I have below code in my .cshtml file,
<div class="input-group col-lg-2 navbar-right" style="margin-top: 7px">
<input type="text" class="form-control" placeholder="Search..." id="searchText" name="searchText" />
<span class="input-group-btn">
<button class="btn btn-default" type="submit" id="btnSearch" onclick="submit()">
<i class="fa fa-search"></i>
</button>
</span>
</div>
When I minimize the window the textbox appears on top of other controls and width of the textbox changes too.
I tried below css but it doesn't work,
<style type="text/css">
.form-control {
width: auto;
position: absolute;
}
</style>
Any ideas what I am doing wrong here?

Have you tried to remove the position: absolute and set width:100%;

Try this:
<div class="form-group">
<div class="col-md-offset-7 col-md-2">
<input type="text" class="form-control" placeholder="Search..." id="searchText" name="searchText" />
</div>
<div class="col-md-2">
<button class="btn btn-default" type="submit" id="btnSearch" onclick="submit()">
<i class="fa fa-search"></i>
</button>
</div>
</div>
Then remove the position:absolute

referring to What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?
your code does not have col-md-* or col-sm-* so properties on minimizing the browser window are simply undefined.
add classes as
<div class="input-group col-lg-2 col-md-4 col-sm-2 navbar-right" style="margin-top: 7px">

Using an asp.net webform ValidationSummary with bootstrap modal

I am trying to do some styling on my page, and I really would like to implement the built -in modal that bootstrap has for displaying my ValidationSummary control, along with any other messages I may want. So far, I can get the modal to pop up, but the button never reaches my OnClick method, and it does not display the validation summary. I assume this has something to do with posting, and I was wondering if there is a way around this, and if I can still implement the modal?
My page looks something like this currently:
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="Server">
<script>
//MODAL SCRIPT
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})
</script>
...
<!-- PROGRAM NAME -->
<p>
<asp:Label ID="ProgramName_Label" runat="server" Text="Program Name:" CssClass="label-program"></asp:Label>
<asp:TextBox ID="ProgramName" runat="server" class="form-control text-fix"></asp:TextBox>
</p>
<asp:RequiredFieldValidator ID="ProgramNameValidator" runat="server" ErrorMessage="Program Name is required." ControlToValidate="ProgramName"></asp:RequiredFieldValidator>
...
<!-- SUBMIT BUTTON -->
<div class="col-md-12" align="center">
<asp:LinkButton ID="SubmitProgram" runat="server" OnClick="SubmitProgram_Click"
CssClass="listview-buttons" Font-Underline="false" data-toggle="modal"
data-target="#myModal">Submit Program</asp:LinkButton>
</div>
<!-- BOOTSTRAP MODAL DIALOG -->
<div id="myModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<asp:ValidationSummary ID="ValidationSummary1" runat="server" />
<asp:Label ID="ValidationList" runat="server"></asp:Label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

All you have to do is to add this function on your page:
function WebForm_OnSubmit() {
if (typeof (ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) {
$('#myModal').modal('show');
return false;
}
return true;
}