Help styling a grid row

Report · May 14, 2019

I'm trying to style my bootstrap layout with a custom css file. I followed a youtube video on how to add grid rows with columns.

Below is my basic layout that I'm trying to style. I thought I was making some progress until I tried to add an image as a background in my header. It shows up in the header and the footer. Is that because they both have a class that says "col-sm-12" Do I need to change the name on a class? And what about the fact that I have a lot of div that says class=row? The video looked the same as my html except for being a fluid container.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Untitled Document</title>
    
<link href="css/bootstrap-4.3.1.css" rel="stylesheet">

</head>
<body>
   
    <div class="container">
   <header class="row">
     <div class="col-sm-12">Content goes here</div>
      </header>
   <div class="row">
     <nav class="col-sm-3">Content goes here</nav>
    <main class="col-sm-9">Content goes here</main>
   </div>
   <footer class="row">
    <div class="col-sm-12">Content goes here</div>
   </footer>
    </div>

<script src="js/jquery-3.3.1.min.js"></script>

<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.3.1.js"></script>
</body>
</html>

Report · May 17, 2019

Alright. Thanks.

Report · May 17, 2019

sheryltoo wrote
I must have the latest version of Dreamweaver because I just downloaded it last week and signed up for the monthly payments. Is Flex like a link some place?
And since I wasn't haven't much success with my flex document, I decided to go on in my book so now I'm up to CSS grid layouts. I also just read that no version of IE supports the current grid standard so I can see why maybe I better try and figure out flex.

If you are using css designer, then there is no flexbox options as it has not been updated since its introduction. The only way you can use flexbox is by using code view.

css grids, have the same problem in Dw, (plus a number of missing features). The book you are reading is wrong, as an older version of the css grid is supported in IE10/11 and Edge supports the current version, (as shown in the book).

Dw is unfortunatly missing a lot of newer html5 and css features, (but as it is all you wish to use, having paid for it).

Report · May 17, 2019

This is getting more and more confusing. I bought the new version of Dreamweaver because I found CS6 to be easy to use but it seems that so much has changed in HTML and CSS since I first designed my site. Also, I think my book was saying the same thing you said about what browsers support css grid.

Report · May 17, 2019

The main reasons for using Dw CC now are the built-in file managment and bootstrap support, (if you wish-to/can use bootstrap). With bootstrap support being the only thing that CS6 does not have.

Code view is based on the (free) Brackets code editor, so if you wish to code, a better solution for coders would be to use the Brackets code editor, (or Visual Studio Code, code editor (also free)). Then use CS6 for file managment, which is what many now do.

Sorry if this advice comes too late, (you have already commited to a CC subscription) but I have personally not found any reason to use CC, (any program) in preference to CS6, when it comes to web development using Adobe products, unless one wishes to use Bootstrap, (I do not).

You may find many saying that CC has pre/post-processor and github support, but those are only any good if you wish to use them, (again, I do not, along with many others) and they are certainly not for use by someone learning.

Report · May 17, 2019

This is good to know so I probably won't renew my subscription when it ends next year.

Report · May 17, 2019

sheryltoo wrote
This is good to know so I probably won't renew my subscription when it ends next year.

You're getting too much conflicting information right now.

In fact, the code hints in CC are superior to CS6. The UI options are better. Support for Hi-DPI screens is better and the list goes on and on....

I use Bootstrap because it works in all devices. The code is standardized such that I can hand off my work to any developer who knows Bootstrap and they can pick up where I left off. There's a reason millions of websites worldwide are using Bootstrap. The regulars here know who the Bootstrap fans and haters are. Sadly, the conflicting messages you're getting from this group are not helping you make informed decisions. They are just confusing you more.

You need to spend a few months learning to work with code and Bootstrap if you wish. Then you can make informed decisions about what methods and tools work best for YOU. Nobody can make those decisions for you.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · May 17, 2019

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

I use Bootstrap because it works in all devices.

You make that sound like no other code does and that's just plain untrue.

https://forums.adobe.com/people/Nancy+OShea wrote
The code is standardized such that I can hand off my work to any developer who knows Bootstrap and they can pick up where I left off.

Good developers can work with any code, its bad ones that use Bootstrap that find it difficult. Did I mention Bootstrap is severely bloated in both html and css by default?

https://forums.adobe.com/people/Nancy+OShea wrote
There's a reason millions of websites worldwide are using Bootstrap. The regulars here know who the Bootstrap fans and haters are.

The reason millions use Bootstrap is because its largely suited to team environments - it was invented by Twitter, hardy your everyday normal website. Sadly lots of techniques from web giants seem to find their way into simple website requiring no-more than a simple approach, but you cant tell em that use such workflows.

https://forums.adobe.com/people/Nancy+OShea wrote
Sadly, the conflicting messages you're getting from this group are not helping you make informed decisions. They are just confusing you more.
You need to spend a few months learning to work with code and Bootstrap if you wish. Then you can make informed decisions about what methods and tools work best for YOU. Nobody can make those decisions for you.

Think I covered that in an earlier post. You shouldnt even attempt to deploy Boostrap before you have a good understanding of html/css only then can you make a judgement as to if Bootstrap is more suitable....just following a lot of lemmings is never the right path.

Report · May 17, 2019

I appreciate all the advice people are giving me, but yes, it definitely is confusing me.

One reason I thought I'd try a different approach to designing my site instead of using Bootstrap was because the class attribute was messing me up. I wasn't sure if it was ok to change the name of the class instead of having more than one area on my website have the same class. I know when you're coding a site and using class, you can give a different class to different parts but I wasn't sure I could do that in Bootstrap.

And I think Cs6 was easier to use but that's because I think creating a Css file is easier. I do however agree with you that the code hints are superior in CC and because of that, I really have no regrets making the commitment to own it for a year.

I know I have to work on learning more about Html5 and Css and the book I bought has a lot of information on both. I was anxious to build a page from scratch so I kind of jumped to the harder sections. Maybe it would be better to start from the beginning.

Report · May 17, 2019

pziecina wrote
If you are using css designer, then there is no flexbox options as it has not been updated since its introduction. The only way you can use flexbox is by using code view.

Seriously, what shite is that? Not that I know what css designer is but it sounds a lot like it has something to do with css.

Report · May 17, 2019

First code hints are only available in code view, thats why I said use Brackets, (cut down version used for Dw's code view). CS6 can be used for everything else if pre/post-processor, bootstrap, github is not required, (but Brackets has extensions for processors and github).

osgood_ wrote
pziecina wrote
If you are using css designer, then there is no flexbox options as it has not been updated since its introduction. The only way you can use flexbox is by using code view.
Seriously, what shite is that? Not that I know what css designer is but it sounds a lot like it has something to do with css.

css designer is Dw's visual replacement for the css style panel, but it only has support for css 2.1 plus a few other more modern properties, (so outdated as to be worse than CS6's css styles panel).

I could not care less if someone wishes to use bootstrap or not, but to imply that one cannot create responsive designs that work on every device from small wearable to large screen, (80+ inch tv's) without using it is the biggest lie posted on forums.

Report · May 17, 2019

I NEVER SAID BOOTSTRAP IS THE ONLY WAY TO DO THINGS FOLKS. So stop attributing false statements to me. Any code monkey can build responsively with Flexbox, Grids, & fallback floats for older browsers.

When this OPs odyssey began a week ago, I suggested a DIY website builder like Portfolio. Easy to use, responsive and no coding skills required. When that didn't fly, I tossed together a really simple Bootstrap demo to show how pages should work in all devices. I'm sorry if the OP got the mistaken idea that this was the ONLY way to build responsively. It's certainly not. But it's conveniently integrated in DW CC and as such it works well for the majority of us who use Bootstrap in our day-to-day practice.

For those who don't want to use Bootstrap, do a Google search for other responsive frameworks. You'll find plenty to choose from.

I'm outa here.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · May 17, 2019

https://forums.adobe.com/people/Nancy+OShea wrote
But it's conveniently integrated in DW CC and as such it works well for the majority of us who use Bootstrap in our day-to-day practice.
For those who don't want to use Bootstrap, do a Google search for other responsive frameworks. You'll find plenty to choose from.

This is a Dreamweaver forum. Dreamweaver is a tool to facilitate the development/design of a web site. Dreamweaver includes Bootstrap which is a CSS and JS library from which we can extract many of the functions (read: code) that are required to create such a site. We can choose to ignore Boottrap and code our own, we can even ignore some of the Boottrap functions while deploying Boottrap in order to use our own code. It remains a choice.

Wat amazes me is the opposition to Bootstrap which effectively takes away our choice to use Bootstrap. Furthermore, these critics of Bootstrap do not use the framework themselves, in fact they do not even use Dreamweaver. Yet they purport to be experts on the subject of Dreamweaver and Bootstrap. Go figure.

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

Report · May 18, 2019

BenPleysier wrote
Wat amazes me is the opposition to Bootstrap which effectively takes away our choice to use Bootstrap. Furthermore, these critics of Bootstrap do not use the framework themselves, in fact they do not even use Dreamweaver. Yet they purport to be experts on the subject of Dreamweaver and Bootstrap. Go figure.

No one is taking away anyones choices. Some of the more experienced developers in this forum, who know and have worked with Bootstrap, are actually putting an alternative view out there in reference to Bootstrap because youre certainly not going to come clean about its rather obtuse and bloated approach. Are you taking away our choice to do so?

Some may not care, thats their choice, others who might want to take web development seriously may want all the opinions they can get.

Bootstrap is not exclusive to DW so whats your point , it can be used in any editor and personally lve never said lm an expert where Dreamweaver is concerned. I dont use it but that doesnt make me ignorant in terms of how Bootstrap functions..

What is ignorant are those that use Dreamweaver and Bootstrap before they know some basic html and css to be able to formulate an opinion as to if Bootstrap is suitable for them.

Whichever choice you make its a time consuming learning curve but without being adequate in both youll never know the truth.

Report · May 18, 2019

The poster of this question is the first person I have seen for a long time, to actually buy a book to learn how to code. They have also said they cannot, (but wish to) understand the how and why of all the classes used by bootstrap work.

They are better served by learning and using the code in the book if they wish to learn how and why. Unfortunately Dw has css designer which is missing much of the modern css making the learning modern methods impossible and confusing. So they must use code view.

Anyone wishing to learn modern coding, deserves everyones support but we all have our own views. Mine is to not use Dw,'s built in features if they can, because Dw will only complicate the learning process, (this includes using bootstrap). I have also suggested that they use a free code editor along with CS6, as nothing in Dw CC is essential.

Report · May 18, 2019

I wouldn't push anyone to learn about coding if they were not interested and had no desire to produce anything beyond a personal website.

Some actually like to know how things work and feel more in control when they do so rather than just blindly applying preformatted css styles to elements, which in most cases, where stying an element is concerned, will need to be reverse engineered anyway when using frameworks.

I would encourage anyone who shows an interest in depth about what they sre doing to continue to learn some fundamentals.

If Dreamwraver doesnt have the built in support for those who dont wish to learn about basic coding then its not the right software for them.

I dont think even seasoned Bootstrap uses would try to claim they know every helper class and what it does. Its important to know and be familiar with those classes that are used most frequently so you can just pop into code view and apply them if necessary, rather than having to keep researching.

Report · May 18, 2019

I'm sorry I've been causing so much controversy. I really appreciate everyone who's offered me suggestions or have tried to help. I did an online course back in 2010 and learned enough about html and css to be able to design a webpage but never realized that I needed to keep up on all current rules so my site does not meet the standards for being responsive.

I learn better when I have a book in front of me with chapters on any topic I'm looking for. I know books can be outdated but so is the information you find on the internet. I know there's video tutorials that will take you through setting up a webpage but they don't answer some of the questions I have which is why I'm hoping a book would.

Ever since I bought my first computer I've been fascinated in how they work and why things work the way they do. I don't like someone to just do something for me unless I understand why it was done that way which is why I haven't used any of the free templates. Also because I want to set up my sites using backgrounds and images that I drew myself. I'm hoping that's not going to be an issue with designing a responsive webpage. I did read that png images are more commonly used now so I'm going to have to change some of my gifs to png.

Perhaps I'll get this figured out one day and before everything changes again.

I'm not a coder or a web developer. Just a person who enjoys creating and enjoys playing on a computer.

Report · May 18, 2019

No need to apologise. The regulars around here frequently squabble over which is the best approach to take when building a website. In the end it all comes down to a matter of choice. Unfortunately the choice is not always based on sound knowledge so it could be the wrong choice.

Whatever you decide lm sure you will get help in this forum when you hit the wall head on, whatever workflow you eventually choose to use.

Report · May 18, 2019

Thanks.

Report · May 26, 2019

I think I finally created a web page that can be viewed on all devices and I ended up doing it with just writing codes.

I was having too many problems trying to do it with Bootstrap and I think the main reason was because I didn't really understand everything that needed to be coded or how to get it coded but I think a lot of responsive web designing is finally making sense.

I've checked out my dummy page on my cell phone, an ipad, and my computer and everything seems to be lining up the way I coded it so I hope I've done everything right.

Here's a link to my test page. SherylsPage Some of the link colors aren't what I'm going to end up with and obviously I have to add urls to my links but I think I've finally made progress.

Report · May 26, 2019

This stylesheet is 404 not found.

<link href="styletest2.css" rel="stylesheet" type="text/css">

Your Welcome sign is too small for desktops and too wide for mobile phones (320px). One way to fix that is with this CSS.

.style-logo {

margin: 10px auto;

width: 100%;

height: 100%;

}

I would prefer to see an SVG image instead of a GF. SVGs re-scale without any loss in quality.

Use Illustrator to create vector graphics.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · May 26, 2019

I deleted that second style sheet from the page which is why you couldn't find it. It was one of my test styles and not the completed one.

As far as the size of my welcome sign, it's probably a matter of preference. I actually prefer small graphics to large ones which is one of the reasons I like to draw my own graphics. My desktop monitor is 24" and the size doesn't bother me or look too small but like I said, I prefer a small image and on my cell phone, I can see the entire image. It doesn't look too big to me but maybe that too is a matter of preference.

If I were to make another banner and make it bigger, wouldn't that end up being too big for a mobile phone? I guess I'm a little confused on how I can make something bigger for the desktop but be smaller on a cell phone without distorting my image. Perhaps having an SVG image solves that but I don't know anything about those types of images. I did a google search and found a site that converts images into svg. I gave it a try but then my image was just in black and white and not even the whole image. Maybe I didn't convert it correctly. I'm not sure I want to worry myself about trying to figure out how to convert images into SVG files because my site is only for personal use.

And I did try and make those changes to the image class but adding a 100% width and height stretched my image and not in a good way.

Report · May 26, 2019

Keep in mind that 1200px is really quite small on a 4 or 5K display. And 346px is smaller than a postage stamp. See screenshot.

Conversely, on a 320px wide phone, your yellow bear gets cut off.

Another way to approach responsive images is with SRC SET See the MDN article below.

Responsive images - Learn web development | MDN

Nancy O'Shea— Product User, Community Expert & Moderator

Report · May 26, 2019

I guess I have more learning to do. Thanks for that link.

Report · May 15, 2019

osgood_ a écrit

Bootstrap use this kind of rubbish code:
<div class="navbar-nav">
<a class="nav-item nav-link">Link 1</a>
</div>

I understand your positioning but, and although not being a bootstrap addict, I don't share it.

When approaching CSS thinking about OOCSS, BEM or Atomic Design (see http://www.puce-et-media.com/deployer-sass-de-maniere-efficace/) it is a good thing to use a form of classite (I don't know how to translate this term,... classite: excessive use of class)

for example, it is possible to structure navigation bars as follows

<ul>

</ul>

</div>

something that could not be easly targeted simply by using a

nav a {

}

but will need to add specifics selectors to include li and dissociate the fact of being an item and/or a link

moreover, the styling would remain too specific to a set of nesting and fixed HTML tag structures

my 2 cents

Report · May 16, 2019

I dont know what 'nav-icon' is do you mean 'icon-bar'?

You could easily use the following:

<nav>

</nav>

css:

nav li {

}

nav i {

}

nav a{

}

There is never a need to fill the html with copious amounts of duplicated classes unless of course youre using..............

Bootstrap would probably look something like below....why duplicate the 'nav-item' and 'nav-link' classes?