I'm trying to arrange inputs and labels horizontally.
I tried:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="span2">
<h2>Label1:</h2>
</div>
<div class="span2">
<input id="Filter_1" />
</div>
<div class="span1">
<h2>Label2:</h2>
</div>
<div class="span1">
<input id="Filter_2" />
</div>
<div class="span2">
<h2>Label3:</h2>
</div>
<div class="span2">
<input id="Filter_3" />
</div>
<div class="span1">
<input id="Button1" type="button" class="btn btn-large" value="Button 1" />
</div>
</div>
But the result was terrible with all this in the left side of the screen while the right side completely blank:
If you use bootstrap you can use this layout.
Run code and open it in full page mode.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12 col-xs-6 col-md-4 col-lg-3">
<label>Label1:</label>
<input id="Filter_1" />
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<label>Label2:</label>
<input id="Filter_2" />
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<label>Label3:</label>
<input id="Filter_3" />
</div>
<div class="form-btn">
<input id="Button1" type="button" class="btn btn-primary btn-large" value="Button 1" />
</div>
</div>
</div>
Also you can find more guidance and example in forms-horizontal in bootstrap
I think the attribute you are searching for is float. Add to your CSS:
.span1, .span2 {
float: left;
[...]
}
Related
I am new to webforms and am trying to create a login page with 2 buttons and 2 textboxes. I have placed them between divs however I am getting no spces between them.
Here is what I am getting:
As you can see there is no vertical space between the buttons and textboxes and labels
Here is the code I am using:
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
<center>
<img width="150px" src="imgs/generaluser.png" />
</center>
</div>
</div>
<div class="row">
<div class="col">
<center>
<h3>Member Login</h3>
</center>
</div>
</div>
<div class="row">
<div class="col">
<center>
<hr>
</center>
</div>
</div>
<div class="row">
<div class="col">
<label>Member ID</label>
<div class="form-group">
<asp:TextBox CssClass= "form-control" ID="Textbox1" runat="server"
placeholder="Member ID"></asp:TextBox>
</div>
<label>Password</label>
<div class="form-group">
<asp:TextBox CssClass= "form-control" ID="Textbox2" runat="server"
placeholder="Password" TextMode="Password"></asp:TextBox>
</div>
<div class="form-group">
<asp:Button class="btn btn-primary btn-lg col-12" ID="Button1"
runat="server" Text="Login" />
</div>
<div class="form-group">
<input class="btn btn-info btn-lg col-12" id="Button2"
type="button" value="Sign Up" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am using bootstrap. Should not it give vertical space automatically?
How do I fix this?
You can add margin with bootstrap by adding it to the class
<label class="mt-3">Password</label>
You should be using inputs instead of textboxes
and you should look into wrapping it all in a form
<head>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
</head>
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
<center>
<img width="150px" src="imgs/generaluser.png" />
</center>
</div>
</div>
<div class="row">
<div class="col">
<center>
<h3>Member Login</h3>
</center>
</div>
</div>
<div class="row">
<div class="col">
<center>
<hr>
</center>
</div>
</div>
<div class="row">
<div class="col">
<label>Member ID</label>
<div class="form-group">
<input class= "form-control" ID="Textbox1" runat="server"
placeholder="Member ID"></T>
</div>
<label class="mt-3">Password</label>
<div class="form-group">
<input class= "form-control" ID="Textbox2" runat="server"
placeholder="Password" TextMode="Password"></Textarea>
</div>
<div class="form-group mt-2">
<input class="btn btn-primary btn-lg col-12" ID="Button1"
runat="server" Text="Login" value="Login" />
</div>
<div class="form-group mt-2">
<input class="btn btn-info btn-lg col-12" id="Button2"
type="button" value="Sign Up" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
You can either use a margin-top for the button class of use a <br> after the first button container
I currently have this as part of my script, the header and 2 paragraphs are being centered properly, but container and button are off to the left side. I have tried using <center> </center> but I don't know where to properly apply them for the form and button to be centered.
Screenshot of what needs to be centered:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="jumbotron text-center">
<h1>Header Text</h1>
<p>Paragraph</p>
<p>Paragraph 2</p>
</div>
<div class="container">
<form action="excel-script.php" method="post" enctype="multipart/form-data">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<input type="file" name="excelDoc" id="excelDoc" class="form-control" />
</div>
</div>
<div class="col-md-4">
<input type="submit" name="uploadBtn" id="uploadBtn" value="Button" class="btn btn-success" />
</div>
</div>
</form>
</div>
Add 'text-center' class to the row and edit the 'col' classes to have 12 as a sum
<div class="container" >
<form action="excel-script.php" method="post" enctype="multipart/form-data">
<div class="row text-center">
<div class="col-md-2"></div>
<div class="col-md-4">
<div class="form-group">
<input type="file" name="excelDoc" id="excelDoc" class="form-control" />
</div>
</div>
<div class="col-md-3">
<input type="submit" name="uploadBtn" id="uploadBtn" value="Button" class="btn btn-success" />
</div>
<div class="col-md-3"></div>
</div>
</form>
</div>
Check out this code:
<div class="text-center">
<h1>Header Text</h1>
<p>Paragraph</p>
<p>Paragraph 2</p>
</div>
<div class="container">
<form action="excel-script.php" method="post" enctype="multipart/form-data">
<div class="row align-items-center justify-content-center">
<div class="col-12 col-md-4">
<div class="custom-file" id="customFile" lang="es">
<input type="file" class="custom-file-input">
<label class="custom-file-label" for="exampleInputFile">
Choose file...
</label>
</div>
</div>
<div class="col-12 col-md-1">
<input type="submit" name="uploadBtn" id="uploadBtn" value="Button" class="btn btn-success" />
</div>
</div>
</form>
</div>
Hope this helps.
I have a form group, it contains of an input field with an addon, a checkbox with an image and a button next to them, they're displayed next to each other, but when i give my checkbox height and width the image and the button move down i don't know why, how can i fix that? here is my code:
.box{
height: 34px;
width: 34px;
}
.btn-default{
height: 34px;
width: 34px;
}
<div class="col-lg-12 form-group">
<div class="pull-right">
<img src="http://placehold.it/34x34"><input type="checkbox" class="box">
<button type="button" class="btn btn-default">+</button>
</div>
<div>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" class="form-control"/>
</div>
</div>
</div>
You can use grid system to easily manage your layout
Please check below example
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>
input.checkbox-input{height: 34px;width: 34px;margin-top: 0;}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 form-group">
<div class="col-md-1 col-sm-1 col-xs-1">
<img src="http://placehold.it/34x34">
</div>
<div class="col-md-1 col-sm-1 col-xs-1">
<input type="checkbox" class="checkbox-input">
</div>
<div class="col-md-1 col-sm-1 col-xs-1">
<button class="btn" value="+">+</button>
</div>
<div class="col-md-9 col-xs-9 input-group">
<span class="input-group-addon">#</span>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
I need a help in aligning the content inside the modal window. Here is the html
<div>
<form name="_form" class="form-horizontal" ng-submit="submit(_form)">
<div class="modal-header">
<button type="button" class="close" ng-click="dismiss()" aria-hidden="true">×</button>
<h3>Chart Settings</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="form-group" >
<label class="control-label col-lg-6 col-md-6">Title</label>
<div class="col-lg-6 col-md-6">
<input name="sizeX" ng-model="chartConfig.title.text"class="form-control" />
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="form-group">
<label class="control-label col-lg-6 col-md-6">Subtitle</label>
<div class="col-lg-6 col-md-6">
<input name="sizeY"ng-model="chartConfig.subtitle.text"class="form-control" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="form-group" >
<label class="control-label col-lg-6 col-md-6">Width</label>
<div class="col-lg-6 col-md-6">
<input name="sizeX" ng-model="chartConfig.size.width"class="form-control" />
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="form-group">
<label class="control-label col-lg-6 col-md-6">Height</label>
<div class="col-lg-6 col-md-6">
<input name="sizeY"ng-model="chartConfig.size.height"class="form-control" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="form-group" >
<label class="control-label col-lg-6 col-md-6">reflow</label>
<div class="col-lg-6 col-md-6">
<button ng-click="reflow()" class="form-control">reflow</button>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="form-group">
<label class="control-label col-lg-6 col-md-6">Default Type</label>
<div class="col-lg-6 col-md-6">
<select ng-model="chartConfig.options.chart.type" ng-options="t.id as t.title for t in chartTypes"></select>
</div>
</div>
</div>
</div>
<div class="form-group">
<span class="col-md-2 control-label">Series</span>
<div class="col-md-6">
<div class="form-group row" ng-repeat="ser in chartSeries">
<div class="row-fluid">Title <input ng-model="ser.name"></div>
<div class="row-fluid">Type <select ng-model="ser.type" ng-options="t.id as t.title for t in chartTypes"></select></div>
<div class="row-fluid">Color <input ng-model="ser.color"></div>
<div class="row-fluid">Width <input ng-model="ser.lineWidth"></div>
<div class="row-fluid">Dash Style <select ng-model="ser.dashStyle" ng-options="ds.id as ds.title for ds in dashStyles"></select></div>
<div class="row-fluid"><label><input type="checkbox" ng-model="ser.connectNulls"> interpolate</label></div>
<div class="row-fluid"><button ng-click="removeSeries($index)">Delete</button></div>
</div>
</div>
</div>
<div class="row">
<div class="row"><button ng-click="addSeries()">Add Series</button></div>
<div class="row"><button ng-click="addPoints()">Add Points to Random Series</button></div>
<div class="row"><button ng-click="removeRandomSeries()">Remove Random Series</div>
<div class="row"><button ng-click="toggleHighCharts()">HighChart/HighStock</div>
<div class="row"><button ng-click="replaceAllSeries()">Replace all series</button></div>
<div class="row">Min: <input type="number" ng-model="chartConfig.xAxis.currentMin"></div>
<div class="row">Max: <input type="number" ng-model="chartConfig.xAxis.currentMax"></div>
</div>
</div>
<div class="modal-footer">
<button ng-click="dismiss()" class="btn btn-danger pull-left" tabindex="-1"><i class="glyphicon glyphicon-remove"></i>Cancel</button>
<button type="submit" class="btn btn-danger pull-left" ><i class="glyphicon glyphicon-ok"></i>Save</button>
</div>
</form>
</div>
Output:
I need to align the buttons in the same line as how the input boxes are aligned. how can i do that?
Use ul li instead of div row. Like,
<div class="row">
<ul class="liInline">
<li>
<button ng-click="addSeries()">
Add Series</button></li>
<li>
<button ng-click="addPoints()">
Add Points to Random Series</button></li>
<li>
<button ng-click="removeRandomSeries()">
Remove Random Series</button></li>
<li>
<button ng-click="toggleHighCharts()">
HighChart/HighStock</button></li>
<li>
<button ng-click="replaceAllSeries()">
Replace all series</button></li>
</ul>
</div>
Add CSS to your page for buttons display in one line.
<style type="text/css">
.liInline li
{
display: inline;
margin: 0 5px;
list-style: none;
}
</style>
I have a panle body that including an image and button under it.
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<img src="http://placehold.it/70x50" class="img-thumbnail img-radio">
<button type="button" class="btn btn-primary btn-radio btn-xs">img-1</button>
<input type="checkbox" id="left-item" class="hidden">
</div>
<div class="col-md-6">
<img src="http://placehold.it/70x50" class="img-thumbnail img-radio">
<button type="button" class="btn btn-primary btn-radio btn-xs">img-2</button>
<input type="checkbox" id="middle-item" class="hidden">
</div>
</div>
</div>
I could not set alignment of button and image. Button should be under image and center. I could create a temporary solution with custom css but I want to learn is there a solution with bootstrap.
Since the labels are of inline display in nature, the class text-center does the trick for you!
<div class="panel-body">
<div class="row">
<div class="col-md-6 text-center">
<img src="http://placehold.it/70x50" class="img-thumbnail img-radio">
<button type="button" class="btn btn-primary btn-radio btn-xs">img-1</button>
<input type="checkbox" id="left-item" class="hidden">
</div>
<div class="col-md-6 text-center">
<img src="http://placehold.it/70x50" class="img-thumbnail img-radio">
<button type="button" class="btn btn-primary btn-radio btn-xs">img-2</button>
<input type="checkbox" id="middle-item" class="hidden">
</div>
</div>
Preview
Fiddle: http://www.bootply.com/QwYES83I3B
Try this:
DEMO
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="col-md-12 text-center">
<img src="http://placehold.it/70x50" class="img-thumbnail img-radio" />
</div>
<div class="col-md-12 text-center">
<button type="button" class="btn btn-primary btn-radio btn-xs">img-1</button>
<input type="checkbox" id="left-item" class="hidden" />
</div>
</div>
<div class="col-md-6">
<div class="col-md-12 text-center">
<img src="http://placehold.it/70x50" class="img-thumbnail img-radio" />
</div>
<div class="col-md-12 text-center">
<button type="button" class="btn btn-primary btn-radio btn-xs">img-2</button>
<input type="checkbox" id="middle-item" class="hidden" />
</div>
</div>
</div>
</div>