Basic setup for Horizontal Grid using twitter bootstrap enabled themes.

This is a very basic setup for Bootstrap 2 (see comments below for Bootstrap 3), but should get you rolling fast.

  1. Edit view
  2. Set views format to "Responsive grid"
  3. Click format settings
  1. Set Number of columns to match the number of columns you would like (2, 3, 4, etc).
  2. Leave alignment set to default (horizontal).
  3. Under grid classes, set wrapper to "container-fluid" (for a fluid grid).
  4. Under row classes, set to "views-row row". (This class "row" is necessary).
  5. Under column classes, set to one of the following: "span3" for 4 columns, "span6" for 2 columns, "span4" for 3 columns. (Number of columns should match step 1)

Other various setups are possible. Please read for more information: http://getbootstrap.com/2.3.2/scaffolding.html

See example of 4 column fluid grid in pictures.

*Sorry to the mods, not sure of the proper Category and Status for this "Issue". Just saw a few others struggling with getting this started so I thought a short post might be helpful.

CommentFileSizeAuthor
#2 views-example1.png23.95 KBmach5_kel
#2 views-example2.png10.6 KBmach5_kel
#5 4-Issue-font-dependent.png25.07 KBJohnRofls
#5 3-Issue-no-occur-top-row.png26.2 KBJohnRofls
#5 2-Issue.png21.81 KBJohnRofls
#5 1-Normal.png21.11 KBJohnRofls
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

mach5_kel’s picture

mach5_kel CreditAttribution: mach5_kel commented
Issue summary: View changes

Edited for clarity and grammar.

mach5_kel’s picture

mach5_kel CreditAttribution: mach5_kel commented
Issue summary: View changes
FileSize
views-example1.png23.95 KB
views-example2.png10.6 KB
Marcela V.’s picture

Marcela V. CreditAttribution: Marcela V. commented

Hi,

I follow the steps but it didn't work for me: I just got a vertical list. So, I made a little change: I set "col-md-3" instead "span3" in Column Class. I tested it in Bootstrap and Bootstrap Business and now is working :)

torgosPizza’s picture

torgosPizza
he/him
Primary language English
Location Portland, OR
CreditAttribution: torgosPizza as a volunteer commented

Yes, it should be noted that the CSS classes in the original post appear to be for Bootstrap 2.3.2., whereas the Bootstrap framework is currently at 3.3.5..

JohnRofls’s picture

JohnRofls CreditAttribution: JohnRofls as a volunteer commented
FileSize
1-Normal.png21.11 KB
2-Issue.png21.81 KB
3-Issue-no-occur-top-row.png26.2 KB
4-Issue-font-dependent.png25.07 KB

Yes and there is little online documentation pointing to this need to use col-md-3, etc instead of span3.
I vote we add this little tid-bit to the module description as the current description is setting up people for failure.

Also, I've got this working except for one very bizarre issue which I'm not sure belongs as an issue for this module or is possibly a css / twitter bootstrap related issue..

From width 276 - 300 (nothing to do with breakpoints per say but rather because of the width of words on my view) the following happens. Picture 1 the grid is displayed as desired. In my Picture 2, we see the 5th item move to the 6th position and the 6th item move to what would be position 7. This is clearly because the "Request Content" becomes two lines long. Seems logical enough.

Then, something peculiar happens. Picture 3 shows that the second item text "Hosted Projects" becomes two lines and yet does not break the grid structure. So Font affects the responsive grid layout, but only sometimes? Which of course resolves itself when all words become two lines long.

It's the change between picture 2 and 3 that lead me to believe this is possibly an issue relevant to this module. Should I open this up as an issue for this module? Anyone got any advice?

Thanks.

sonicthoughts’s picture

sonicthoughts CreditAttribution: sonicthoughts as a volunteer commented

note in step 3: "Under grid classes, set wrapper to "container-fluid" (for a fluid grid)." Be careful as bootstrap 3 does not allow nestable containers. Bootstrap Theme probably has page in a container already. It may be necessary to clear the columns as per: http://www.bluthemes.com/blog/3/clearing-bootstrap-3-columns

henkit’s picture

henkit CreditAttribution: henkit as a volunteer commented

#3 worked for me using bootstrap, thanks Marcela!

realgt’s picture

realgt CreditAttribution: realgt commented

For anyone else who had a weird issue with grid spacing where it ends up with empty spaces, i had to add this to a custom css file.

.views-column-first { clear: left}
mach5_kel’s picture

mach5_kel CreditAttribution: mach5_kel commented

Thanks for the updates to my original post everyone. At the time bootstrap 2 was more in full force, although 3 is now the norm. At the time I was a bootstrap newb. Bootstrap 4 has been announced and alpha is out :) . I will edit the OP, so no one has to scroll down here to find out which version.

mach5_kel’s picture

mach5_kel CreditAttribution: mach5_kel commented
Issue summary: View changes

kyletaylored’s picture

kyletaylored CreditAttribution: kyletaylored as a volunteer and at LevelTen Interactive commented
Status: Needs review » Fixed

I added a link in the README.txt to this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

knalstaaf’s picture

knalstaaf CreditAttribution: knalstaaf commented

This worked for me to avoid the gaps that are caused by the default row behaviour:

.views-row:after{
  clear: none;
}