bootstrap3 in dreamweaver

HTML & CSS
1

Just starting out and ran into a prob I’m not sure if theres a fix for, or whether it’s just dreamweaver.

Basically I’ve made 3 columns measuring 4, but the 3rd column drops below when it should remain in the same row. The hrow was an attempt to remove margins and padding… I havent a clue why in dreamweaver the 3rd column drops. When viewed in browser the columns are correctly aligned. It just makes it harder to work with a display like that in dw.

Thanks for looking and advice

<div class = “header”>
<div class = “container”>
<div class = “row”>
<div class = “col-sm-4”> <p id=“hrow”>4 wide</p></div>
<div class = “col-sm-4”> <p>4 wide</p></div>
<div class = “col-sm-4”> <p>4 wide</p></div>
<div class= “clearfix visible-md-block”></div>
</div>
</div>
</div>

2

Hi pr0c3ss. Welcome to the forums. :slight_smile:

The Dw design view is notoriously unreliable. What appears in real browsers is the real test. But make sure to test across many browsers. It sounds like there’s a weak point in your code. I’m not familiar with BS, but beware of modifying the settings too much.

3

As Ralph said, DW is unreliable to test in. It’s based IIRC off a really old Opera version. You would be better off testing on actual browsers. That being said, if your issue is still happening, any chance we could get the full HTML/CSS to recreate the issue on our end? your HTML you showed isn’t enough to recreate any issues.

4

Ignore any output you see in the DW design window as it has no real bearing on how the css is applied. Th dw window is a wysiwyg (or more correctty wysiwtf) and not a browser and does not render css correctly. Just because something displays badly in DW does not mean that the code is wrong or should be changed.

Bottom line is don’t use DW in design view but stick to the code editor (which is very good) and then just preview in a browser.:slight_smile:

You can link to the bootsrap files to create a simple template to use for debugging questions on the forum like this.

Here’s the one I use (with the OPS html added).


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>

<body>
<div class = "header">
		<div class = "container">
				<div class = "row">
						<div class = "col-sm-4">
								<p id="hrow">4 wide</p>
						</div>
						<div class = "col-sm-4">
								<p>4 wide</p>
						</div>
						<div class = "col-sm-4">
								<p>4 wide</p>
						</div>
						<div class= "clearfix visible-md-block"></div>
				</div>
		</div>
</div>
</body>
</html>

Just save that somewhere and you can test BS pages when questions arise.:slight_smile:

5

Thanks Paul. Since I came back there are so many different frameworks and other…“tools” which I’m unaware of. I’ll save that.

6

Thanks for the replies guys. After a few more weeks of BootS, I dropped it and decided to code/style everything manually And have indeed learnt that the DW work view is much to be desired. The live view is pretty good though as its rendered via chrome