Bootstrap Gridsystem

Question

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

Ananth G · Answer

head > title > Bootstrap Example title > meta charset = utf-8 > meta name = viewport content = width=device-width initial-scale=1 > link rel = stylesheet href = https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css > script src = https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js > script > script src = https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js > script > head > body > div class = container-fluid > div class = row > div class = col-sm-3 > div class = col-sm-4 > label for = usr > Item1: label > div > div class = col-sm-8 > input type = text class = form-control id = usr > div > div > div class = col-sm-3 > div class = col-sm-4 > label for = usr > Item2: label > div > div class = col-sm-8 > input type = text class = form-control id = usr > div > div > div class = col-sm-3 > div class = col-sm-4 > label for = usr > Item3: label > div > div class = col-sm-8 > input type = text class = form-control id = usr > div > div > div class = col-sm-3 > div class = col-sm-4 > div > div class = col-sm-8 > button type = button style = width:100% class = btn btn-primary > Primary button > div > div > div > div class = row style = height:30px > div > div class = row > div class = col-sm-3 > div class = col-sm-4 > label for = usr > Name: label > div > div class = col-sm-8 > input type = text class = form-control id = usr > div > div > div class = col-sm-3 > div class = col-sm-4 > label for = usr > Age: label > div > div class = col-sm-8 > input type = text class = form-control id = usr > div > div > div class = col-sm-3 > div class = col-sm-4 > label for = usr > Address: label > div > div class = col-sm-8 > input type = text class = form-control id = usr > div > div > div class = col-sm-3 > div class = col-sm-4 > label for = usr > Pin_Code: label > div > div class = col-sm-8 > input type = text class = form-control id = usr > div > div > div > div class = row style = height:30px > div > div class = row > div class = col-sm-3 pull-right > div class = col-sm-4 > div > div class = col-sm-8 > button type = button style = width:100% class = btn btn-primary > Primary button > div > div > div > div > body >

Ananth G · Answer

Use this format div class = container-fluid > h1 > Hello World! h1 > p > Resize the browser window to see the effect. p > div class = row > div class = col-sm-3 > div class = col-sm-6 > label for = usr > Name: label > div > div class = col-sm-6 > input type = text class = form-control id = usr > div > div > div class = col-sm-3 > div class = col-sm-6 > label for = usr > Name: label > div > div class = col-sm-6 > input type = text class = form-control id = usr > div > div > div class = col-sm-3 > div class = col-sm-6 > label for = usr > Name: label > div > div class = col-sm-6 > input type = text class = form-control id = usr > div > div > div class = col-sm-3 > button type = button class = btn btn-primary > Primary button > div > div > div >

Antony Clinton · Answer

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 G · Answer

i will explain bootstrap grid system div class = col-sm-3 > this above col-sm-3 class have mutiple div but total must 12( col-sm-4+col-sm-8 ) Example : col-sm-3 contain div tag that class total must 12 Example2 contain div tag that class total must 12 Example2 contain div tag that class total must 12

Ananth G · Answer

if you update ur html code  it help to give a solution

Ananth G · Answer

if you send scrn sht i will give solution

Ananth G · Answer

can you share screen st

Ananth G · Answer

add this code in head page

Antony Clinton · Answer

hi ananth but the textbox size is same for all the fields. It is not as expected. Am working on it. Need your help too please...

Antony Clinton · Answer

hi ananth i have attached the screenshot. Please have this as your reference and kindly help. Thank you so much.

Antony Clinton · Answer

thank you so much ananth. But it is giving lot of space between the label and textbox. Please help

Khaja Moizuddin · Answer

http://getbootstrap.com/getting-started/ You can read this documentation