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 trial

WordPress From Bootstrap to WordPress Setup a Bootstrap Theme Add Bootstrap CSS via the functions.php File

S Ananda
S Ananda
9,474 Points

Bootstrap 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.

Austin Whipple
Austin Whipple
29,725 Points

I'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!

1 Answer

Austin Whipple
Austin Whipple
29,725 Points

Bootstrap 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
S Ananda
9,474 Points

Thanks 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
S Ananda
9,474 Points

Thanks 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.