Bootstrap show div in same row

Question

I need create a page with show Polls to users can vote. I want to show all in one row but if window go more little I want that the divs go down like this picture.

<div class="container-fluid">
<div class="row">
    <div class="col-md-3">
        <div class="header-encuesta">
            <span class="text-white">@Model.Name</span>
        </div>
        <div class="well">
            @using (Html.BeginForm("Vote", "Poll", routeValues: new { id = Model.Id, option = 0 }))
            {
                <ul>
                    @foreach (PollOptions option in Model.PollOptions)
                    {
                        <li>@Html.CheckBox(option.OptionName, false, new { onclick = "ActionVote('" + (Model.Id) + "','" + (option.Id) + "')" }) @option.OptionName</li>
                    }
                </ul>
            }
        </div>
    </div>
</div>

Answer 1

Given your code example, this should just naturally work by the way which Bootstrap's grid system functions (assuming the window its rendering in works for the "md" (medium) sized grid since that's what you've used in your code).

Here is a JS Fiddle https://jsfiddle.net/ecztz3fq/ example of the below code.

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3">
            <div class="header-encuesta">
                <span class="text-white">Header</span>
            </div>
            <div class="well">
                <ul>
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                </ul>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="header-encuesta">
                <span class="text-white">Header</span>
            </div>
            <div class="well">
                <ul>
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

You can pull up the example, run it, and then drag the divider in the JS Fiddle page that separates the "Result" and "CSS" windows from the "HTML" and "JS" windows. As you drag you'll see the wells render horizontally when the window is large, and then render stacked if the window becomes too small.

The size at which a column will stack vs. render horizontally is based on the xs, sm, md, lg designations in the column's class name.

Bootstrap grid system docs: http://getbootstrap.com/css/#grid