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>
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>Item 1</li>
<li>Item 2</li>
<li>Item 3</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>Item 1</li>
<li>Item 2</li>
<li>Item 3</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
you can use grid system
col-xs-12 for smaller screen
col-md-3 for medium
you can use col-sm-3 here in your case
Related
I would like to make a layout where my logo is at the left, and my title and menu are on the right of the logo. When the screen is too small then it should be logo, title and then menu. (On either side there is a col-lg-2)
My attempt was:
<header class="row">
<div id="logo"class="col-xs-12 col-sm-2
col-md-2 col-md-offset-2 col-lg-2 col-lg-offset-2">
</div>
<div id="title_menu" class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div id="title">
Title
</div>
<nav id="navigation_bar" >
Menu
</nav>
</div>
</header>
<div class="row">
<div id="something" class="col-xs-12 col-sm-12
col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2">
something
</div>
header {
background: #0090e5 !important;
}
#logo {
height:250px;
}
#title_menu {
height:50px;
}
But on an IPhone the title and menu disappear and seem to be behind the element in the row underneath. I am using the height, because I want everything to be align with the bottom of the row.
I'm not sure exactly what you're going for, but there appears to be quite a bit of redundancy in your classes. One thing you should know about Bootstrap is that you only need to specify the number of columns on each size if the number of columns is changing. For instance, if you want a div to take up 2 columns on small, medium and large, you only need to define small, every size above small will automatically use the same number of columns. Similarly, you don't need to specify col-xs-12 because that is already assumed. So you could simplify it to this(notice how I'm only defining the number of columns for sm and everything else is taken care of automatically):
<div class="container">
<header class="row">
<div id="logo" class="col-sm-2">
<img src="http://placehold.it/50x50">
</div>
<div id="title_menu" class="col-sm-5">
<div id="title">
Title
</div>
</div>
<div class="col-sm-5">
<nav id="navigation_bar">
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
</ul>
</nav>
</div>
</header>
</div>
This will display the logo, title and menu all on the same line from small up and it will show the logo, title and menu stacked on mobile(xs).
Bootply example
I am new Bootstrap and have been trying to get my head around documentation but finding it a bit confusing.
My page has three blocks: a main header, a side navigation, and a main content.
I could easily do a layout with CSS but I am using Bootstrap and wanted to use this to do a responsive layout.
On a regular screen I would like it to be as follows (where header takes full width):
[HEADER]
[NAV][MAIN]
Then on a small screen:
[HEADER]
[NAV]
[MAIN]
But on a smallscreen I would like nav to be collapsed. My nav is "nav nav-list bs-docs-sidenav" and I am not sure how to get that effect with this.
Thanks very much for any help.
Here is the html. Not that it gives you much more info.
<body>
<header>
<h1>title</h1>
</header>
<nav>
<ul id="nav" class="nav nav-list bs-docs-sidenav" >
<li><a class="parent">item 1</a>
<ul class="bs-docs-sidenav" style="display:none;">
<li>
<a href="#">
subitem 1
</a>
</li>
</ul>
</li>
<li>item 2</li>
</ul>
</nav>
<main class="content">
<p>content</p>
</main>
</body>
The answer is to use col--
This tells you how many columns the block should take up on different size screens.
Still would like the menu box to shrink into 1 item on a small screen, but this is good enough.
<header class="row col-xs-12">
</header>
<nav class="row col-xs-12 col-sm-4 ">
</nav>
<main class="row col-xs-12 col-sm-8">
</main>
I'm using bootstrap and I need to implement a list of items to be displayed over many columns.
Bootstrap uses a grid that is 12 cells wide.
My item being 3 cells wide (that's how I roll), it means that a row holds only 4 items.
item 1 | item 2 | item 3 | item 4
item 5
My item is not a simple text but a "card" :
The code can be found there.
The straightforward way to write this would be:
<div class="row">
<div class="col-md-3">[item 1]</div>
<div class="col-md-3">[item 2]</div>
<div class="col-md-3">[item 3]</div>
<div class="col-md-3">[item 4]</div>
</div>
<div class="row">
<div class="col-md-3">[item 5]</div>
</div>
But it feels non semantic.
The fact that my items are displayed on many rows is truly pertaining to presentation choices.
Besides, if I now decide that my items should be wider, I have to change the structure of my document (as opposed to class attributes).
Besides that way of doing things is even more artificial on a mobile screen were all my items are displayed on top of each other.
Is there another way to write my list? A more 'semantic' way ?
From my stand, the best way to display an Unordered LIST with hypertext markup is :
<ul>
<li>
So, you can try a list of ul>li setting your <li> width to 25%, float-left.
Your 5th element is supposed to stack bottom left.
If you still want to use bootstrap grid system, just put your 'items' inside the same row.
<div class="row">
<div class="col-md-3">item 1</div>
<div class="col-md-3">item 2</div>
<div class="col-md-3">item 3</div>
<div class="col-md-3">item 4</div>
<div class="col-md-3">item 5</div>
<div class="col-md-3">item 6</div>
<div class="col-md-3">item 7</div>
</div>
The overflowed elements will be stack bottom left.
So give it a try:
<ul class="row">
<li class="col-md-3">item 1</li>
You could use a UL list..
<ul class="list-unstyled">
<li class="col-md-3">item 1</li>
<li class="col-md-3">item 2</li>
<li class="col-md-3">item 3</li>
<li class="col-md-3">item 4</li>
<li class="col-md-3">item 5</li>
<li class="col-md-3">item 6</li>
<li class="col-md-3">item 7</li>
</ul>
Demo: http://bootply.com/91825
However, you'd need to change this markup if you decide to make things wider.
1.You can always change the default 12 space grid to whatever you prefer by setting #gridColumns to your preference in this page or overriding the css.less if you prefer.
2.With Bootstrap you can use the custom class inline to build your list:
<ul class="inline">
<li>...</li>
</ul>
3.But as Milche refered col-md-3 will do the trick if you stick to one row. I think I would use a tag though, to make clear it's inline.
I have a page developed using twitter bootstrap version 2. I have a row that is divided into span8 and span4. Span8 has some image slider (built with jquery) and span4 has just some links. When the page loads, all the links in the span 4 is displayed first and then when the image loads, the text gets pushed to right. Is there a way to prevent this shift/jump effect?
<div class="row-fluid">
<div class="span8" id="imgDiv">
<!-- Image slider goes here -->
</div>
<div class="span4" id="linksDiv">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</div>
</div>
I have devised the following solution. Here's a JSFiddle: http://jsfiddle.net/sJq6y/
HTML
<div class="container">
<div class="row-fluid">
<div class="span8">
<div class="imgDiv">
<h1> Image slider goes here </h1>
</div>
</div>
<div class="span4 linksDiv">
<ul>
<li>Link One
</li>
<li>Link Two
</li>
<li>Link Duo
</li>
</ul>
</div>
</div>
</div>
CSS
.linksDiv ul {
list-style:none;
background-color:lightgrey;
width:90px;
height:90px;
padding:10px;
}
.imgDiv h1 {
text-align:center;
color:tomato;
}
Images
Probably due to styling coming from #imgDiv and #linksDiv.
Would this option work for you?
<div class="row-fluid">
<div class="span8">
<div id="imgDiv">
<!-- Image slider goes here -->
</div> <!-- end #imgDiv -->
</div>
<div class="span4">
<div id="linksDiv">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</div> <!-- end #linksDiv -->
</div>
</div>
Good luck!
I'm using Bootstrap to create a website. I need to create an ordered list that has text then an image next to it. For some reason, the content of the list is shifted by one line so that it looks like this:
1.
text here [ image here ]
2.
text here [ image here ]
How do I get it to align properly?
here is my code:
<ol>
<li>
<div class="span12">
<div class="span6">Test</div>
<div class="span6"><img src="asdfd.png"></div>
</div>
<div class="clearfix"></div>
</li>
<li>
<div class="span12">
<div class="span6">Test</div>
<div class="span6"><img src="asdfds"></div>
</div>
<div class="clearfix"></div>
</li>
</ol>