A

Anonymous

Question

I can't figure out how to use Bootstrap!

Forum|Forum|6 years ago
June 26, 2019
8 replies
2429 views

At the risk of sounding like a complete idiot, I can't for the life of me figure out how to use Bootstrap! I need to do a simple site for a client. I've been to the Bootstrap 4 Get Started page, but I don't understand anything! It gives examples of code and then tells you to try it yourself. Try what? What do I do? Nothing I do to the code in the examples does anything. I went to the Adobe tutorials but I can't find any help there either.

I opened a new document in Dreamweaver with a Bootstrap starter template, and I can't figure out how to do anything with that either, such as just put an image inside the jumbotron container. I'm not a neophyte - I started building web sites years ago with Page Mill, then graduated to Dreamweaver. But it's been a while since I've done any web design. I've always created sites visually, as a graphic designer, not a coder. I've edited html and css by trial and error and used to be able to figure out how to do what I wanted to do. Now I feel like I don't understand ANYTHING anymore! I tried doing stuff with the Bootstrap starter template, but I just made a mess of it. The live and design views are completely different from each other, and I can't figure out how to get stuff where I want it on the page, change background colors, anything...

Is there any source of BASIC info that would help me learn how to use Bootstrap, such as how to add images, create menus, etc? Or is Bootstrap for programmers only? Am I a dinosaur that has gone extinct?

This topic has been closed for replies.

A

Anonymous

Thank you to everyone who offered advice and suggestions. Daniel Scott's videos, recommended by Anissa Thompson, were the most helpful to me. Dan's way of explaining things clearly and simply, while showing how to use both the Dreamweaver interface and editing code, got me over the hump. I used some of the other suggested resources as well, once I had an initial grasp of the basics. That's what I was missing!

I created the home page for my site and am now working on the daughter pages. When I get it mostly together I'll post a link here.

Nancy

P

Paul-M

Legend

something like Mobirise might be a better option to get you started. You can start with a template, drag and drop blocks. As you go along you could then start to learn Bootstrap, basing coding and once you have grasped that I think you are in a better place to start using Dreamweaver.

Paul-M - Community Expert

A

Anonymous

Hi Paul,

Thanks for your reply, but I think you were a little confused by my post. I'm not new to Dreamweaver; I'm new to Bootstrap. But I'm figuring it out, thanks to the helpful tutorials that others have recommended.

Ironically, it was the Bootstrap templates that I tried to start with, hoping it would save time, that got me so confounded! Starting a new page from scratch and adding Bootstrap components has been much easier to do.

rayek.elfin

Legend

Also consider Pinegrow if you are interested in a visual editor with great Bootstrap support. Drag and drop elements, and change the styling a bit, et voila. Working Bootstrap website. Comes with a extensive library of pre-built Bootstrap layout components. You will have your first page up and running in a matter of an hour.

Pinegrow is a desktop application with a full license, unlike all those online browser-based subscription services. It also doesn't hide the code, so it is a good learning tool to introduce yourself to Bootstrap.

anissa_thompson

Community Expert

nancyfarlow it's OK to feel a little bit intimidated... the world of web development is a little more daunting than a few decades back

Luckily there are some really great resources outside of the Adobe tutorials that are geared to designers who are anxious about dealing w/ code and Bootstrap in particular. Check out Daniel Scott's "Bring Your Own Laptop" series on YouTube, made specifically for folks just like yourself, to get you comfortable and take away the "fear factor":

Coding for Designers - Dreamweaver CC 2017 - YouTube

and

Dreamweaver Bootstrap Tutorial - YouTube

I think you might like his designer-friendly approach to Bootstrap

Hope this helps!

Hope this helps! Make sure to press "✔ Correct Answer" on this post if this answers your question. Happy Creating!Anissa • @anissat

A

Anonymous

Daniel Scott's videos are extremely helpful, thank you!

pziecina

Legend

I'm going to make a suggestion that will probably upset a lot of people.

If you don't want to learn how to code, then have you thought about using Adobe Muse?

Yes, Muse is no longer being developed, but if you have a full CC subscription, and you remember to create your site using the responsive option, (do not use the adaptive method) then it is probably more suited to your requirements.

No method of creating sites is future proof, but without learning to code you will always be in danger of any site you create failing at some point in the future, which may force you to not just learn how to code anyway, but may force you to rebuild the site for free.

Nancy OShea

Community Expert

pziecina wrote

If you don't want to learn how to code, then have you thought about using Adobe Muse?

Oh good heavens! Muse is on life support. Using outdated software is counterproductive.

I need something that is geared toward graphic designers rather than programmers.

DW is for people who want to work with code.

OPTIONS

Use a DIY online web builder like Adobe Portfolio, Webflow, Wix or Squarespace. No coding skills required.
Use WordPress with one of the visual designer plugins like Elementor.
Hire an experienced developer to help you.

Nancy O'Shea— Product User & Community Expert

pziecina

Legend

https://forums.adobe.com/people/Nancy+OShea wrote
pziecina wrote

If you don't want to learn how to code, then have you thought about using Adobe Muse?
Oh good heavens! Muse is on life support. Using outdated software is counterproductive.

Is Muse outdated though?

Providing one uses the Muse responsive layout option, it is no more outdated than Dw's bootstrap option when it comes to being future proof. The next update for iPads, (will be available for iPads going back to iPad Air 2) will default to the desktop layout, even with sites created using bootstrap 4. Then we come to Dw's missing support for srcset, etc. No method of creating layouts for all browsers and the wide range of screen sizes and resolutions that can be used by end users is future proof, with any current 'easier option'.

Yes, it may be easier to 'fix' a layout if it is hand coded, but Muse, Bootstrap or any other framework will require the person creating the site(s) to know how to 'fix' any problems, which means knowing how the code works, which is doubtfull for a large number of those using them, as much of the code is either 'unreadable for all intents and purposes' or there is so much of it that even someone who can code, doesn't know fully what is going on.

B

Ben M

Community Expert

There's really nothing wrong with not being able to do everything. Web deisgn has changed much from the software you had been using and there are a lot of technical complications behind it. Even look at the CSS grid which doesn't use Bootstrap and uses only CSS. This is an example of a generator for that ( CSS Grid Generator ), but as you will see, even with that it's all code. Personally speaking, I tend to be farther away from design and bring in designers to help out with work because there are a lot of intricacies that most programmers don't grasp. If you wanted to post or share a sample of your design I would be willing to give you an idea of what that would be in a grid layout, but it's really up to you at that point to determine whether it's a road you want to go down and learn the development side, or whether to collaborate with someone who can help on the backend.

Nancy OShea

Community Expert

Post some images of what you want your desktop, tablet and mobile layouts to look like. One of us will help get you started.

Nancy O'Shea— Product User & Community Expert

BenPleysier

Community Expert

Please have a look at Building a Responsive Layout with Bootstrap 4 Version 2 - YouTube

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

A

Anonymous

OK, this looks like something that makes sense to me! Thank you, Ben!

O

osgood_

Legend

nancyfarlow wrote
OK, this looks like something that makes sense to me! Thank you, Ben!

I dont know how that is 'helpful' as you dont have the extension, unless you buy it. Just go to Youtube 'Use Dreamweaver to make a responsive website'

Heres just 2 that come up:

How to Make a Responsive Website | Dreamweaver cc | 2018 - YouTube

Creating a Responsive Website using Dreamweaver CC - YouTube

You should not be using Bootcrap at all unless you know html and css. Good luck with using a bloated workflow when it could be so simple with a few lines of code.

Nancy OShea

Community Expert

Learn about Bootstrap classes.

Bootstrap 4 Tutorial

Every Bootstrap document starts with a container followed by a row. Optionally you may add columns or cards to hold content.

<div class="col">something here</div>

</div>

Click inside your Jumbotron and go to the Insert menu > Image.

Nancy O'Shea— Product User & Community Expert

A

Anonymous

Nancy,

Thank you for trying to help, but this is the same tutorial that I linked in my post that I cannot make heads or tails of. What you followed with is more of the same gobbledegook to me. I need something that is geared toward graphic designers rather than programmers.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded