Show several questions in one line/row.
Open in new window

Set question.startWithNewLine property to false (true by default) to show it on the same line with the previous question.

Change question title location: default is 'top'.

survey.questionTitleLocation = 'yourValue'; survey.render();

Survey.Survey.cssType = "bootstrap";
Survey.defaultBootstrapCss.navigationButton = "btn btn-green";

window.survey = new Survey.Model({
 questionTitleLocation: "bottom", showQuestionNumbers: "off",
 pages: [
  { name: "Address",  title: "Address",
   questions: [
    { type: "text", name: "address1", title: "Street Address" },
    { type: "text", name: "address2", title: "Address Line 2" },
    { type: "text", name: "city", title: "City" },
    { type: "text", name: "state", startWithNewLine: false, title: "State / Province / Region" },
    { type: "text", name: "zip", title: "Zip / Postal Code" },
    { type: "dropdown", name: "country", startWithNewLine: false, title: "Country",
        choicesByUrl: {url: "", path: "RestResponse;result", valueName: "name"}    }
survey.onComplete.add(function(result) {
	document.querySelector('#surveyResult').innerHTML = "result: " + JSON.stringify(;


<!DOCTYPE html>

    <title>Welcome to JQuery</title>
    <script src=""></script>
    <script src=""></script>
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="./index.css">

    <div id="surveyElement"></div>
    <div id="surveyResult"></div>
    <script src="./index.js"></script>


.btn-green {
  background-color: #1ab394;
  color: #fff;
  border-radius: 3px;

.btn-green:hover, .btn-green:focus {
    background-color: #18a689;
    color: #fff;

.panel-footer {
    text-align: right;
    background-color: #fff;