How to apply bootstrap columns widths (xs sm md lg xl) in Dreamweaver

This lesson is exclusive to members

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

Questions

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

Hi, my name is Dan. Welcome back to our regular website. We've understood now how column widths work, when dealing with Media Queries. Let's go and apply it.

I'm going to jump to Photoshop. So there's my design for Large, and here's my design for Mobile. And the big changes are-- this is about the same. We're going to turn this image off when it gets down to Mobile. We'll do that last. We also want to switch the way that these guys are structured around. So instead of them stacking side by side, they're going to stack on top of each other. And the same with these Portfolios here. I should have gone through and done a Tablet version, and matched all four versions, but to make these tutorials a little bit shorter I'm just going to do Large and Mobile, and skip Tablet. You should be doing Tablet though, you should be doing designs for it, and work out what it's going to do at those different stages.

So in here, I'm going to work down, I'm not going to be working on this one. I'm going to be working on this chunk here. Now, when I'm at Large view-- go to 'Large'. It is stacked next to each other. What I'd like to do is, when it gets down to Small-- I've realized there’s problem with him. We have to work out what his problem is later on. You might not have that problem at the moment, I just noticed him there. We'll fix him a little bit later on. When we get down to Mobile, I'd like you to do this. I'd like that the icon is on the left, and the text is on the right. So let's see if we can do that.

Here's my first one. I'm making sure I'm in this Small view, or xs view. I'm going to make this one-- at the moment, it's defaulted to 12, so it's pushing it's text underneath it. So I'm going to shrink him up a little bit. So he is, maybe, 5 across. And in this one here, it needs to be a smaller size, to the next one. And here it's going to be 7. So there's my two units there, I've got one that's 5, and one that is - I'm going to grab the corner around the outside. - is 7. So when he's at Large, 12, when he is down at Extra small, he is set to 7. We'll play around with Left Aligning him when we deal with the next video, when we deal with the Styles, because there's a Left Aligned.

Nothing to do with these boxes here. So let's go through and do it for this guy as well. He's going to be down to '5'. Development's going to get down to '7'. I'll do the same for all of these guys. Make sure you grab the outside container, a slight problem with him. It's allowing me now, I worked out what it is. Get down, smaller, '5'. This one here is going to get down to-- this one here shouldn't say App Development, this one should be Video. Somewhere along the line I've missed that, or lost it. You, shrink down, please. Usually it doesn't, if it has, a really kind of weird freak out, like my one's doing now. Doesn’t know what it's doing. What you can do is hit this 'Refresh' button along the top. Often that kind of gets it all back, settled, and working again.

Go to Dreamweaver. This one here, I'm going to change from App Development to Video. Ignoring our button of Photography, let's have a preview in the browser. Nice preview, opens up. Down here is the Desktop, it's all nice. And I'm going to shrink it down. And you'll notice now, when it gets down to Mobile, it's tracking Icon on this side and the Text on this right hand side here. There's a few little layout issues I want to deal with. So this guy is annoying me too much. We're going to go figure him out now. We'll find out what is wrong to make him look nice.

I notice, this one here, there's a p-tag with 'text-center-text-option1' wrapped around it, and the 'a-tag'. So I'm going to click on here, the 'p-tag', there he is there. And I'm going to apply to Classes, one is 'text-centered'. There you are, my friend. And I'm going to add another one, which is called 'text-option 1'. I'm going to apply that one. Replace my 'p-tag'. I'll call this one 'text-option 1'. I know they're not Left Aligned, at least, they're now looking the same.

Next we're going to work on is these guys. It's kind of doing what I want, and it's kind of matching what I've got here in my Mobile view. Mobile view actually has a little bit-- I want to actually change it a little bit. I want to actually stack these guys side by side. So it's going to be four of them, and they're going to be stacked 2 and 2. What I need to do now is, I'm going to click on this 'top one'. And at Large, it spans 3. Which gives me my 3, 3, 3, 3, that's 12. What I want to do is, do it 6 and 6 equals 12. So I'm going to drag this one down, it only has a Class of lg, but when I drag it, it adds another Class for xs, of 6. I'm going to go through and make all of these guys 6. You are 6, actually go to 'columns'. They start overlapping, doing weird stuff when they're all not finished. You might find this easier to do in Code view. I'm going to try and struggle on in Live view. Drag him on. Little bit of dragging, and hoping. I can see 6, 6, 6, 6. Great. Let's 'Save' it. I'm going to jump out to my demo version. Roll down.

So at Mobile view, they're side by side, but when they're on Desktop view, they're all stripped along here. So we're getting there. We've got a Desktop view, and a Mobile view. You should be working on your Tablet view as well and dealing with the one called sm, and deciding what to do when it gets to md as well. We're going to skip that along just to make this tutorial fly. In the next video let's check how to disable and enable objects depending on the Media Queries.

  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025