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

How to achieve the following layout

3 years 9 months ago #118883 by svezen
How to achieve the following layout was created by svezen
Hello,
let me ask a question.
Please see attached file.


There is my desired design of the page.
How to code it in Bootstrap (containers, rows, spans)?
Thank you for help.

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

Please Log in to join the conversation.

3 years 9 months ago #118884 by Nick
Replied by Nick on topic How to achieve the following layout
Hi and welcome, Svezen! :)

Good question! Could you give our HTML, CSS, and Bootstrap classes a try?
www.ostraining.com/courses/class/coding/html5
www.ostraining.com/courses/categories/css/

Once going through those, you'll be able to create the layout that you'd like and more!

Hope this helps! Let us know if you have any questions along the way and we'll be glad to answer.

Kind regards,
Nick

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

Please Log in to join the conversation.

3 years 9 months ago #118885 by svezen
Replied by svezen on topic How to achieve the following layout
Hi,
I already tried the courses of CSS and I definitely know basics of HTML.
However in your courses there is no mix of multiple rows in one row segment applicable for bootstrap.
Can you provide me with the correct coding, please?
Thank you
Zdenek

Please Log in to join the conversation.

3 years 9 months ago #118886 by Nick
Replied by Nick on topic How to achieve the following layout
Hi Zdenek,

One quick caveat before we start, please check out our Support FAQ on the limit of our support for code: www.ostraining.com/support-faq/

That being said, we’d be happy to create a tutorial for you demonstrating how to create this layout. I'll send you the link once it's created.

Kind regards,
Nick

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
The following user(s) said Thank You: svezen

Please Log in to join the conversation.

3 years 9 months ago #119084 by svezen
Replied by svezen on topic How to achieve the following layout
Do you have a solution for me already?

Please Log in to join the conversation.

3 years 9 months ago #119104 by Valentin
Replied by Valentin on topic How to achieve the following layout
Hi Zdenek,

To achieve the layout from your pdf use this sample code:
<div class="container-fluid">
 
	<div class="row-fluid">
  		<div class="span12">
      		span12
  		</div>
	</div>
 
	<div class="row-fluid">
  		<div class="span6">
      		span6
  		</div>
  		<div class="span6">
  			<div class="row-fluid">
      			<div class="span6">
      				span3
  				</div>
  				<div class="span6">
      				span3
  				</div>
  			</div>
  			<div class="row-fluid">
      			<div class="span12">
      				span6
  				</div>
  			</div>
  		</div>
	</div>
 
</div>

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
The following user(s) said Thank You: svezen

Please Log in to join the conversation.

3 years 9 months ago #119110 by svezen
Replied by svezen on topic How to achieve the following layout
So, everytime I type in
<div class="row-fluid">
there is again 12 columns even it is in reality half of the page?

Please Log in to join the conversation.

3 years 9 months ago #119113 by Valentin
Replied by Valentin on topic How to achieve the following layout
That's correct!

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!