Rebuilding from scratch a website using Bootstrap

[Don Lowe]

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.

[ALsp · Accepted solution]

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

[Don Lowe]

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

Thanks.

Don

[ALsp]

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.

[Nancy OShea]

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.

[osgood_]

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]

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/

[osgood_]

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

[Nancy OShea]

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.

[osgood_]

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

[Don Lowe]

Thanks.

[osgood_]

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>