🚨 Heads up! This course is no longer supported. We recommend checking out our Webflow Essentials course.
How to center images in Dreamweaver using Bootstrap (.center-blox)
Questions
Student Gallery
Be the first to share something.
Course info
Overview
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.
- 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.
- 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.
- 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 Walter Scott
Founder of Bring Your Own Laptop & Chief 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
And that's our nested column. Okay? Um, and we're gonna go to insert image. I'll gonna nest it inside of it and I'm gonna go back to my desktop, find my Dreamweaver exercise files, go to images, and I'm gonna use icon one Print. Click open. Okay.
It puts in my image. Great. So there's two things I need to do before I worry about entering. Okay? We looked at it a little earlier. Um, if you remember it was alt text.
Okay? So we need this for Google and for people that are using screen readers that are visually impaired. And this one's gonna be called, um, what was this one? This one's gonna be Printing Services Print Design Icon. Okay. And then other thing was remember that responsive one?
We can either click it by adding a class or we can hit this little um, menu here and click Make Responsive and great. It means it will adjust its size to fit with the different browser sizes. So, um, next thing we're gonna do is center it to do it. There's a special class, okay, bootstrap have made for us. So whenever you're thinking of creating your own class, especially at the beginning, you're gonna have to go back to Bootstrap quite regularly to see whether they've got a pre-made one for you. Okay?
Now, so if I switch out to Google and I go to get bootstrap.com, this's the homepage, remember for um, bootstrap I can go to CSS and I can have a little look um, down here to see whether say images. Okay. Have any, um, helpful little classes that I can use. There's some helper classes. Um, what I like to do is do a search for the page so I can command F and do center. Okay, there's some texts centered.
Okay, if I go down responsive images, there's a centered image and you can see that there's this one called center block. Now I know that because I've had a search for it before and used it and when you're new you'll have to keep going back to Bootstrap. Just to get yourself a little bit more aware of what classes are out there. You can do it in CSS, there's no problem with that. You could kind of find the elements, do it in regular odd CSS, but there's all these like lovely little helper classes that Bootstrap have already made. And the nice thing about them is often say like this responsive one, there's lots of protective code for say It potentially wouldn't work in a really old version of Internet Explorer.
And I've got workarounds to fix it. So I want this one called Center Block. Now if I go back to Dreamweaver and I add a class called.center block, okay. And it's gonna center my image within its column. Lovely. Now for the text down the bottom here, I'm gonna click down the bottom In this column I'm gonna go to insert paragraph.
Okay, I'm gonna nest it inside there. And there's my PP tag, okay, which is my paragraph tag, Which is just body text. And this one here is gonna be Capital Print. Great. Then click out. Now we saw a second ago in Bootstrap, there is a centering class for that one as well.
So I'm gonna apply it to it called Center. I know it was called Text Center. Lovely. Great. So we've applied a couple of bootstrap classes that are pre-made for us without having to create our own one. And what that just means is that we're relying on Bootstrap a Great that they've already done it worked out all the bugs, but also my main do CSS is staying pretty damn tidy.
Okay? There's not too much on here, it's nothing crazy with all these different classes you've had to make. So I've been getting you to add the classes manually. So you can see here we added text, uh, TechCenter, just so that you get used to using Bootstrap and kind of figuring out what the classes are called. There are some helpers though in Dreamweaver and I guess as Dreamweaver matures in its relationship with Bootstrap, it'll get a little bit better working with it. Now there are some awesome easy ones.
If I undo, uh, my tech center one here, so there's a little attributes menu, this little three slider thing you can see here. I've got some bits in here. You can see on a bootstrap. It's got that one, it's got that particular one, it's got a line center. Okay. And if I click on the image and I use that little dropdown one, there is a bootstrap and there is no, uh, bootstraps centered for the image yet.
But I imagine as the vision grows up and gets more features, it'll have those types of things in there. Great. So that's how you center an image using the center block and to do it with text using text center. Great, see you in the next video.
How do I centre an image in Dreamweaver using Bootstrap?
Select the image and add Bootstrap’s center-block class to centre it horizontally within its column. For the text underneath, apply text-center to the paragraph instead. Before centring the image, add descriptive alt text and use Dreamweaver’s Make Responsive option so it can adapt to different browser sizes.
How to Centre Images and Text in Dreamweaver Using Bootstrap
Key Takeaways
Centre an image inside its column with center-block.
Centre paragraph text with text-center.
Add alt text and responsive behaviour before adjusting alignment.
Check Bootstrap’s helper classes before creating your own CSS.
Use Dreamweaver’s alignment controls where available, or add the class manually.
Centring an image and centring text are slightly different jobs, but Bootstrap gives us a ready-made class for each. There’s no need to create a new CSS rule just to get a print design icon and its label sitting neatly in the middle of a column.
We’re working with horizontal centring here: positioning content between the left and right edges of its containing column, not moving it vertically.
1. Insert the Image Inside the Correct Column
Start by clicking inside the column where the image belongs. In this example, that’s a nested column within the existing layout.
Choose Insert > Image.
Choose to nest the image inside the selected column.
Browse to the Dreamweaver exercise files and open the Images folder.
Select the Icon One Print image and click Open.
The image should now appear inside the column. That placement matters: when we apply the centring class, the image will centre within that column, not across the whole page.
2. Add Alt Text and Make the Image Responsive
Before worrying about alignment, there are two useful bits of housekeeping to do.
Add descriptive alt text
With the image selected, enter Print design icon in its alt text field. Alt text helps describe the image to people using screen readers and gives search engines useful information about its content.
Use a description that fits the image rather than leaving this field forgotten while you concentrate on the layout.
Enable responsive behaviour
Next, open the image’s small attributes menu and choose Make Responsive. You can also apply the responsive class manually, but the menu provides a handy shortcut.
This allows the image to adjust its size to fit the available space as the browser size changes. Responsiveness and centring are separate tasks: making the image responsive does not replace the centring step.
3. Find Bootstrap’s Image-Centring Class
Before creating a class of your own, it’s worth checking whether Bootstrap already has one. Especially when you’re getting started, you’ll find yourself returning to its documentation quite regularly. That’s perfectly normal.
Open the Bootstrap documentation at getbootstrap.com and look in the CSS section used for this workflow. The image documentation and helper classes are good places to start.
A quick way to find the relevant entry is to use the browser’s page search. Press Command + F on a Mac and search for center, using Bootstrap’s American spelling.
Check Bootstrap’s image guidance before writing a custom centring rule.
The image-centring class we need is center-block. There’s also a separate text-alignment class, which we’ll use for the label underneath.
4. Apply center-block to the Image
Back in Dreamweaver, select the image and use its class control to add center-block. Dreamweaver may display the class with a leading dot, as .center-block.
Once applied, the image moves into the horizontal centre of its containing column. Lovely. We’ve used an existing Bootstrap class rather than adding another rule to our own stylesheet.
Keep the image’s responsive class in place as well. One handles how the image fits the available space; the other handles its horizontal position.
5. Add and Centre the Text Underneath
Now add a label beneath the icon, inside the same column.
Click in the column below the image.
Choose Insert > Paragraph and nest it inside the column.
Replace the placeholder paragraph text with PRINT.
Select the paragraph and add the text-center class.
The paragraph element, or p tag, holds the body text. Applying text-center centres that text within the paragraph.
The important distinction is simple: center-block goes on the image; text-center goes on the paragraph. Both use ready-made Bootstrap styling, but they do different jobs.
Use Dreamweaver’s Alignment Shortcut Where Available
Adding classes manually is useful because it helps you learn their names. Dreamweaver also provides shortcuts for some Bootstrap settings.
With the paragraph selected, open the small Edit HTML Attributes control, shown as a sliders icon. Under its Bootstrap controls, you can choose the centre-alignment option instead of entering the text class yourself.
The paragraph’s Bootstrap controls offer a shortcut for centring its text.
In the Dreamweaver interface used here, the image attributes menu offers responsive behaviour but does not provide an equivalent image-centring button. For the image, add center-block manually.
Why Use Bootstrap Helpers Instead of Custom CSS?
You could achieve the alignment with your own CSS. There’s nothing wrong with that. But if Bootstrap already supplies the behaviour, using its helper classes saves you from recreating it.
Those helpers also benefit from the framework’s browser compatibility work, including workarounds for older browser issues. And there’s another practical advantage: your main.css stays tidy instead of filling up with extra classes for small jobs Bootstrap already handles.
The habit to build is straightforward: check the available helpers, apply the right one to the right element, and keep custom CSS for the styling you actually need to create.
Key Terms
Bootstrap helper class
A ready-made CSS class for a common styling task. Here, the helpers handle image positioning and text alignment.
center-block
The Bootstrap class used in this workflow to centre the image horizontally within its containing column.
text-center
A Bootstrap class that centres text. Apply it to the paragraph containing the PRINT label.
Alt text
A text description associated with an image that helps screen reader users and search engines understand its content.
Responsive image
An image that can adjust its size to fit the available space as the browser size changes.
Nested column
A column placed within an existing layout structure. It provides the containing space within which the image is centred.
FAQs
Does Make Responsive also centre the image?
No. Make Responsive controls how the image adapts to the available space. Add center-block separately to centre it horizontally within its column.
Which class should I use for the text beneath an image?
Apply text-center to the paragraph containing the label. The image and its label use separate centring classes.
What if Dreamweaver does not show an image-centring button?
Add center-block through the image’s class control. In the interface used here, text alignment has a Bootstrap shortcut, while image centring requires adding the class manually.
Written by Daniel Walter Scott — Founder of Bring Your Own Laptop & Chief Instructor
