What are 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

0
0
0
0
0

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

Hey, my name is Dan. In this video we're gonna look at how  to adjust the column widths, depending on your screen size. Okay, so looking at media queries  and how we can adjust the different column widths depending  on what view you're looking at it. Either mobile, tablet or desktop. To do this, I'm gonna create a completely new file in here. You can follow along, but you don't have to.

And what I want to do is create a separate site  so we're not messing around with our original, just so  that we understand the principles before we move on. Now, to do this properly, I need to make it brand new site  'cause I don't wanna mess around and I start  adjusting the site that I'm working on. I'm gonna get a new site. I'm gonna call this one, uh,  mobile column demo. Where am I gonna put it? I'll stick it on my desktop.

I'm gonna make a new folder called mobile demo  and I can bend this later on. Great. So I'm gonna click save. So I've got my site defined  and I'm gonna now go to new, I'm gonna close this guy down. I'm gonna go to new And I'm going to go  to a new document. I'm gonna start with Bootstrap.

I'm going to create a new bootstrap file. I'm not gonna include the pre-built layout. I'm gonna hit create. Lovely. I'm gonna save it. I'm gonna call it index.

Okay. And let's save. Now let's go put in some boxes. We're gonna put in some boxes just so  that we're gonna put six of them, um, in here. And then we're gonna adjust them depending on  what size the screen is so we can show you  how those structures are applied. So let's go to insert panel.

Let's go to insert, make sure you click on your body. Um, click on grid row, nested. I'm gonna make them six. Great. And if I click inside one of them,  you can see it's set to this md. If I zoom out a little bit, actually in Dreamweaver  there are four view ports.

There is this media query for uh,  this one here is considered XS or small  and it's everything that is lower than uh, six. What is it? 767 pixels will be considered excess. There's this gap between these two here of uh, 700  and uh, 68 and goes up to 9 9 1. That is considered a viewport of sm. This one here is MD  and this one has large, so large, medium,  small and extra small.

And because I was zoomed in like this in Dreamweaver when I  made my column, it's added this one called md. Can you see that's where my edge of my document is here. If you're using a larger screen than me,  yours might be set to algae. I'm gonna manually make mine algae for the moment  'cause I wanna do large first  and I want 'em to be large all the way across. So I'm just gonna adjust them here. Or I could do it in co view,  co view's actually probably easier.

You can see, uh, I want this to be lg. Oh, lg, lg. And I'm just gonna replace 'em  'cause this is the first I, I'm gonna start with large,  which is my desktop view on my large desktop  and they're all gonna be that great. So if I zoom out now when I'm at large,  you can see there's  1, 2, 3, 4, 5, 6. Okay. And they all span two columns making up my 12.

Great. So let's put some content in to make it a little easier,  I'm gonna put some texts in here and code view  and I'm gonna call this one uh, box one. Box one. And this one here is going to be  Oh, box two, box three,  box four, box five,  And box six. Great. I wanna style it a little bit as well.

So I'm gonna create a CSS class. So over here I'm going to um, I don't have a separate one,  I don't wanna adjust the bootstrap one, remember? So I'm gonna make my own CSS sheet. I'm gonna call this one main, lowercase is better. I'm gonna save it. And then I'm gonna create a selector.

I'm gonna call this one my, uh, box style. What I wanna do now is I'm going to put it, uh,  I'm gonna do a couple of things just to make it easier  to see these boxes and it's gonna be a little bit of height. So I'm gonna add a bit of height. So maybe, uh, pixels wise I'm gonna put in a hundred pixels  and I'm gonna have a background color of  a greeny bluey color and actually a darker color. And I'm gonna put a text color. So everything inside these divs are going  to be a text color of white.

And I'm gonna make the make them centered  and I'm gonna make the size  of it a little bit big so we can see. So I'm gonna go to pixels. I'm gonna make it up to maybe 25 pixels. Nothing has applied yet. So I'm gonna click in here. I'm gonna zoom in so you can see it.

Click inside. This one I'm going to add the class called box style. Okay. And I could go through and add them all,  but you can see in co view is gonna be a little easier. There it is there. Box style.

All they need to do is make sure it's inside the quote marks  And I'm gonna match them all up. You See them all coming for a ride. Great. So they're all got replied  and they're doing some weird stuff at the moment. If I zoom out and make sure I'm at large view, perfect  'cause that's what we told her at large be spanning two. What happens is when it gets down to a smaller one,  it doesn't know what to do and make some span all  the way out to 12.

Okay? So I'm gonna be zoomed out to make it a little easier  for you to see what we're doing. Great. So that's my uh, six boxes. Now what I wanna do now is when it gets down to this size,  okay, which in this case is md. Okay?

I want it to um,  span maybe four across the top and two down the bottom. So I can do it using my little dragging sliders here. But Dreamweaver, if I can, you see, I can't see the edge  of this now there was a little bit  where I could drag it and slide it along. Uh, Dreamweaver has a few little bugs that way  where I can't see the edge anymore. Okay? So I can't manually drag it in.

So we're gonna do it in code view. So I'm gonna say in here, I'm gonna say when the column  is a medium, I want it to be this first box  to span, uh, three. Okay, Iten three. You can see he spans that one. So I'm gonna copy and paste this for all of them. Actually, I might grab yes, I'm gonna here and there.

Copy you. So when I'm at medium  B three wide,  There you go. Great. So it means that, um,  at the viewport, lets zoom out. So a viewport large, here's the size when I, uh, six across,  but when I get down to medium, it's gonna change and  before across the top and two down the bottom. And that's how I go  and change based on the media queries,  the structure of my site.

Let's have a quick little look at, uh, this template here. Um, remember at this they set it large, it is, um,  these are spanned, uh, what is it? Three each. And when it gets down to the tablet view,  it's actually spanning six. Okay? Six and six equal 12.

And that's my full width. So let's do the same thing here. Let's get it down to this view here. And this one's gonna be the small. So when it gets down to column width of, uh, small, um,  I'm gonna make them so that this six great. I'm gonna copy and paste that across them all.

Lovely. So desktop six across the  top four and two. And then this one should be two of three rows. Let's get down to mobile and it defaults at mobile  to a full width, which is 12. I could write in here. Uh, cole equals Xs.

Uh, um, yeah, excess and do 12, but I don't need to y  because it's the default anyway. So you could do it if you wanted to be, um, pedantic  and make sure you've got all the different things listed. But we don't need to, let's go preview this in a browser. So I'm gonna switch out, jump to this guy  and big view, medium view,  small view, extra small. Great. And that's how we use media queries  and bootstrap to play around with a structure.

The next video we're gonna look at is the exact same thing  with media queries, but instead of playing around  with a structure, we are gonna play around  with changing the colors of things.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025