Highlighted

Rebuilding from scratch a website using Bootstrap

Explorer ,
Apr 15, 2018

Copy link to clipboard

Copied

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.

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....

Views

480

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Rebuilding from scratch a website using Bootstrap

Explorer ,
Apr 15, 2018

Copy link to clipboard

Copied

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.

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....

Views

481

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 15, 2018 0
Mentor ,
Apr 15, 2018

Copy link to clipboard

Copied

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....

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 15, 2018 0
Explorer ,
Apr 15, 2018

Copy link to clipboard

Copied

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

Thanks.

Don

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 15, 2018 0
Mentor ,
Apr 15, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 15, 2018 0
Adobe Community Professional ,
Apr 15, 2018

Copy link to clipboard

Copied

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.

CC-BugReport.jpg

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 15, 2018 1
LEGEND ,
Apr 15, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 15, 2018 0
Adobe Community Professional ,
Apr 15, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 15, 2018 0
LEGEND ,
Apr 15, 2018

Copy link to clipboard

Copied

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

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/

Hummm who uses those in their website, seriously no professional would use those default colors. Bootstrap is like painting by numbers, inappropriate for all but amatuers.

I mean the OP has already changed the color of the navbar css and he is only a fraction done.

By the way OP DONT alter the default bootstrap.css file, you are playing with a raging fire if you do that. Link a custom.css stylesheet AFTER the bootstrap.css and make any changes to the default styling in that file

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 15, 2018 0
Adobe Community Professional ,
Apr 15, 2018

Copy link to clipboard

Copied

osgood_  wrote

Hummm who uses those in their website, seriously no professional would use those default colors. Bootstrap is like painting by numbers, inappropriate for all but amatuers.

It might surprise you.   It's quite common to use contextual classes in  back end CRUD pages and front end forms and alert boxes.   Default colors, styles, etc... are easily changed globally from the SASS file.

Since you obviously don't like DW or Bootstrap and don't understand how to use them together well enough to answer questions,  I think you should stay away from all Bootstrap topics.   Your remarks like the one above are biased and inappropriate to the topic.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 15, 2018 0
osgood_ LATEST
LEGEND ,
Apr 16, 2018

Copy link to clipboard

Copied

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

osgood_   wrote

Hummm who uses those in their website, seriously no professional would use those default colors. Bootstrap is like painting by numbers, inappropriate for all but amatuers.

It might surprise you.   It's quite common to use contextual classes in  back end CRUD pages and front end forms and alert boxes.   Default colors, styles, etc... are easily changed globally from the SASS file.

Back-end is certainly where Bootstrap belongs if anywhere and it might surprise you thats exatly what it was built for, something not to be seen by the general public. Who cares what hideous color schemes are chosen to be used in a situation where at most half a dozen people may see it and use it.

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

Since you obviously don't like DW or Bootstrap and don't understand how to use them together well enough to answer questions,  I think you should stay away from all Bootstrap topics.   Your remarks like the one above are biased and inappropriate to the topic.

Well I can agree on not liking either DW or Bootstrap but my remarks I think are bang on topic and so usually are my solutions, Bootrap or not. I prefer to actually code the solution though not just copy and paste from snippets of codiing I find by Googling websites, which is what usaully happens regarding most Bootstrap questions in his forum.

I keep writing Bootrap for some reason - most appropriate though

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 16, 2018 0
Explorer ,
Apr 15, 2018

Copy link to clipboard

Copied

Thanks.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 15, 2018 0
LEGEND ,
Apr 15, 2018

Copy link to clipboard

Copied

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>

<!-- Latest compiled and minified Bootstrap CSS -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

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

<!-- Bootstrap -->

<div class="container-fluid">

<div class="row">

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

</div>

<!-- Non Bootstrap -->

<div class="pull-out-2">

<h5>Center column & text</h5>

</div>

</body>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 15, 2018 0