🚨 Heads up! This course is no longer supported. We recommend checking out our Webflow Essentials course.

How to customize bootstrap

Course contents
SECTION: 9
How to backup 4:44
SECTION: 17
Finished 1:58

Questions

0
You are not following this thread
0
You are not following this thread
0
You are not following this thread
0
You are not following this thread
0
You are not following this thread
0
You are not following this thread
1
You are not following this thread
0
You are not following this thread
0
You are not following this thread
0
You are not following this thread
0
You are not following this thread
0
You are not following this thread

Course info

53 lessons / 5 hours

Overview

NOTE: this course uses Bootstrap 3. Dreamweaver has recently updated to Bootstrap version 4. You can change it back to 3 using the ‘New Document > Bootstrap > Preferences'. Please do this before starting the course.

Some versions of Dreamweaver will require you to download the specific Bootstrap version you want to use and link it within the site. You can download Bootstrap 3 here: http://getbootstrap.com/docs/3.3/

Hi - my name is Dan and I’ll be leading you through this course on how to Make money building mobile friendly websites using Dreamweaver.

I built this course for the visual person, the right brained person. We won't hide from code but we'll use all the visual tools that makes Dreamweaver so amazing.

These are the skills you’ll need to become a professional web designer. You’ll learn how to make responsive websites in Dreamweaver as well as learning what to charge and how to manage a website project.

We cover everything you need to build your first website. From creating your first page through to uploading your website to the internet. During the course we’ll create a website for a mock creative agency - creating mobile and desktop versions. See our example here:

I’m a Dreamweaver Certified Instructor and an Adobe Certified Web Specialist.

With exercise files you can download and work along with me. At the end of each video I have a downloadable version of where we are in the process so you can compare your project with mine making it easy to see where you might have a problem.

I’ll be showing you how to work with Dreamweaver to easily create HTML & CSS websites. How to create mobile and tablet versions of your design and how to test your website on your phone.

I’ll be teaching you how to create navigation bars, how to work with responsive images and favicons.

We’ll work with Dreamweaver’s new Bootstrap integration to easily add carousels, tabbed menu’s and accordions. Even easier you’ll learn to impress clients by embedding videos, calendars, maps, event ticketing & social sharing options. 
 
 Know that I’ll be around to help - if you get lost you can message in the forum and together we’ll get you back on track.

Now it’s time to upgrade your skills, get that better job and impress your clients.

What are the requirements?

  • You'll need a copy of Dreamweaver CC 2015 or above. A free 30 day trial can be download from Adobe here.

  • No previous Dreamweaver or web design experience is necessary.

  • If you're not sure if this course is right for you. Email me what you’re trying to do and check if you’re on the right track.

What am I going to get from this course?

  • 60 lectures 3 hours of content!

  • Forum support from me. 

  • All the techniques used by professional website designers.

  • Ways to preview your designs straight to your mobile device.

  • Firm understanding of responsive web design.

  • Professional workflows and shortcuts. 

  • A wealth of other resources and websites to help your new career path.

What is the target audience?

  • YES: This course is for beginners. For people who prefer not to work in code. Aimed at people new to the world of web design. No previous Dreamweaver experience is necessary. People with knowledge of previous versions of Dreamweaver CC 2014 and below will also get great value from this course as the software has changed so much.

  • NO: This course is NOT suited to people experienced in using HTML & CSS. If you prefer to work in code only then this course isn’t right for you.

Course duration 5.5 hours + your own study.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Transcript

Okay. To go and override our bootstrap style, first you need  to work out which one you want to override. So I'm going to insert a button  and then figure out the style name. So I'm gonna go insert button, okay? And remember we looked at earlier  that we found a class called BTN  uh, hyen Danger. And I like it.

I want to use it,  but I want to change the background color, okay? I don't want it to be red. So  what we're gonna do is we are going  to use this thing here, okay? I'm gonna select it all and copy it  and I'm gonna go to my bootstrap CSS,  this big mammoth thing. Somewhere in there is the style that makes, uh,  Betty in danger, big and red with white text. Now I don't wanna go searching for it manually.

Let's go to edit and let's go to find and type it in here. Okay, click find next. And there he is there. Hit close. So what I wanna do is grab this whole class, okay? You gotta make sure you grab the coolly braces.

There's this one at the beginning here,  one at the end and hit copy. So I'm gonna go to edit copy, then I'm gonna jump to my CSS,  my nice clean empty CSS and we're gonna to override it here. So I'm gonna paste it in using edit paste  and make sure I've got my curly braces. They've came along for the ride  and there's my, uh, button danger. And it's got the full stop at the beginning making, uh,  that lets it know that it's a class. Okay?

And the things that I wanna change is pretty much just  the background color and maybe the border color as well. I don't wanna change the color. You'll notice that the word color always refers  to the text color. Can you see? It's white and the background color refers  to obviously the background color,  but if you see color by itself, it means the font color. So actually I don't wanna change it at all.

So there's no point overriding it in saying  it's the exact same color. So I'm gonna delete that one. It's the background color and  the border color I wanna change. So I wanna change this to another color. So, uh, what I can do is if I know the Hexa decimal  number, I can just type it in here. I don't know a few of them off by heart.

Like I know that FFF was uh, white  and I know that 0 0 0 is black. Uh, but that's about all  that I remember off the top of my head. So I need to go off and find the color. So what I'm gonna do is I'm gonna undo, so edit undo  to get back to where it was,  and I'm gonna make sure that everything is saved. Saved all. Okay, I'm gonna get my CSS designer  and now I'm gonna go and change it using the CSS designer.

So to do it, I'm going to click off into my design view. I'm gonna click on my main css. And the good thing about it is  that there's only one class in here, okay? They're called Selectors. It's the overriding name for uh,  things like classes and IDs that go in your css. But there is there, okay?

Um, you might be just to make sure  that you're not stuck in current,  current can get a little bit lost current's great when you  know what you're doing, but when you don't go to all  and just list everything here. So I can click on this and  Down the bottom here. Um, I can go and style it. Now there's lots to go in style potentially. Okay, there he is. There's the background color.

Now, just to tidy things up, watch this. If click show set, instead of showing you all the things  that haven't been done or potentially could  be done, click show set. It only shows you the things that have been done. In this case, it's only got the border  style and the background color. If I turn it off again, it shows me everything. Okay?

But with it on cuts it down to a nice easy manageable list. So, uh, color  and so background color, that's the border color. And let's do the background color. So I'm gonna click on  this and I'm gonna use thise slider to change the hue, okay? And uh, my new danger color is going to be magenta, okay? But left bright pink.

Once you pick it, there's the hue sider. This is how light or dark it potentially is. And this is how opaque it is, okay? Or how see through it's, let's click enter  and you'll notice that my background color is changed  to this magenta color. And um, what you'll also notice is the CSS  and Bootstrap says be red,  but your one, okay,  your main CSS overrides it saying the  background color is magenta. And that's what we're gonna do a lot of in this class is  that we'll leave the bootstrap CSS doing its thing  and then we're gonna override it with our own custom stuff.

Okay, great. So that was just there for as an example. So I'm gonna go delete the one that says button danger. And I'm gonna delete the button. I'm gonna select it, delete it from my document. I'm gonna go file save all.

Alright? And that is how you customize Bootstrap  by overriding it using your own CSS sheet.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025