I am writing and example application using bootstrap 4 and php. I am trying to get two columns to display next to each other at a certain breakpoint. Here is an example. What can I do to solve this?
<html>
<head>
<!--bootstrap 4.0-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3" style="margin: 20px 0;">
<h4>Search</h4>
</div>
<div class="col-lg-3" style="margin: 20px 0;">
<h4>Displaying ### results</h4>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-sm-12">
<p>Search field</p>
<p>Search field</p>
<p>Search field</p>
<p>Search field</p>
</div>
<!-- at col-sm-6 I want two columns to display. how can i solve this? -->
<div class="col-lg-9 col-sm-6">
<?php for($i=0; $i<10; $i++)
{
?>
<div>
Record
<hr/>
</div>
<?php
}
?>
</div>
</div>
</div>
<!--bootstrap 4 javascript-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>
The most important thing to remember about Bootstrap is that each row must have columns that add up to 12. Instead of putting col-sm-6 on each of your record container, what you'll want to do is instead put row on that, and add col-6 to each of the <div> record elements outputted inside of your PHP loop.
This can be seen in the following:
<html>
<head>
<!--bootstrap 4.0-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3" style="margin: 20px 0;">
<h4>Search</h4>
</div>
<div class="col-lg-3" style="margin: 20px 0;">
<h4>Displaying ### results</h4>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-sm-12">
<p>Search field</p>
<p>Search field</p>
<p>Search field</p>
<p>Search field</p>
</div>
<!-- at col-sm-6 I want two columns to display. how can i solve this? -->
<div class="col-lg-9 row">
<div class="col-6">
Record
<hr/>
</div>
<div class="col-6">
Record
<hr/>
</div>
<div class="col-6">
Record
<hr/>
</div>
<div class="col-6">
Record
<hr/>
</div>
<div class="col-6">
Record
<hr/>
</div>
<div class="col-6">
Record
<hr/>
</div>
<div class="col-6">
Record
<hr/>
</div>
<div class="col-6">
Record
<hr/>
</div>
<div class="col-6">
Record
<hr/>
</div>
<div class="col-6">
Record
<hr/>
</div>
</div>
</div>
</div>
<!--bootstrap 4 javascript-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>
Also, note that col-6 will apply to all widths in Bootstrap 4, whereas col-sm-6 will only apply to widths larger than 575px:
It appears you've got mismatched number of columns.
I suspect this bit...
<div class="col-lg-3 col-sm-12">
should be...
<div class="col-lg-3 col-sm-6">
is this you want:
<html>
<head>
<!--bootstrap 4.0-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3" style="margin: 20px 0;">
<h4>Search</h4>
</div>
<div class="col-lg-3" style="margin: 20px 0;">
<h4>Displaying ### results</h4>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-sm-9">
<p>Search field</p>
<p>Search field</p>
<p>Search field</p>
<p>Search field</p>
</div>
<!-- at col-sm-6 I want two columns to display. how can i solve this? -->
<div class="col-lg-9 col-sm-3">
<?php for($i=0; $i<10; $i++)
{
?>
<div>
Record
<hr/>
</div>
<?php
}
?>
</div>
</div>
</div>
<!--bootstrap 4 javascript-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>
https://jsfiddle.net/48n2hvyd/3/
Thanks for or your help. After reading your answers I worked it out. This is what I needed:
<html>
<head>
<!--bootstrap 4.0-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6" style="margin: 20px 0;">
<h4>Search</h4>
</div>
<div class="col-lg-6" style="margin: 20px 0;">
<h4>Displaying ### results</h4>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<p>Search field</p>
<p>Search field</p>
<p>Search field</p>
<p>Search field</p>
</div>
<div class="col-lg-9">
<div class="row">
<?php for($i=0; $i<10; $i++)
{
?>
<div class="col-lg-12 col-sm-6">
Record
<hr/>
</div>
<?php
}
?>
</div>
</div>
</div>
</div>
<!--bootstrap 4 javascript-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>
Related
I'm trying to build product cards into a split screen but they continue to stack on top of each other instead of side-by-side.
Does anyone have a solution ?
My code can be found below. I'm a newbie at coding, so ignore the some of the images and lack of experience. The purpose of this code is to create a uniform display of items being auction offed for charity.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stuf Auction</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates&display=swap" rel="stylesheet">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="stufcss.css">
</head>
<body>
<!-- left side -->
<div class="split left">
<div class="centered">
<img src="images/stufgreen.png" alt="stuf logo">
<h2></h2>
<p></p>
</div>
</div>
<!-- right side -->
<div class="split right">
<div class="centered">
<div class="container">
<div class="row row-content">
<div class="card">
<img src="images/jordanshoes.jpg" alt="Denim Jeans" style="width:100%">
<h1>Tailored Jeans</h1>
<p class="price">$19.99</p>
<p>Some text about the jeans. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.</p>
<p><button>Bid</button></p>
</div>
<div class="card">
<img src="images/jordanshoes.jpg" alt="Denim Jeans" style="width:100%">
<h1>Tailored Jeans</h1>
<p class="price">$19.99</p>
<p>Some text about the jeans. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.</p>
<p><button>Bid</button></p>
</div>
</div>
</div>
</div>
</div>
<!-- footer -->
<footer class="site footer">
<div class="container">
<div class="row">
<div class="col-4 col-sm-2 offset-1">
<h5>Links</h5>
<ul class="list-unstyled">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="col-6 col-sm-5 text-center">
<h5>Social</h5>
<a class="btn btn-social-icon btn-instagram" href="http://instagram.com/"><i
class="fa fa-instagram"></i></a>
<a class="btn btn-social-icon btn-facebook" href="http://facebook.com/"><i
class="fa fa-facebook"></i></a>
<a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a>
<a class="btn btn-social-icon btn-google" href="http://youtube.com/"><i class="fa fa-youtube"></i></a>
</div>
<div class="col-sm-4">
<a role="button" class="btn btn-link" href="tel:+12065551234"><i class="fa fa-phone"></i>
1-206-555-1234</a><br />
<a role="button" class="btn btn-link" href="mailto:campsites#nucamp.co"><i class="fa fa-envelope-o"></i>
campsites#nucamp.co</i>
</div>
</div>
</div>
</footer>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
</html>
There's no class as split in bootstrap-4. If you want to split your screen you can use bootstrap-grids
<div class="container">
<div class="row">
<div class="col-sm">
One column
</div>
<div class="col-sm">
One column
</div>
</div>
</div>
more info
I'm a bit new using Bootstrap and I'm having a problem with the jumbotron, div class row surpasses the left edge of the jumbotron
This is a sample of how i'm doing it
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container-fluid">
<div class="jumbotron jumbotron-fluid mt-2 pt-4">
<div class="row">
<h4>Simple Title</h4>
</div>
<div class="row">
<p class="lead">El transformador se encuentra <span class="badge badge-success">APROBADO</span></p>
</div>
<div class="row">
<p class="small">Last revision: 12-11-2018</p>
</div>
</div>
</div>
why the text exceeds the edge of the jumbotron?
what am i doing wrong?
Edit: codepen to see the problem in diferent resolution
Thanks
Just remove jumbotron-fluid class
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container-fluid">
<div class="jumbotron mt-2 pt-4">
<div class="row">
<h4>Simple Title</h4>
</div>
<div class="row">
<p class="lead">El transformador se encuentra <span class="badge badge-success">APROBADO</span></p>
</div>
<div class="row">
<p class="small">Last revision: 12-11-2018</p>
</div>
</div>
</div>
I am loading in bootstrap grids to make my site responsive.. However, my div are not reacting to the tempaltes. The idea is that on a standard macbook or a larg screen the divs cover a 3rd of the page. And on mobile 100%. what is wrong with my code. Have i loaded in bootstrap?
<html>
<head>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class"col-sm-12 col-lg-4 col-md-4" id="homeDiv1">
</div>
<div class"col-sm-12 col-lg-4 col-md-4" id="homeDiv2">
</div>
<div class"col-sm-12 col-lg-4 col-md-4" id="homeDiv3">
</div>
</div>
</body>
</html>
Your classes need an equal sign.
Instead of
class"col-sm-12 col-lg-4 col-md-4"
You need
class="col-sm-12 col-lg-4 col-md-4"
problem in class"col-sm-12 col-lg-4 col-md-4" use (=) like class="col-sm-12 col-lg-4 col-md-4"
.row div{
background-color:pink;
border:1px solid gray;
height:40px;
}
<link rel="stylesheet" type="text/css" href="./css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-sm-12 col-lg-4 col-md-4" id="homeDiv1">
</div>
<div class="col-sm-12 col-lg-4 col-md-4" id="homeDiv2">
</div>
<div class="col-sm-12 col-lg-4 col-md-4" id="homeDiv3">
</div>
</div>
Just a typo: <div class="col-sm-12 col-lg-4 col-md-4" id="homeDiv1">
.row > div
{
height:100px;
background:#ccc;
padding:5px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12 col-lg-4 col-md-4" id="homeDiv1">1
</div>
<div class="col-sm-12 col-lg-4 col-md-4" id="homeDiv2">2
</div>
<div class="col-sm-12 col-lg-4 col-md-4" id="homeDiv3">3
</div>
</div>
</div>
</body>
</html>
Its hard for me to explaint what i want, so i made a mocup
How to make that with bootstrap 4? So goal is that those 4 elements on the right are all the time (except on mobile) equal height like element on the left (image). Can someone help with that? Here is makrup for now.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<div class="container">
<section class="hero">
<div class="row">
<div class="col col-md-8"><img src="http://placehold.it/700x300/ccc/333.png?text=placeholder" alt=""></div>
<div class="col col-md-4">
<div class="contentMy">somthing</div>
<div class="contentMy">somthing</div>
<div class="contentMy">somthing</div>
<div class="contentMy">somthing</div>
</div>
</div>
</section>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
You can use Bootstrap 4's new flexbox utility classes. The d-flex class is used for display:flex, and then flex-column is used to set flex-direction: column..
<div class="container">
<section class="hero">
<div class="row">
<div class="col col-md-8"><img src="" alt=""></div>
<div class="col col-md-4 d-flex flex-column">
<div class="contentMy h-100">somthing</div>
<div class="contentMy h-100">somthing</div>
<div class="contentMy h-100">somthing</div>
<div class="contentMy h-100">somthing</div>
</div>
</div>
</section>
</div>
http://www.codeply.com/go/YyTEyi4IcU
I can't seem to get this site to format correctly (be "responsive" to mobile) when viewing with mobile devices.
I am using Bootstrap, but when I view from a mobile device, it just looks like a normal desktop is viewing it. Other sites I have done, it "zooms" in on the text and such to look nice on mobile.
I'm sorry if I'm missing something small here, but any help would be greatly appreciated!
Here's the code I'm using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TITLE HERE</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/bootstrap-responsive.min.css">
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<script type="text/javascript" src="/js/modernizr-2.5.3.min.js"></script>
</head>
<body>
<div role="main">
<header>
<div class="container">
<div class="row address">
<div class="span12">
<h2><?=$content['address']?><br/>
<?=$content['city']?> <?=$content['state']?> <?=$content['zip']?></h2>
</div>
</div>
<div class="row-fluid prop_info">
<div class="span12">
<h3>$<?=number_format($content['price'])?> | <?=$content['beds']?> Bedrooms | <?=$content['baths']?> Bathrooms | <?=number_format($content['square_feet'])?> Square Feet | MLS# <?=$content['mls_id']?></h3>
</div>
</div>
</div>
</header>
<div class="container">
<div class="row center">
<div class="span12">
<ul class="nav nav-pills menu">
<li>VIDEO</li>
<li>PHOTOS</li>
<li>WALKSCORE MAP</li>
</ul>
</div>
</div>
<div class="container">
<div class="row center">
<div class="span12">
<div id="description-shadow-video-top"></div>
<iframe id="vp1HMbXI" title="Video Player" width="100%" height="auto" frameborder="0" src="<?=$content['video_url']?>" allowfullscreen></iframe>
<div id="description-shadow-video"></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">
<?=$content['main_content']?>
</div>
</div>
</div>
<br/>
<div class="container">
<div class="row">
<div class="span12">
<div class="pull-left">
<br/>
<br/>
<br/>
<img src="/img/foundation/presented-by.png" width="120" alt="" />
</div>
<div class="pull-left">
<img src="/img/some_pic.jpg" alt="" name="agentImg" width="90" id="agentImg" />
</div>
</div>
</div>
<br/>
<div class="row center">
<div class="span12">
<h3><?=$user['first_name']?> <?=$user['last_name']?></h3>
<br />
<?=$user['company']?><br /><?=$user['address']?>
<br />
<?=$user['city']?>, <?=$user['state']?> <?=$user['zip']?>
<br />
<br />
<?=$user['contact_number']?>
<br />
<?=$user['email_address']?>
<br />
<br />
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="span12">
<a href="http://www.somesite.com" target="_blank">
<img src="/img/the_logo.png" width="210" />
</div>
</div>
</footer>
</div>
</body>
</html>
It seems that you are only using span12 in all the rows, which means that they will never get segmented when the viewport changes. A large part of having a responsive grid layout is breaking the elements of a row into segments so that the row's layout can be adjusted if the viewport falls below certain thresholds.
If the primary <div> in every row is span12 all the content in the row will remain essentially width=100% and the content will only scale down as the viewport decreases.
I would suggest avoid using span12 for every primary <div> and spend some time reconsidering the granularity of the content. See the Twitter Bootstrap documentation on Scaffolding for reference.
Use this layout, i think it will solve your issue. I removed the row class.
TITLE HERE
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable">
<link rel="stylesheet" href="/css/bootstrap.min.css"> <link rel="stylesheet" href="/css/bootstrap-responsive.min.css">
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="/js/bootstrap.js"></script>
<script type="text/javascript" src="/js/modernizr-2.5.3.min.js"></script> </head> <body> <div role="main">
<header>
<div class="container">
<div class="address">
<div class="span12">
<h2><?=$content['address']?><br/>
<?=$content['city']?> <?=$content['state']?> <?=$content['zip']?></h2>
</div>
</div>
<div class="row-fluid prop_info">
<div class="span12">
<h3>$<?=number_format($content['price'])?> | <?=$content['beds']?> Bedrooms | <?=$content['baths']?> Bathrooms | <?=number_format($content['square_feet'])?> Square Feet | MLS# <?=$content['mls_id']?></h3>
</div>
</div>
</div>
</header>
<div class="container">
<div class="center">
<div class="span12">
<ul class="nav nav-pills menu">
<li>VIDEO</li>
<li>PHOTOS</li>
<li>WALKSCORE MAP</li>
</ul>
</div>
</div>
<div class="container">
<div class="center">
<div class="span12">
<div id="description-shadow-video-top"></div>
<iframe id="vp1HMbXI" title="Video Player" width="100%" height="auto" frameborder="0" src="<?=$content['video_url']?>" allowfullscreen></iframe>
<div id="description-shadow-video"></div>
</div>
</div>
</div>
<div class="container">
<div class="span12">
<?=$content['main_content']?>
</div>
</div>
<br/>
<div class="container">
<div class="span12">
<div class="pull-left">
<br/>
<br/>
<br/>
<img src="/img/foundation/presented-by.png" width="120" alt="" />
</div>
<div class="pull-left">
<img src="/img/some_pic.jpg" alt="" name="agentImg" width="90" id="agentImg" />
</div>
</div>
<br/>
<div class="center">
<div class="span12">
<h3><?=$user['first_name']?> <?=$user['last_name']?></h3>
<br />
<?=$user['company']?><br /><?=$user['address']?>
<br />
<?=$user['city']?>, <?=$user['state']?> <?=$user['zip']?>
<br />
<br />
<?=$user['contact_number']?>
<br />
<?=$user['email_address']?>
<br />
<br />
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="span12">
<a href="http://www.somesite.com" target="_blank">
<img src="/img/the_logo.png" width="210" />
</div>
</div>
</footer> </div> </body> </html>