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

Twitter Bootstrap

4 years 8 months ago - 4 years 8 months ago #108906 by FireFly9
Twitter Bootstrap was created by FireFly9
I get a 404 when I go to the GitHub site for the Twitter Bootstrap - (re video - Responsive Design by Rod).
The tutorial breaks down completely when you can't find the proper source resource that Rod is using.
A source note needs to be added, as the download link that is there now doesn't point to the correct file. The url shown in the video doesn't exist any longer.
So I grabbed the 'source code' download from
getbootstrap.com/getting-started/
which gives you bootstrap-3.3.4.zip
But after extraction and when I go to localhost/bootstrap-3.3.4/docs/index.php I don't see the proper display and there is nothing in the docs directory that matches any of what Rod's video shows.
getbootstrap.com no longer has a scaffold tab.

If OST made the download that Rod used available as a zipped file then perhaps one could use that until the video is corrected.

Also - the 1st quiz (AGAIN) asks questions that are not mentioned until later in the tutorial. I suggest that OST stop using a random selection for the questions but keep them in order and assign questions 'per section', since that's the way the quizzes are set up. From now on I will not do any quizzes until I complete all the sections because I can't depend on quiz being limited to what was covered. The auto forward from one tutorial section to the next also needs to be turned off (by default) because it will go into the quiz panel without any heads up. One learns this by experience, but a new member will get caught unaware.

AND - Rod never does go over the construction aspect of the page from his original layout to something that includes a grid system and spans. This would have been helpful for practice on the coding side of things.

Please Log in to join the conversation.

4 years 8 months ago #108941 by Valentin
Replied by Valentin on topic Twitter Bootstrap
Hi FF9,

Thanks for sharing your comments.

If OST made the download that Rod used available as a zipped file then perhaps one could use that until the video is corrected.

The class is based on Bootstrap 2.x, the link to download that specific version is located belowe this video: www.ostraining.com/courses/session/codin...bootstrap/bootstrap/

Also - the 1st quiz (AGAIN) asks questions that are not mentioned until later in the tutorial. I suggest that OST stop using a random selection for the questions but keep them in order and assign questions 'per section', since that's the way the quizzes are set up. From now on I will not do any quizzes until I complete all the sections because I can't depend on quiz being limited to what was covered. The auto forward from one tutorial section to the next also needs to be turned off (by default) because it will go into the quiz panel without any heads up. One learns this by experience, but a new member will get caught unaware.

AND - Rod never does go over the construction aspect of the page from his original layout to something that includes a grid system and spans. This would have been helpful for practice on the coding side of things.

I shared your feedback with the rest of the team. We appreciate your thoughts!

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 8 months ago #109060 by FireFly9
Replied by FireFly9 on topic Twitter Bootstrap
Please go to the position 2:40 on this video to see what Rod is showing that we are to use
www.ostraining.com/courses/session/css/r...bootstrap/bootstrap/

Then unzip the file you pointed me to and compare.....

There is no bootstrap master, no docs folder, etc.

The contents of the folder included with the lesson includes only these (see image file), thus it is impossible to complete the tutorial.

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

Please Log in to join the conversation.

4 years 8 months ago #109080 by Nick
Replied by Nick on topic Twitter Bootstrap
Hi FF9,

Sorry about that! It's fixed now. Please give it another try on your end.

Once again, sorry for the issue!

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 8 months ago #109102 by FireFly9
Replied by FireFly9 on topic Twitter Bootstrap
Yes, that looks right now.

Thanks

G

Please Log in to join the conversation.

4 years 8 months ago #109104 by Nick
Replied by Nick on topic Twitter Bootstrap
You're very welcome, G!

Cheers,
Nick

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

Please Log in to join the conversation.

4 years 8 months ago - 4 years 8 months ago #109109 by FireFly9
Replied by FireFly9 on topic Twitter Bootstrap
Where is the exercise document for this video?
www.ostraining.com/courses/session/css/r...uilding-a-site/main/

In the Session Notes it says:
"Please download the code from the "Exercise files" tab for this course."

If it's the index.php file that is there then it does not display properly for me. I only see as what I have attached. I downloaded the php549xd which was recommended by the code editor I'm using (Rapid PHP), but the project doesn't show properly with wamp either.

Is there no css files to attach to this file? Rod doesn't do so.

I have to say I am not a whole lot impressed with this tutorial. Again, Rod does no building, just a lot of reading over of his files. Sorry Rod.... :) I find Vickie or Topher so much easier to follow. I went to Lynda.com to find a better demonstration of how to use bootstrap.

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

Please Log in to join the conversation.

4 years 8 months ago #109136 by Valentin
Replied by Valentin on topic Twitter Bootstrap
Hi FF9,

Please go to the home class: www.ostraining.com/courses/class/css/res...ive-design?task=view
Check the available files in Exercise tab that includes CSS. Please download and decompress.

Let us know if this information was helpful for 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 8 months ago #109141 by Nick
Replied by Nick on topic Twitter Bootstrap
Hi FF9,

Thanks for the honest feedback about the class! We're looking into potentially redoing the whole class. Feedback like this is important and valued. It helps us to improve our offerings.

Thanks again!

Cheers,
Nick

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

Please Log in to join the conversation.

4 years 8 months ago #109153 by FireFly9
Replied by FireFly9 on topic Twitter Bootstrap
Cheers - Thanks Nick for the receptivity ....as always.

Valentin: I do have that download extracted to my wamp; but the question was why is it not displaying, any help on that point? Did you see the attached?

If it's the index.php file that is there then it does not display properly for me. I only see it as what I have attached. I downloaded the php549xd which was recommended by the code editor I'm using (Rapid PHP), but the project doesn't show properly with wamp either.

Is there no css files to attach to this file? Rod doesn't do so.

Please Log in to join the conversation.

4 years 8 months ago - 4 years 8 months ago #109181 by Valentin
Replied by Valentin on topic Twitter Bootstrap
Hi FF9,

I saw your screenshot, sorry for not being enough clear. Based on the screenshot your project doesn't load the CSS files that provides the design.

May you confirm if the source code of that file (Ctrl + U from your browser) makes reference to CSS files in the head tag?

I assume you are missing two key CSS files: bootstrap-responsive.css and bootstrap.css
1. Please download Bootstrap 2.x from here: getbootstrap.com/2.3.2/assets/bootstrap.zip
2. Decompress
3. Copy the files into assets/css/ in your own project

Those files are part of the previous video lessons in Bootstrap section from the same class.

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 8 months ago - 4 years 8 months ago #109182 by FireFly9
Replied by FireFly9 on topic Twitter Bootstrap
I already had it extracted, but it looks like Rod did not guide us through attaching the css to the index.php file that comes with the lesson.

You can confirm this from this video in the set, and the one that follows:
www.ostraining.com/courses/session/css/r...uilding-a-site/main/

I have attached the 2 css files as shown in my image attachments,




but it's still not showing correctly. (See my file 'FrontEnd'.



It should look like this:




I have attached an images of rods code view from position 3:17 of the above video.


My code view with the 2 css files inserted. Still something missing.

This message has attachments images.
Please log in or register to see it.

Please Log in to join the conversation.

4 years 8 months ago - 4 years 8 months ago #109183 by FireFly9
Replied by FireFly9 on topic Twitter Bootstrap
Having said ALL that it looks like he has it all in this
<?php include("inc/header.inc.php");?>

But my path is not correct even though the inc folder is in the root, where the index.php is.

UPDATE:

Ah.... but yes.... the project files need to go INSIDE the docs folder. At least it almost works correctly from there. Doesn't seem to like the assets folder though.

Did Rod actually say the files needed to go inside this folder? If so I must apologize. The file structure is one thing I obviously need clearly explained.

I guess I was expecting it to work like the 1st exercise in this class which is index.html and the css attachments clearly pointing to a url within the root. I wasn't able to follow this with the index.php and the includes structure via php. :)

All in all I guess this tutorial is intermediate in that regard and not beginner for bootstrap which would be a build from the ground up - always handy for the step by step process.

I do like Rod's idea though for the includes as I was trying to figure out how to do a design that used a type of template structure and this would answer that. However, is there no way to do this same thing using html?
(Nick) This would certainly a good thing to cover when the course gets redone.

Anyway my project now looks like so: (Sorry this is so long - but through all the difficulties I always learn from the having to figure it out.

(The carousel works, but is setting too high, and is blurry. The icons and layout aren't showing correctly yet.)


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

Please Log in to join the conversation.

4 years 8 months ago #109211 by Valentin
Replied by Valentin on topic Twitter Bootstrap
Hi FF9,

Having said ALL that it looks like he has it all in this
<?php include("inc/header.inc.php");?>

Yes, this file include the code that call the CSS files I mentioned in my previous reply.

Did Rod actually say the files needed to go inside this folder? If so I must apologize. The file structure is one thing I obviously need clearly explained.

No problem. We are happy to help!

In this video min 1:45 the files structure is displayed briefly.

All in all I guess this tutorial is intermediate in that regard and not beginner for bootstrap which would be a build from the ground up - always handy for the step by step process.

I already shared your comments with Rod as reference; we think feedback is important to understand the user needs to improve our video lessons.

I do like Rod's idea though for the includes as I was trying to figure out how to do a design that used a type of template structure and this would answer that. However, is there no way to do this same thing using html?

Yes, that is possible with HTML and zero PHP.
You could merge the index.php + header.php + footer.php into a single index.html, everything will work the same.

I think the reason of using php is to avoid duplicate code in every new file, like header.php can be loaded in many other files if required.

Anyway my project now looks like so: (Sorry this is so long - but through all the difficulties I always learn from the having to figure it out.

Do you mean you have the result you need?

By the way, you don't need to apologize. Feel free to post any concern you may have, in that way we can create better classes and also improve our support :)

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 8 months ago #109269 by FireFly9
Replied by FireFly9 on topic Twitter Bootstrap

Do you mean you have the result you need?


Not immediately (as it looked like the last screen shot above), but I eventually figured out that I needed to paste the css from the session notes into the assets/css folder calling it mysite.css - (Again something Rod may have alluded to, but never stated, but I noticed this within the header.php file. I assumed it had already been added, but it wasn't. (This should be added as a note on the css video I think).

I have the same file structure as Rod now, so the project is working.

Question: Can this project be updated to the newer version of bootstrap? Rod uses <div class="span4"> for example instead of <div class="col-md-4>.

Will the newer bootstrap recognize span classes?

Is the process to update just a matter of putting the project into the docs folder of the updated framework in the same way? (I have 3.3.4 downloaded)

Truthfully I'd prefer not to download bootstrap for future projects. Another video I watched used the bootstrap CDN from this page to link in all the files. getbootstrap.com/getting-started/
but you may want to advise me on the disadvantages of that - feel free.

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

Please Log in to join the conversation.

4 years 8 months ago - 4 years 8 months ago #109292 by Valentin
Replied by Valentin on topic Twitter Bootstrap
Hi FF9,

About your new concerns:

Question: Can this project be updated to the newer version of bootstrap? Rod uses <div class="span4"> for example instead of <div class="col-md-4>.

I'm afraid is possible if you switch the spannumber classes (like span4, span5, span6, etc.) to col-md-number (col-md-4, col-md-5, col-md-6, etc.) and load the CSS files from Bootstrap 3.x
, however that would work partially for columns only.

Will the newer bootstrap recognize span classes?

No, the classes were replaced with the new format:
  • col-md-number
  • col-xs-number
  • col-sm-number
  • col-lg-number

Which is more flexible to match specific sizes in different screensizes.

Is the process to update just a matter of putting the project into the docs folder of the updated framework in the same way? (I have 3.3.4 downloaded)

Migrate a project from Bootstrap 2 to 3 can be a completely redo from scratch.
You can replace the spannumber classes with new names, that can work for columns only but doesn't guarantee will work fine for the rest of the elements.

Truthfully I'd prefer not to download bootstrap for future projects. Another video I watched used the bootstrap CDN from this page to link in all the files. getbootstrap.com/getting-started/
but you may want to advise me on the disadvantages of that - feel free.

The CDN can load faster for your site. Is the only advantage I can see.

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!