Known Participant

Answered

Rebuilding from scratch a website using Bootstrap

Forum|Forum|7 years ago
April 15, 2018
3 replies
1454 views

Let me first say that I am new to Bootstrap and have taken an online class that touched on it. The website's I am building temporarily resides at donlowephotos.com.

I am re-building a website so it will appear nicely on mobile phones and tablets. I chose Bootstrap-eCommerce because I liked its format but have no plans to use the eCommerce part of it. Here is my problem: I copied a Div from the original website (www.cedarlodgearkansas.com built using Dreamweaver) into this one. I see the Div and its contents in the code view and when I click on it, the Div name appears at the bottom of the screen and is selected. I want to center the text and put a border around it. However, I don’t see the panels. What am I doing wrong? Any help will be appreciated.

Thanks,

Don

Thanks,

Don

P.S. How to you change the webite's title via code view? Dreamweaver won't allow me to do this.

This topic has been closed for replies.

Correct answer ALsp

Hi Don,

I'm sure you'll get some Bootstrap help from some of the regulars in this forum. So, I'm going to provide an alternative view...

You sound like a CSS/HTML beginner-to-intermediate level coder. If that's true, the effort it will take to master a huge CSS framework, such as Bootstrap, would be about the same as learning to code a modern web page from scratch. You should seriously consider that. Adobe constantly searches for "stuff" to toss inside Dreamweaver to make it appear as attractive to novices as possible. Because the Dreamweaver programmers are not masters of CSS, they tend to include free things, like Bootstrap. The problems occur when users have problems, or when the freebies become unsupported or in need of upgrading. Thousands of Dreamweaver users were left hanging when Adobe discontinued support for Spry (a library begun by Macromedia) and later for Boilerplate. So, use Bootstrap knowing the risks. Better to learn CSS yourself. Your choices are to accept Adobe's fishes or learn to fish yourself

Now back to your regular programming and brainwashing....

O

osgood_

Legend

One solution uses Bootstrap the other doesnt.

The idea if you use Bootstrap is to insert another container-fluid <div> AFTER your image (you may not need the container-fluid <div> if you already have one in your page code. Then insert a new Bootstrap row <div class="row"></diiv> and inside of that you would insert your content <div> with the appropriate Bootstrap classes attached to it to center the text and offset(center) the <div> using the Bootstrap offset and text-center helper classes at various viewport widths.

Depends what you want to do - battle with all the Bootstrap classes or roll your own, which is much cleaner and easier to manage, you need to know very little code to do so. If you dont want to write your own code then you may well be better served with the suggestion that Al provided, his company provides a responsive layout tool for Dreamweaver which according to Al is much easier than trying to battle along with Bootstrap, its a commercial extension but if might be worth a look at.

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap 4</title>

<style>

/* Bootstrap & Non Bootstrap css styles*/

.pull-out {

background-color: #f2f2f2;

padding: 20px;

border: 1px solid #999;

}

/* Non Bootstrap css styles*/

.pull-out-2 {

display: flex;

justify-content: center;

width: 75%;

margin: 0 auto;

background-color: #f2f2f2;

padding: 20px;

border: 1px solid #999;

}

@media screen and (max-width: 768px) {

.pull-out-2 {

width: 80%;

}

@media screen and (max-width: 480px) {

.pull-out-2 {

width: 90%;

}

</style>

</head>

<body>

<div class="pull-out col-md-8 col-sm-10 col-10 offset-md-2 offset-sm-1 offset-1 text-center"><h5>Center column & text</h5></div>

</div>

<h5>Center column & text</h5>

</div>

</body>

Nancy OShea

Community Expert

1) Get familiar with Bootstrap 4 utility classes and use them as much as you can to save time and spare you from a lot of unnecessary hand coding. Span tags are not semantic. Don't use them if you can avoid them.

https://getbootstrap.com/docs/4.1/utilities/borders/

<div class="border border-primary text-center">This div has a border and text is centered.</div>

2) Do not tamper with Bootstrap or jQuery files. If you must override a default style, use your custom stylesheet for that.

3) Avoid code errors. Check your code often during editing sessions & fix reported errors right away. You'll have way fewer problems that way.

4) Avoid saving as a Template until you get everything working as expected in mobile, tablet and desktops. When you're completely satisfied with your Test.html page and the code is free of errors, then SaveAs a Template.dwt file and add editable regions for content that will change from page to page.

5) Open Properties panel (Ctrl+F3). See screenshot.

Nancy O'Shea— Product User & Community Expert

O

osgood_

Legend

https://forums.adobe.com/people/Nancy+OShea wrote
<div class="border border-primary text-center">This div has a border and text is centered.</div>

Problem I see with that approach is 'border' and 'boarder-primary' WILL NOT be the correct color or possibly the correct border weight, infact a myriad of the Bootstrap styling classes are useless in the majority of cases as the user will need to re-write those default classes to suit the styling of their own website. They might as well write their own classes.

The only useful bit of Bootstrap, if anything, is probably the grid and the components but most of the styling classes are pointless really.

Nancy OShea

Community Expert

I disagree. Contextual classes (primary, danger, warning, success, default, etc....) are an integral part of Bootstrap. The Theme & classes you use will determine which colors are displayed. Bootswatch has several theme choices.

https://bootswatch.com/

Or you can roll your own custom Theme with SASS variables.

https://getbootstrap.com/docs/4.0/getting-started/theming/

Nancy O'Shea— Product User & Community Expert

ALspCorrect answer

Legend

Hi Don,

I'm sure you'll get some Bootstrap help from some of the regulars in this forum. So, I'm going to provide an alternative view...

You sound like a CSS/HTML beginner-to-intermediate level coder. If that's true, the effort it will take to master a huge CSS framework, such as Bootstrap, would be about the same as learning to code a modern web page from scratch. You should seriously consider that. Adobe constantly searches for "stuff" to toss inside Dreamweaver to make it appear as attractive to novices as possible. Because the Dreamweaver programmers are not masters of CSS, they tend to include free things, like Bootstrap. The problems occur when users have problems, or when the freebies become unsupported or in need of upgrading. Thousands of Dreamweaver users were left hanging when Adobe discontinued support for Spry (a library begun by Macromedia) and later for Boilerplate. So, use Bootstrap knowing the risks. Better to learn CSS yourself. Your choices are to accept Adobe's fishes or learn to fish yourself

Now back to your regular programming and brainwashing....

D

Don LoweAuthor

Known Participant

I think you might be right. What would you recommended, a media query? Any guidance will be appreciated.

Thanks.

Don

ALsp

Legend

Since you asked for guidance...

Keep in mind I mean no disrespect to Nancy, who is a very nice person.

Bootstrap and Dreamweaver are mutually exclusive. Adobe chose someone else's code to include in Dreamweaver in order to make Dreamweaver appear as if it has page-building features. Bootstrap is not Adobe's code, nor is it the defacto way to craft pages. It is an extremely heavy library used mostly by designers who either do not want to or do not know how to code their own pages. Anyone who tells you different is not being honest.

Your choices are to muddle through with Bootstrap and hang out in this forum. The few Bootstrap fans who are also Adobe ACPs will be able to help you through things... though it could be time-consuming.

You could go to the W3C web site and take their CSS and HTML tutorials and learn to do what Bootstrap does. You will save 90+% of the bloat inherent in Bootstrap.

You could consider a page-building extension to Dreamweaver, such as our Harmony tool. It is not free, so will need to justify the cost versus your time, and the fact that you will also be buying one-on-one email and telephone support as well.

Those are your choices. Choose what's best for you.

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