Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialS Ananda
9,474 PointsBootstrap to Wordpress CSS File Very Different
Am working on enqueueing the bootstrap css file. Nothing is working css wise. I decided to go ahead an go through the complete video, because sometimes Zac fixes things later on. After completing the video nothing is working.
The strange thing is that when I look at the source for my pages they are nothing like Zac's. There is all kinds of code in there that isn't in his.
An example is that is shows that I'm using Bootstrap css 4.8 (?) I didn't even know there was a 4.8, since 4 is just being released.
<link rel='stylesheet' id='main_css-css' href='http://bootstrapwptreehouse.dev/wp-content/themes/bootstrap-to-wpstyle.css?ver=4.8' type='text/css' media='all' />
When he opens his bootstrap.min.css.map file there is hardly anything in it. Here is just a small portion of what I see when I open mine.
{"version":3,"sources":["less/normalize.less","less/print.less","bootstrap.css","dist/css/bootstrap.css","less/glyphicons.less","less/scaffolding.less","less/mixins/vendor-prefixes.less","less/mixins/tab-focus.less","less/mixins/image.less","less/type.less","less/mixins/text-emphasis.less","less/mixins/background-variant.less","less/mixins/text-overflow.less","less/code.less","less/grid.less","less/mixins/grid.less","less/mixins/grid-framework.less","less/tables.less","less/mixins/table-row.less","less/forms.less","less/mixins/forms.less","less/buttons.less","less/mixins/buttons.less","less/mixins/opacity.less","less/component-animations.less","less/dropdowns.less","less/mixins/nav-divider.less","less/mixins/reset-filter.less","less/button-groups.less","less/mixins/border-radius.less","less/input-groups.less","less/navs.less","less/navbar.less","less/mixins/nav-vertical-align.less","less/utilities.less","less/breadcrumbs.less","less/pagination.less","less/mixins/pagination.less","less/pager.less","less/labels.less","less/mixins/labels.less","less/badges.less","less/jumbotron.less","less/thumbnails.less","less/alerts.less","less/mixins/alerts.less","less/progress-bars.less","less/mixins/gradients.less","less/mixins/progress-bar.less","less/media.less","less/list-group.less","less/mixins/list-group.less","less/panels.less","less/mixins/panels.less","less/responsive-embed.less","less/wells.less","less/close.less","less/modals.less","less/tooltip.less","less/mixins/reset-text.less","less/popovers.less","less/carousel.less","less/mixins/clearfix.less","less/mixins/center-block.less","less/mixins/hide-text.less","less/responsive-utilities.less",
It actually goes on forever like this. I know this is what a minimized file is supposed to look like, but Zac's is just a few lines long.
So, has there been a major update to the Jumbotron framework? I'm at a loss as to how to figure out how to make my bootstrap css work when everything he says to check doesn't match up.
1 Answer
Austin Whipple
29,725 PointsBootstrap is updated frequently and, unfortunately, sometimes that includes some added complexity. I'd recommend using the "Project Files" available for download below the video to make sure you're using assets similar to Zac's.
It also looks like you're using a LESS version of Bootstrap, which would require some pre-processing before getting a usable CSS file. If you're downloading from getbootstrap.com, be sure to go with vanilla CSS to make things a bit easier to read for now before advancing to LESS or Sass.
S Ananda
9,474 PointsThanks Austin. I'll check out using the project files. I did just go to getbootstrap.com and downloaded the latest version, which looks like it won't work well with the videos. I'll let you know if I have any further problems.
S Ananda
9,474 PointsThanks Austin for your suggestions. Unfortunately Bootstrap and Jumbotron are not included in the dowloadable files. I finally just threw out what I'd done (after trying many fixes) and started fresh. This time it is working, so not sure which needle I left in the haystack, or which I took out that I shouldn't have. Thanks for helping.
Austin Whipple
29,725 PointsAustin Whipple
29,725 PointsI've edited your post to clean up some of the code formatting. Be sure to check out the Markdown Cheatsheet below every text editor for more information!