Build A CMS Admin Bootstrap Theme From Scratch

In this video we will build the UI for a CMS (content management system) admin area. It will feature a dashboard, pages, posts, users and login page. We will look at almost all of the Bootstrap css components as well as some JavaScript such as the modal.
CODE DOWNLOAD:
www.traversymedia.com/download...
SUPPORT THIS CHANNEL WITH A CUP OF COFFEE PER MONTH:
/ traversymedia
ONE TIME DONATIONS:
www.paypal.me/traversymedia

[@ighsight]

My man Bob Traversy. If I'm visualizing how to implement something new or solve a dev issue without reinventing the wheel, I come here. Even 6 years later his videos can give you a good starting point on the solution you're looking for.

[@stardustaed.2868]

this was honestly so amazing to actually make my bootstrap skills work (esp since i tried to recreate the page before you showed us how) your videos are honestly always SO USEFUL and i'm just so grateful to have them. as someone who really wants to have at least basic knowledge of full stack before she starts first year of uni, i've been looking for practical usage videos and yours NEVER disappoint. thank you so much for taking all this time and getting us this content for free. i promise when i start earning by myself, I'll definitely be donating to your patreon because you're essentially my saviour here. thanks again !

[@sahin8649]

I've been trying to learn PHP but you know there should be a front-end as well to implement it. I tried the bootstrap dashboards on the internet but learned nothing. Watching your video, I've designed the basic ui I needed in 15 mins. Thank you for that great work and looking forward to seeing more from you!

[@henrypostulart]

Thanks very much for this overview. I'm already using bootstrap in a custom data app (PHP/MySQL), all's going well, but after watching this, it'll look better 👍

[@burakela5]

Incredible. Thank you for your efforts. You're making this stuff look really simple to do with your clear explanations.

[@MikeFlanagan93]

Hi I have been away from web development for 12 years and I have found your videos to be very informative and easy to follow and a great help in getting me caught up. Thanks for taking the time to make these video and keep up the great work!

[@markhamilton8765]

Brad, this tutorial was extremely informative. I love your teaching style; you make things easy to understand. I cannot tell you how timely this video is for me; thanks so very much!!

[@mofe620]

Just finished recreating this 😊 Thanks a lot for putting this on here, Brad. Btw, you made it look so easy 😂 Took me at least 4hrs because so much has changed with Bootstrap since 2017. I've learnt so much now by actually recreating this. Thanks!!! You're a huge blessing 🙌🔥

[@muhammadhamzaqureshi]

Anything brad teaches its really cool and simple and the best part is anyone can grasp fundamentals. Good to have you brad

[@werthersoriginal]

I'm really enjoying your content! I found you based on the new KZbin algorithm! I just subbed!

[@cancer10in]

Would love to watch a bootstrap 4 tutorial on creating an admin panel layout similar to adminLTE. Thanks so much for these helpful videos.

[@alxizr]

Excellent tutorial. I watched the entire video and I really enjoyed the explanations and the code flow. It's very fun to watch the experience take place in structuring the entire project and explaining it on the fly

[@AlexanderRomanenko]

Love how you made design accessible even to nondesigners. As a back-end dev I have no intention or capabilities to become designer, BUT I still would like to be able to make my work at least a little aesthetically pleasing where I do not want to run away from my own projects. Usually, any form design seems unapproachable, but you show a little color change here, width and alignment there, and I can get inspired about presenting server output nicely again, not worrying about outsourcing every UI element.

[@TraversyMedia]

I hear you man I do. Design is not my thing either.

[@codechimp8788]

The #1 reason why I'm here.

[@pensandodireito8204]

Hi guy, are you fine? Is it possible to you make a tutorial teaching how to integrate these cms to the website project? I hope you understood what i meant...

[@hazzula]

Per your words, it might not be "the best" looking dashboard, but the knowledge this video contains especially concerning the parts of a cms dashboard more than makes up for that. Thanks so much for this video!

[@pakistaniupdates1101]

You are such an awesome instructor that I did not find words to say Thank you. All videos you made are sp helpul that we never need to look back to google.

[@avtaras]

Amazing. Thanks. Thanks for the source code, too. I am a beginner, working at the moment on a military technology website. I was desperate and hopeless before watching this video. Good job. Keep it up.

[@Junaidulislam]

Thanks Brad for an awesome tutorial. Looking forward to more amazing stuff from you.

[@RockstahRolln]

You Sir are simply Amazing! Thank you for such up-to-date Tutorials, highly appreciate it!!

[@joedili4819]

I just come across this video and am glued. A well executed tutorial for a beginner like myself. Thank you.

[@jgcastillop]

Excellent tutorial!!. Now I will work on the backend with Angular. Thanks a lot :)

[@CSamuel54]

Hey I love your content, keep up the good work!

[@aniketmlk6]

He is the most practical and precise teacher ever!!!

[@sachinkanchankanchan5426]

Excellent work done and it's been amazing video by using bootstrap documentation and taught me how to use bootstrap for creating dashboard. i also learnt so many things by watching your videos whatever i have learnt front-end just because of you. Thank you so much for giving your precious time and god bless you

[@ebieretama8055]

Thank you, Brad. This course is so rich. You are a Star.

[@christopherkiessling]

17:20 dashboard line is the nose and mouth is the space between ul, you are such an artist

[@DarthIckus]

Great videos, Brad! I didn't know shit about Bootstrap until I started watching your videos, of which I have seen a few. Now I feel confident enough to start working with Bootstrap! Thank you!

[@HarishST]

That CK Editor! I was searching for it! ;) Thanks Brad!

[@MushaGH]

you're my hero, looking for this kind of tutorial, now just need a little bit back-end PHP functionality. TQ so much.

[@muhammadimran8054]

It is really a good tutorial and very simple to follow. I really like the way presenter explains the code... Now i am waiting for the next step of linking the Backend to front end.

[@umajha5287]

Your videos are awesome, learnt so much from them.. Keep on posting more!

[@pesoooothelover]

Man, you are a magnificent teacher for me, if I had money I'd pay to learn from you. Thanks Alot

[@clarkson451]

This one took awhile but still a great tutorial. Brad You are the man. Your value to new and aspiring Devs is off the charts. please at the very least throw this man a like and/or a sub.. i recommend the BootStrap Crash Course from Traversy Media to get you up to speed with the bootstrap syntax, but in reality its not that hard to pick up.

[@codingabs376]

REALLY IMPRESSED WITH YOUR TEACHING AND THE QUICKNESS OF YOUR DESIGNING KEEP IT UP...

[@adolforuiz3114]

I have seen and bougth many videos from you, and this is one of my favs! thanks

[@rmfcity]

Sweet Tutorial! That's a fairly good-looking dashboard right there

[@sirjameshoward]

Sweet group of pages. Just add db code and it's finished. Great work.

[@fricco83]

I really like your videos. The thing I like most is that you use MS Windows as your environment. Keep doing great job man!

[@TraversyMedia]

Thanks. Although a huge chunk of professional developers use Linux or Mac, most of those guys know how to use Windows but not the other way around. And I want to be able to reach everyone :)

[@reantech4522]

I do love your tutorial,Thanks for sharing!

[@shanemurphy7277]

Thanks man, your channel is awesome! Great content!

[@uzakkultur]

thats was such a nice tutorial, thanks a lot!

[@mega1985bg]

very very good tutorial. Was a pleasure to watch and looks very cool !

[@nlburnr1]

You sir are a great teacher !!

[@TraversyMedia]

Thank you, I appreciate that. Thanks for watching!

[@lambsack111]

If you're having trouble, just know that bootstrap has been revised since this video was made. Things like panels and wells no longer exist so you have to use cards instead. I'm new to bootstrap so I was very confused at first but if a bootstrap class doesn't work you can usually find an alternative on their website.

[@rithyngoem3263]

i would love to watch a bootstrap 4 like build the full website. Thanks so much for these helpful videos.

[@joel143ful]

Mate every video of yours is very helpful for me thanks very much.

[@bikashshrestha840]

great UI in a short time!!!

[@mahadithelearningmind1677]

u r always great as your lectur so clear , thanks bro ,,,

[@rowansiwakoti9928]

You saved my Life. A lot of thanks Man :)

[@jkmalify]

Thank you very much Sir. Really appreciate your work. This video helped me a lot

[@GerbenWijnja]

Great video. One tip: instead of #333333, #ffffff, #cccccc, etc... you can write the shorthand form: #333, #fff, #ccc.. etc. Or any other combination of double characters. For instance #ff8800 can be written as #f80.

[@francisbeaudoin4747]

Great tutorial. Thanks Brad. Well done.

[@eypbal]

This is Perfect, too. Thanks Traversy..

[@rhmoreira]

I'm a programmer by trade and i get often lost when it comes to front-end. Man, that just saved my life!

[@hannoushy583]

You are brilliant. Thank you for the effort 😊😀

[@payamdaliri3910]

That was superAwesome... Thanks a lot!

[@alexanderkarsonis3784]

That was absolutely awesome!

[@HuyVo-uz6wj]

Thanks so much! I liked and subscribed your channel for your sharing.

[@clipthatshoot5407]

nice, thanks to this, i will use this to my personal project.

[@usamaimran1516]

Wonder how well would u teach in premium courses .. Explained really well. ... Great Work

[@ignatiusmaziofa2393]

thoroughly enjoyed it. thank you very much.

[@ivangutierrez4135]

This channel it´s amazing !! Thanks

[@mahmudmamatov9675]

Thank you for course. I have take a lot of things which I need. I from Uzbekistan. At the moment , I think good time for learn new things. Because we have strong quartine time.

[@AlgoBasket]

Very Nice Tutorial To Learn Frontend from A - Z. Keep it up !!

[@serugojanvier5503]

i like how you teach us bro,is you take me up on web programming thank you so much

[@dillonauxier8841]

Amazing tutorial! You are a saint my friend. One question. The video that precedes this you talk about Bootstrap being a mobile-first design platform, but in this we went straight in to desktop. I know that it ended up being responsive and everything, but if it were a more complex project would you recommend building out the mobile UI first? Thanks again!

[@yo1414]

Very nice! Learned a lot - thank you!

[@acecode8790]

Awesome tutorial, learnt a lot and thanks a bunch

[@didisuprayogi]

thank you it's really help me to starting designing web application

[@marktwain3083]

Great tutorial, keep up the good work.

[@hiepxuan2008]

Very helpful! Thank you so much!

[@zygimantasjasiunas8695]

Hello, I wanted to thank you for your effort in making tutorials, I've already learned a lot from it, and they all are great, you can be a perfect teacher! Cheers. But one question about implementing the bootstrap, how would you implement bootstrap in the project for the company, the same way as in your tutorial, or some other way, and what is the safer way to do it?

[@Sanndeep5]

Lovely! Very Very Useful. Thank you so much.

[@bintoygaming]

You deserve more Likes and Views sir Brad! :) You're really a great teacher..

[@sayyedkhalilmousavirad3466]

the best of the best

[@letsdiscoverrealities2794]

sir you are a great teacher in world.. i humble request you to add backend it will also help people that how cms admin pannel works .

[@Ebizzill]

God bless you brother.

[@munguambegeraldo]

I love this one. congratulaions.

[@JudithEhiguese]

amazing! thanks so much :) would really be great to see a bank end tutorial :D

[@clewismessina6630]

Bootstrap is currently in version 4, this was built on version 3.3.7. You can get the same bootstrap boilerplate at the beginning of the tutorial from Bootstrap's legacy site: getbootstrap.com/docs/3.3/getting-started From there, you can navigate to the 'examples' link for your index.html along with other Bootstrap code snippets to follow along. Also, he switches back and forth between code and browser to check his work. If you use 'live-preview' you won't have to refresh your browser to see your changes. Live-preview a plug-in available for MS VS Code (IDE), Atom, Sublime and as a stand-alone for node JS through npm. Quick note to Brad: great project for anyone with an interest in building a CMS or just trying to understand CMS UI requirements. Thank you for this tutorial.

[@akshaycodess]

Nice job bro... U made it very easy

[@brianotido4069]

excellent work - keep up - thanks a lot

[@redsnakeintown]

emmet tip - .classname+tab will give you a div with class name - saves some typing

[@oddetline2043]

you are wonderful because of your course now i can be strong to create a website thank you very much

[@ShakirAlimit]

Very nice explanation.......

[@monkofdark123]

possible at all that you'll do a vid on how to hook this up to the backend via server side code, e.g. php, node, etc.? your tutorials have been by far the most useful I've come across

[@FreakyCoach]

nice work thanks for sharing

[@nabyfreeman]

Many Thanks for this tuto !!!

[@hikkenwayans]

EXCELLENT TUTORIAL!

[@aptec-tecnologias7313]

Muito obrigado, Traversy Media....

[@callightman1652]

You are a hero!! Thanks to this

[@sachinsaini1806]

Brad, you are a GOD

[@imsyedali2701]

Well done.. Thank you so much...

[@tirsolecointere]

Great work bro! I just have a question... How can I put the footer sticked to the bottom of the page even when the body of the content is short?

[@reform1517]

This is killer man!

[@Dice-Gamble]

Amazing. Any chance of a video for the back-end coding?

[@zzz943]

Just subscribed! Waiting on that backend part :). It would be awesome if you could do it using JavaScript!!

[@jeffreyeugenio704]

Hello, I wanted to thank you for your effort in this video tutorial of yours, I've learned a lot from it, all are great. But I suggest that you should make also a video of how it will be functional, because I would like to know also how to create database and implement to your porject/ mine. Thanks. Good Work and more POWER to you ^_^

[@educationonline197]

Thank you very much for your video

[@MSKChess]

youtube seriously needs a back end functionality video to make bootstrap functional.

[@EdsonYamamoto]

awesome video man thanks !