Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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,686 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,686 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.