I am learning Rails and I am using bootstrap-sass gem. My layout looks like this:
<main role="main">
<div class="container">
<div class="content">
<div class="row">
<div class="span3">
LEFT
</div>
<div class="span9">
<%= render 'layouts/messages' %>
<%= yield %>
</div>
</div>
<footer>
</footer>
</div>
</div>
</main>
The problem is that each of the two columns, .span3 and .span 9 are shown full width and one beneath the other. This is the same for any .span combination.
What am I doing wrong?
Thanks!
You might be using bootstrap 2 syntax with bootstrap 3. span9 changed to col-md-9 (its not exactly like that, see getbootstrap.com for details on how the new grid works).
Which version of bootstrap are you using? If it's bootstrap version 3 it's switched to col-md-xx. So you probably need to use col-md-3 & col-md-9.
Related
This code works perfectly in desktop on windows. but when i test it in safari ios the third col always collapse and jump to a new line.
here is the code:
<div class="container">
<div class="row">
<div class="col-4">
First, but unordered
</div>
<div class="col-4 order-sm-4">
Second in sm+, last in mobile
</div>
<div class="col-4 order-3">
Last in sm+, Second in mobile
</div>
</div>
</div>
Anybody else experienced it? is it a bug?
Thanks
I think you wrote the order classes wrong. Bootstrap is mobile first so col-sm for example is sm and up (to lg).
This is probably what you want:
<div class="container">
<div class="row">
<div class="col-4">
First, but unordered
</div>
<div class="col-4 order-3 order-sm-1">
Second in sm+, last in mobile
</div>
<div class="col-4 order-2">
Last in sm+, Second in mobile
</div>
</div>
</div>
Tell me if there's any issue with this code!
Currently I am making a twitter clone using RubyOnRails and bootstrap as the framework. When trying to distribute some text in a post panel using the "col-sm" div class, the text seems jammed together on the left,
as seen here.
Here is my code:
<div class="row">
<div class="col-xs-3">
<div class="panel panel-default">
<div class="panel-body">
<p>status</p>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<p>trend</p>
</div>
</div>
</div>
<div class="col-xs-6">
<%= render '/components/post_form' %><br></br>
<% for #p in #posts %>
<div class="panel panel-default post-panel">
<div class="panel-body">
<div class="col-sm-1">
AVATAR
</div>
<div class="col-sm-11">
<p><%= #p.content %></p>
</div>
<div class="col-sm-12">
LINKS
</div>
</div>
</div>
<% end %>
</div>
<div class="col-xs-3">
<div class="panel panel-default">
<div class="panel-body">
<p>about</p>
</div>
</div>
</div>
</div>
I am using the latest bootstrap sass version 3.3.6 which is included in the gemfile. Is there something wrong with the code or does the latest version of bootstrap mean I need to do something different?
Look at this section:
<div class="col-sm-1">
AVATAR
</div>
<div class="col-sm-11">
<p><%= #p.content %></p>
</div>
<div class="col-sm-12">
LINKS
</div>
The first issue is the text "AVATAR" is wider than 1 bootstrap column, so it's extending out of your container. using col-sm-2/col-sm-10 may fix the issue.
Second, column sizes should add up to 12 columns per row. Here you have a col-sm-1, col-sm-11, and col-sm-12 all in the same row.
I installed Bootstrap for my Rails and decided to test out making a grid. This is my code.
<div class="row">
<div class="span4">
<h1>About the Creator</h1>
<p>
</p>
</div>
<div class="span8">
<h1>About the Site</h1>
<p>
</p>
</div>
</div>
This is what it looks like. As you can see, it's in 2 rows, however it should be in 2 columns. There doesn't seem to be anything wrong with the code itself as far as I can see. I don't think I made a mistake during installation, because when I installed bootstrap, it automatically stylized my webapp. Any help?
What version of bootstrap are you using? In recent versions of bootstrap the syntax is <tag class="col-xs-4"> rather than <tag class="span4">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-4">
<h1>About the Creator</h1>
<p>
</p>
</div>
<div class="col-xs-8">
<h1>About the Site</h1>
<p>
</p>
</div>
</div>
There are 4 classes you can use in order to specify column size:
col-xs-#
col-sm-#
col-md-#
col-lg-#
They were introduced so that you could have columns have different portions of the screen on different platforms. For example, perhaps you want your main content to take up 12 columns, instead of 10, on a mobile phone. TO do this do:
<div class="row">
<div class="col-xs-12 col-md-10">
Content
</div>
</div>
I am attempting to use a calendar icon from Foundation Icon set next to a rails form input, and figured a quick way to align the two while making it look good was to use Foundation's postfix labels. Here is my code followed by a screenshot, which shows that they are compatible, but the main priority of getting them to be aligned with each other fails to happen:
<div class="row collapse">
<div class="fourteen mobile-three columns">
<label for="fundraiser-expire-at">End Date</label>
<%= form.text_field 'expire_at',
class: 'datepicker' %>
</div>
<div class="two mobile-one columns">
<span class="postfix">
<i class="general enclosed foundicon-calendar show_datepicker"></i>
</span>
</div>
</div>
Does anyone know a way I can get what I'm looking for hear? Will it require css? I'm sure that css is A solution, I'm just wondering if I can use Foundation built in styling to get this working...
I contemplated deleting this question because it ended up being a really easy fix, but I figured that SOMEONE, SOMEWHERE, MIGHT benefit from this question persisting. The problem lies with the label being in the same section of fourteen columns as the input. The postfix does its best to align with the combo of the label and input. If you put the label outside the fourteen columns so that the input is the only member of that section, the postfix aligns itself with the input.
Adding to Jake Smiths's answer I will show where to change to make it the postfix get nicely aligned with the field. The example bellow uses Foundation 5.1.1 and Ruby on Rails 3.2.
<div class="row">
<div class="large-4 columns">
<div class="row collapse">
<div class="small-9 columns">
<%= f.label :altitude %> <!-- This line here must be moved outside this div -->
<%= f.text_field :altitude %>
</div>
<div class="small-3 columns">
<span class="postfix radius">meters</span>
</div>
</div>
</div>
</div>
This results in an not aligned field and label.
If we change it to:
<div class="row">
<div class="large-4 columns">
<div class="row collapse">
<%= f.label :altitude %> <!-- Now it is happy and aligned :-) -->
<div class="small-9 columns">
<%= f.text_field :altitude %>
</div>
<div class="small-3 columns">
<span class="postfix radius">meters</span>
</div>
</div>
</div>
</div>
I would like to know if it's a bug or some mistake of mine.
In my Rails project, twitter's bootstrap isn't aligning the container at the center.
My code:
<div class="container">
<div class="span12" style="background-color:blue; color:white;">
<%= yield %> <!-- This get the sample text "Some test." -->
</div>
</div>
Here's an image of the bug.
http://img543.imageshack.us/img543/3405/screenshot20120702at035.png
Thanks a lot everybody! :-)
<div class="container">
<div class="row">
<div class="span12">
</div>
</div>
</div>
DEMO