SPECIAL OFFER: Only $69 for access to everything in OSTraining for 1 year! You save $75!  1
Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!

Bootstrap responsive theming of a block

4 years 11 months ago - 4 years 11 months ago #117807 by ahmedsiddiq
Bootstrap responsive theming of a block was created by ahmedsiddiq
Hi

Going through at bootstraps tutorial regarding responsive theming of blocks.

The tutorial show to add classes to blocks ( tutorial is using D6 while I am using D 7 )

following is a screen shot of tutorial



now inorder to apply " col-xs-12 col-sm-12 col-md-4 " in my D7 to do responsiving theming of a block, where should i add " col-xs-12 col-sm-12 col-md-4 ", because I dont see CSS Class(es) section in my drupal view block config page, as is in D6.

Please note that the tutorial is using symentic view , while I am using simple view ( my theme is bootstrap).

pls guide.

regards
Ahmed

This message has an attachment image.
Please log in or register to see it.

Please Log in to join the conversation.

4 years 11 months ago #117808 by Valentin
Replied by Valentin on topic Bootstrap responsive theming of a block
Hi Ahmed,
  • Which tutorials are you watching?
  • What's the url of the page that renders that view?
Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

4 years 11 months ago #117821 by ahmedsiddiq
Replied by ahmedsiddiq on topic Bootstrap responsive theming of a block
Hi

This is the video



& following is the url of the view ( block ) on which I want responsive theming done ( theme bootstrap).

http://localhost/drupal/admin/structure/views/view/b1/edit.

regards
Ahmed

Please Log in to join the conversation.

4 years 11 months ago #117823 by Valentin
Replied by Valentin on topic Bootstrap responsive theming of a block
Is there a chance this project would be in a live server? In that way we could take a look and see what's going on.

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

4 years 11 months ago - 4 years 11 months ago #117824 by ahmedsiddiq
Replied by ahmedsiddiq on topic Bootstrap responsive theming of a block
Hi

I have figured out the where to write the class in a view ( block ).

Reference to following image.



After applying the above classes , block 2 should move next to block 1 on on desktop , and its not moving next to block 1, can you please guide , as why is this so ?

regards
Ahmed

This message has an attachment image.
Please log in or register to see it.

Please Log in to join the conversation.

4 years 11 months ago #117828 by Valentin
Replied by Valentin on topic Bootstrap responsive theming of a block
This would require to login in your site to take a closer look.

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

4 years 11 months ago #117833 by ahmedsiddiq
Replied by ahmedsiddiq on topic Bootstrap responsive theming of a block
Hi

I am using local host.

regards
Ahmed

Please Log in to join the conversation.

4 years 11 months ago #117834 by Valentin
Replied by Valentin on topic Bootstrap responsive theming of a block
To move one block next to the other in same row, it's required both to be wrapped by a single container. Please check the html layout with Firebug.
<div class="container">
	<div>this is blok 1</div>
	<div>this is blok 2</div>
</div>

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

4 years 11 months ago #117841 by ahmedsiddiq
Replied by ahmedsiddiq on topic Bootstrap responsive theming of a block
Hi

Thanks for your reply,

Can you please have a look here.




please guide.

regards
Ahmed

This message has an attachment image.
Please log in or register to see it.

Please Log in to join the conversation.

4 years 11 months ago - 4 years 11 months ago #117842 by ahmedsiddiq
Replied by ahmedsiddiq on topic Bootstrap responsive theming of a block
Hi

Attached is text file for your reference too.





regards
Ahmed

This message has an attachment file.
Please log in or register to see it.

Please Log in to join the conversation.

4 years 11 months ago #117843 by Valentin
Replied by Valentin on topic Bootstrap responsive theming of a block
That explains why the blocks are not in the same row, unfortunately the layout makes not possible achieve what you need.

Are you using Semantyc View and Drupal 7, right? Simple View is for Drupal 6 only.

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

4 years 11 months ago #117845 by ahmedsiddiq
Replied by ahmedsiddiq on topic Bootstrap responsive theming of a block
Hi

No, I am not using semantic views , I am using simple views.

Should I use semantic view ? ( in video semantic view is used.

regards
Ahmed

Please Log in to join the conversation.

4 years 11 months ago #117849 by Valentin
Replied by Valentin on topic Bootstrap responsive theming of a block
What I mean, are you are using this module and Drupal 7?

Please clarify

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

4 years 11 months ago - 4 years 11 months ago #117851 by ahmedsiddiq
Replied by ahmedsiddiq on topic Bootstrap responsive theming of a block
Hi

Following are the details.

1) I am using Drupal 7
2) Theme being used is bootstrap
3) Semantic views module is not installed on my system
4) I am not using simple views.
5) i am using www.drupal.org/project/views

regards
Ahmed

Please Log in to join the conversation.

4 years 11 months ago - 4 years 11 months ago #117857 by Valentin
Replied by Valentin on topic Bootstrap responsive theming of a block
I see. Thanks for the clarification.

There is a module to include automatically the bootstrap structure inside views: www.drupal.org/project/views_bootstrap

Worth testing; by using this module you would reproduce in a single view the two columns. It's that something may works for you?

Looking forward to help you

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

4 years 11 months ago #117906 by ahmedsiddiq
Replied by ahmedsiddiq on topic Bootstrap responsive theming of a block
Hi

I used www.drupal.org/project/views_bootstrap & it did not work.

Now as per the tutorial , I am using semantic view, responsiveness is effective in respective blocks, but "block two" is not moving up next to "block one", ( this is the issue).



Attached is the text file for your kind review.



Please guide.

regards
Ahmed

This message has an attachment image.
Please log in or register to see it.

This message has an attachment file.
Please log in or register to see it.

Please Log in to join the conversation.

4 years 11 months ago - 4 years 11 months ago #117913 by Valentin
Replied by Valentin on topic Bootstrap responsive theming of a block
Hi Ahmed,

I do think Views Bootstrap is your best choice here since is designed to integrate with the bootstrap columns approach. Please considering reading this tutorial to see where to select the boostrap grid layout, see in the section "Bootstrap Module Layouts": www.ostraining.com/blog/drupal/bootstrap/

As I said before, this will work for single blocks, where you can split the content in 2 or more columns. I tested in local with success.

Let us know if this information was helpful

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

4 years 11 months ago #117919 by ahmedsiddiq
Replied by ahmedsiddiq on topic Bootstrap responsive theming of a block
Thanks Valentin.

reference to one of your replies on this issue which was as following.

To move one block next to the other in same row, it's required both to be wrapped by a single container. Please check the html layout with Firebug.
<div class="container">
<div>this is blok 1</div>
<div>this is blok 2</div>
</div>

Please see the following image , aint the two divs of two respective blocks with in the container div.




please guide.

regards
Ahmed

This message has an attachment image.
Please log in or register to see it.

Please Log in to join the conversation.

4 years 11 months ago #117925 by Nick
Replied by Nick on topic Bootstrap responsive theming of a block
Hi Ahmed,

Yes, and they are even within the div with class "region region-content". In order to get them to appear next to each other, you'd have to float them. We recommend taking our CSS classes to learn how:
www.ostraining.com/courses/categories/css/

As Valentin mentioned though, Views Bootstrap is likely your best bet.

Also, it would be easier for us to help if the site was live, rather than localhost, so we that can see the layout for yourselves.

Kind regards,
Nick

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

4 years 9 months ago #120052 by ahmedsiddiq
Replied by ahmedsiddiq on topic Bootstrap responsive theming of a block
Hi

This was achieved using block classes.

regards
Ahmed

Please Log in to join the conversation.

4 years 9 months ago #120062 by Valentin
Replied by Valentin on topic Bootstrap responsive theming of a block
Hi Ahmed,
Wonderful!

Let us know if we can be of any help

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!