Bootstrap Gridsystem

Antony Clinton

i need a page in this format only by using Bootstrap gridsystems. Please help me,

label textbox label textbox label textbox Button

12 Replies

Know the answer? Post it — somebody with the same question will find it here.

Ananth G9y ago
Accepted answer
1. <head>
2. <title>Bootstrap Exampletitle>
3. <meta charset="utf-8">
4. <meta name="viewport" content="width=device-width, initial-scale=1">
5. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
6. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">script>
7. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">script>
8. head>
9. <body>
11. <div class="container-fluid">
12. <div class="row">
13. <div class="col-sm-3" >
14. <div class="col-sm-4" >
15. <label for="usr">Item1:label>
16. div>
17. <div class="col-sm-8" >
18. <input type="text" class="form-control" id="usr">
19. div>
20. div>
21. <div class="col-sm-3" >
22. <div class="col-sm-4" >
23. <label for="usr">Item2:label>
24. div>
25. <div class="col-sm-8" >
26. <input type="text" class="form-control" id="usr">
27. div>
28. div>
29. <div class="col-sm-3" >
30. <div class="col-sm-4" >
31. <label for="usr">Item3:label>
32. div>
33. <div class="col-sm-8" >
34. <input type="text" class="form-control" id="usr">
35. div>
36. div>
37. <div class="col-sm-3" >
38. <div class="col-sm-4" >
40. div>
41. <div class="col-sm-8" >
42. <button type="button" style="width:100%" class="btn btn-primary">Primarybutton>
43. div>
44. div>
46. div>
47. <div class="row" style="height:30px">div>
48. <div class="row">
49. <div class="col-sm-3" >
50. <div class="col-sm-4" >
51. <label for="usr">Name:label>
52. div>
53. <div class="col-sm-8" >
54. <input type="text" class="form-control" id="usr">
55. div>
56. div>
57. <div class="col-sm-3" >
58. <div class="col-sm-4" >
59. <label for="usr">Age:label>
60. div>
61. <div class="col-sm-8" >
62. <input type="text" class="form-control" id="usr">
63. div>
64. div>
65. <div class="col-sm-3" >
66. <div class="col-sm-4" >
67. <label for="usr">Address:label>
68. div>
69. <div class="col-sm-8" >
70. <input type="text" class="form-control" id="usr">
71. div>
72. div>
73. <div class="col-sm-3" >
74. <div class="col-sm-4" >
75. <label for="usr">Pin_Code:label>
76. div>
77. <div class="col-sm-8" >
78. <input type="text" class="form-control" id="usr">
79. div>
80. div>
82. div>
83. <div class="row" style="height:30px">div>
84. <div class="row">
85. <div class="col-sm-3 pull-right" >
86. <div class="col-sm-4" >
88. div>
89. <div class="col-sm-8" >
90. <button type="button" style="width:100%" class="btn btn-primary">Primarybutton>
91. div>
92. div>
93. div>
96. div>
98. body>
0

yes ananth i am understanding it. But don't know why the textbox is getting small and the output is not as expected. Kindly, let me know once you get the result ans i will update once i get any changes.Thanks in advance...

Ananth G9y ago

i will explain bootstrap grid system