I am trying to make below layout using bootstrap grid. There is a container <div class="row"> and half width two divs in that (<div1> and <div2>). The <div1>'s height would be changeable as content size. And again, the <div2> should have two child divs(<div2-1>, <div2-2>) that half height of <div1> each. How can I make this layout with Bootstrap grid?
I tried like that, but not working. :
<div class="row">
<div class="col-md-6" id="div1">
Some content...
</div>
<div class="col-md-6" id="div2">
<div id="div2-1" style="height:50%;">
</div>
<div id="div2-2" style="height:50%;">
</div>
</div>
</div>
Try this...
div {
border: 1px solid black;
}
#div2-1,
#div2-2 {
height: 50%;
border: 1px solid red !important;
}
#div1,#div2{
height:50px;
}
#div2.col-xs-6
{
padding:0px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-6" id="div1">
Some content...
</div>
<div class="col-xs-6" id="div2">
<div id="div2-1">
</div>
<div id="div2-2">
</div>
</div>
</div>
</div>
Using Bootstrap 4
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-6 bg-primary" style="min-height: 500px;"></div>
<div class="col-md-6">
<div class="row h-100 flex-column">
<div class="col-md-6 mw-100 bg-danger"></div>
<div class="col-md-6 mw-100 bg-success"></div>
</div>
</div>
</div>
<style>
/* just for displaying correctly without content */
[class*='col'] {
min-height: 200px;
}
</style>
you can use jQuery if you want height of colunmn to be auto and also the inside divs to be half of it.
But you might want to keep the divs overflow-y to auto if one div has content more than it can hold.
$(document).ready(function() {
var totHeight = $("#col").height();
$("#div-1").css("height", totHeight / 2);
$("#div-2").css("height", totHeight / 2);
})
body * {
color: #ccc;
}
#div-1,
#div-2 {
overflow-y: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="row">
<div class="col-sm-6" id="col">
<div id="div-1" style="background-color:red;">
Content
<br>Content
</div>
<div id="div-2" style="background-color:blue;">
Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
</div>
</div>
<div class="col-sm-6"></div>
</div>
</body>
hello try the below fiddle hope it helps also add the custom style if you want to
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6">
<div id="navigation">
<label>side Column</label>
</div>
</div>
<div class="col-xs-6 col-sm-6">
<div id="text1">
<label>First Divider</label>
</div>
<div id="text2">
<label>second Divider</label>
</div>
</div>
</div>
</div>
fiddle demo
//Try this one...
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<section>
<div class="col-md-12 bg-warning" border="1">
<div class="row" border="1">
<div class="col-md-6" border="1">
<h3>First Column</h3>
</div>
<div class="col-md-6" border="1">
<div class="row bg-danger">
<h3>Second Column First Row<h3>
</div>
<div class="row bg-success">
<h3>Second Column Second Row</h3>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="shared/jquery.js" type="text/javascript"></script>
<script src="shared/shiny.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="shared/shiny.css"/>
</head>
<style>
.cn {
background-color: antiquewhite;
height: 50%;
top: 50%;
position: relative;
}
.video-player-container{
height: 500px;
background-color: gray;
}
.video-container{
min-height: 350px;
}
</style>
<body>
<h1>HTML UI</h1>
<div class="col-lg-12 video-player-container">
<div class="cn"></div>
</div>
</body>
</html>
Suprisingly super easy with Bootstrap 5 flex
Probably i am missing something
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="row">
<div class="col-md-6 bg-primary" style="min-height: 500px;">Some main content</div>
<div class="col-md-6">
<div class="row h-100 flex-column">
<div class="flex-fill bg-danger">Part 1</div>
<div class="flex-fill bg-success">Part 2</div>
</div>
</div>
</div>
Related
I want to make this card x-scrollable. But after three blocks, the fourth block is rendering in the new line.
I want to scroll horizontally. I tried everything from past 5 days.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="ie=edge" http-equiv="x-ua-compatible">
<title></title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="wrapper d-flex">
<div class="p-4 pt-5" id='content' style="width:100%">
<div class="container-fluid">
<div class="container-fluid">
<h2><strong>Please make this scrollable horizonally</strong></h2>
<div class="card card-section">
<div class="card-header">
Heading
</div>
<div class="card-body">
<form method="post">
<div class='container-fluid'>
<div class='row customClass'>
<div class='col-md-4'>
<div style='width:300px;background-color:green;height: 500px; margin: 10px;'></div>
</div>
<div class='col-md-4'>
<div style='width:300px;background-color:green;height: 500px; margin: 10px;'></div>
</div>
<div class='col-md-4'>
<div style='width:300px;background-color:green;height: 500px; margin: 10px;'></div>
</div>
<div class='col-md-4'>
<div style='width:300px;background-color:green;height: 500px; margin: 10px;'></div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</body>
</html>
css:
.customClass {
overflow-x: auto;
white-space: nowrap;
}
.customClass .col-md-4 {
display: inline-block;
float: none;
}
Codepen link: https://codepen.io/maharshi9999/pen/qBddebG
just remove the row class. Use what you have just remove that class as boom done!
<div class='customClass'>
<div class='col-md-4'>
if want something different to your approach, let me know.
Good luck!
Bootstrap 4 uses flex. In case if you want override the wrapping sytle of Bootstrap row you have to use flex-wrap:nowrap; for row.
https://codepen.io/rohinikumar4073/pen/Exjjqzx
.row.customClass {
overflow-x: auto;
flex-wrap: nowrap;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="ie=edge" http-equiv="x-ua-compatible">
<title></title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="wrapper d-flex">
<div class="p-4 pt-5" id='content' style="width:100%">
<div class="container-fluid">
<div class="container-fluid">
<h2><strong>Please make this scrollable horizonally</strong></h2>
<div class="card card-section">
<div class="card-header">
Heading
</div>
<div class="card-body">
<form method="post">
<div class='container-fluid'>
<div class='row customClass'>
<div class='col-md-4'>
<div style='width:300px;background-color:green;height: 500px; margin: 10px;'></div>
</div>
<div class='col-md-4'>
<div style='width:300px;background-color:green;height: 500px; margin: 10px;'></div>
</div>
<div class='col-md-4'>
<div style='width:300px;background-color:green;height: 500px; margin: 10px;'></div>
</div>
<div class='col-md-4'>
<div style='width:300px;background-color:green;height: 500px; margin: 10px;'></div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I removed col-md-4 classes as well as set the width to customClass.
.card-body {
overflow-x: scroll;
}
.customClass {
width: 1500px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="ie=edge" http-equiv="x-ua-compatible">
<title></title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="wrapper d-flex">
<div class="p-4 pt-5" id='content' style="width:100%">
<div class="container-fluid">
<div class="container-fluid">
<h2><strong>Please make this scrollable horizonally</strong></h2>
<div class="card card-section">
<div class="card-header">
Heading
</div>
<div class="card-body">
<form method="post">
<div class='container-fluid'>
<div class='row customClass'>
<div class='col'>
<div style='background-color:green;height: 500px; margin: 10px;'></div>
</div>
<div class='col'>
<div style='background-color:green;height: 500px; margin: 10px;'></div>
</div>
<div class='col'>
<div style='background-color:green;height: 500px; margin: 10px;'></div>
</div>
<di class='col'>
<div style='background-color:green;height: 500px; margin: 10px;'></div>
</di>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!--<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>-->
</body>
</html>
Seems like I can't get that image to be aligned with the Text.
I am trying to get that logo aligned with those two sentences.
Also, There was no style setting. Just the default Bootstrap.css file.
<div class="box-padding-md grey-bg">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<img src="../img/bg.png" style="float:left;width:150px;height:150px;margin-left:20px;margin-right:20px;margin-bottom:20px;">
<h3 class="display-5">"Espher Information Assocation"</h3>
<p class="lead">제16세대 프로젝트</p>
</div>
</div>
</div>
You can do that with bootstrap media object, no need to use any css for that.
Check that link you can have a better idea
https://getbootstrap.com/docs/4.0/layout/media-object/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bootstrap Media</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="box-padding-md grey-bg">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<div class="media p-3">
<img src="https://i.imgur.com/v9f1nS2.jpg" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div class="media-body">
<h3 class="display-5">"Espher Information Assocation"</h3>
<p class="lead">제16세대 프로젝트</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You can use something like this
<style>
.align{
width:150px;
height:150px;
margin-left:20px;
margin-right:20px;
margin-bottom:20px;
}
<style>
In HTML use this
<a class="align"><img src="../img/bg.png" alt=""></a>
Use the grid system: https://jsfiddle.net/wwWaldi/3xy4woq7/13/
<div class="box-padding-md grey-bg">
<div class="jumbotron jumbotron-fluid">
<div class="row">
<div class="col-1"></div>
<div class="col-4 text-right">
<img src="../img/bg.png" id="myImg" >
</div>
<div class="col-6">
<h3 class="display-5">"Espher Information Assocation"</h3>
<p class="lead">제16세대 프로젝트</p>
</div>
<div class="col-1"></div>
</div>
</div>
</div>
I want to create a grid system similar to this page using Bootstrap 4. I want to create a square box in a col-sm-4 and a longer rectangle next to it in a col-sm-8 of the same height. I'm having trouble creating a square box that is responsive. How can I do this?!
Current code:
<div class="container">
<div class="row section-box">
<div class="col-sm-4 text-center description-text">
first square box.
</div>
<div class="col-sm-8 description-image">
second rectangle box.
</div>
</div>
</div>
Things I've tried:
Using jQuery to set the height. This doesn't work with padding on the div, and isn't responsive.
This link where I managed to get a square box with a rectangle next to it, but as soon as text was added it was no longer a square.
You could use bootstrap 4 embed-responsive class and it's done
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row m-5">
<div class="col-1">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-1</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-2">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-2</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-3">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-3</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-4">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-4</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-5">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-5</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-6">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-6</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-7">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-7</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-8">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-8</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-9">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-9</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-10">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-10</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-11">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-11</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-12">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-12</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
eventually, a pseudo element could help :
.col-sm-4:before,
.col-sm-8:before {
content: '';
width: 0;
}
.col-sm-4:before,
.col-sm-8:before,
.ib {
white-space: normal;
display: inline-block;
vertical-align: middle;
max-width: 100%;
}
.col-sm-4:before {
padding-top: 100%;
/* makes expand to a square */
}
.col-sm-8:before {
padding-top: 50%;
/* makes a rectangle half the height of a square */
}
[class^="col"] {
white-space: nowrap;
box-sizing: border-box;
box-shadow: inset 0 0 0 5px white;
padding: 0;
text-align: center;
background: url(http://lorempixel.com/400/200) tomato;
background-size: cover;
}
.row {
color: white;
text-shadow: 0 0 black, 0 0 2px black;
}
.col-sm-4 {
background: gray;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row section-box">
<div class="col-sm-4 text-center description-text p-0">
first square box.
</div>
<div class="col-sm-8 description-image p-0">
second rectangle box.
</div>
</div>
<div class="row section-box">
<div class="col-sm-8 description-image p-0">
<div class="ib">second<br> rectangle box.</div>
</div>
<div class="col-sm-4 text-center description-text p-0">
first square box.
</div>
</div>
</div>
I have trouble aligning my divs with bootstrap. The big div in the middle is pushing down the boxes at the sides. How can I achieve this layout?
The layout of divs I want to achieve:
I've been working with this code, tell me if it's what you need:
HTML:
<div class="row">
<div class="col-md-3">
<div class="row ">
<div class="col-md-12 medium">
</div>
</div>
<div class="row">
<div class="col-md-12 medium">
</div>
</div>
</div>
<div class="col-md-6">
<div class="row ">
<div class="col-md-12 large">
</div>
</div>
</div>
<div class="col-md-3">
<div class="row ">
<div class="col-md-12 small">
</div>
</div>
<div class="row">
<div class="col-md-12 small">
</div>
</div>
<div class="row">
<div class="col-md-12 small">
</div>
</div>
</div>
</div>
CSS:
.small{
height:100px;
border: 1px solid;
}
.medium{
height:200px;
border: 1px solid;
}
.large{
height:400px;
border: 1px solid;
}
Hope it helps!
Based on the image you have provided i have created below sample design please check it. In order to achieve your design i have written some inline css please check it as well
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.1.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-lg-3 col-sm-3 col-xs-3" >
<div class="row" style="min-height:200px;border:1px solid;margin-bottom:60px">
This is testing data
</div>
<div class="row" style="min-height:360px;border:1px solid;margin-bottom:10px">
This is testing data
</div>
</div>
<div class="col-lg-5 col-sm-5 col-xs-5" style="min-height:620px;border:1px solid;margin-left:10px;margin-right:10px" >
This is center content
</div>
<div class="col-lg-3 col-sm-3 col-xs-3" >
<div class="row" style="min-height:200px;border:1px solid;margin-bottom:10px">
This is testing data
</div>
<div class="row" style="min-height:200px;border:1px solid;margin-bottom:10px">
This is testing data
</div>
<div class="row" style="min-height:200px;border:1px solid;margin-bottom:10px">
This is testing data
</div>
</div>
</div>
</div>
</body>
</html>
Declare three main divs and place children divs in it. Check below image. In responsive status parent 100% children side by side
https://i.stack.imgur.com/1qTPG.png
.border_black{
border: thin black solid
}
.margin_top_10px{
margin-top: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 ">
<div class="row border_black">
<p>Left Side Contents 1</p>
</div>
<div class="row border_black margin_top_10px">
<p>Left Side Contents 2</p>
<p>Left Side Contents 2</p>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 center_div text-center">
<div class="row">
<div class="col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1 border_black">
<p>Center Contents</p>
<p>Center Contents</p>
<p>Center Contents</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 ">
<div class="row border_black">Right Side Contents 1</div>
<div class="row border_black margin_top_10px">Right Side Contents 2</div>
<div class="row border_black margin_top_10px">Right Side Contents 3</div>
</div>
</div>
</div>
Here is JSFiddle
Hope this helps.
A real Web design newbie here. I've tried plenty of places online for an answer to this (including here) but to no avail.
I'm trying my hand at a basic grid in bootstrap 3. My columns only stack vertically, they won't sit side-by-side, and they always resize to fill the browser window. This happens in Chrome or Firefox on desktop, and the same thing happens on chrome on my mobile devices (7 inch or 4.7 inch).
FYI, I've just been editing with Sublime 2 and keeping all the bootstrap files under a folder in explorer. Not sure if that's relevant.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<style>
.col-xs-12{
height: 100px;
background-color: blue;
color: white;
text-align: center;
}
.col-xs-6{
height: 100px;
background-color: yellow;
color: black;
text-align: center;
border: 2px solid black;
}
</style>
</head>
<div class="container">
<div class="row">
<div class="col-xs-12">col-xs-12
</div>
</div>
<div class="row">
<div class="col-xs-6">col-xs-6
</div>
<div class="col-xs-6">col-xs-6
</div>
</div>
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
Sorry about the terrible code formatting, it's hard to do this on the only device I have handy while on holiday - my 7 inch tablet!
The problem with your code it seems is the references to
col-md-4
I ran a find/replace for all
-md-
and replaced it with
-xs-
and it seems to be working correctly with Twitter bootstrap.
See this JSfiddle. http://jsfiddle.net/jdSF3/
The Body
<div class="container">
<div class="row">
<div class="col-xs-12">col-xs-12
</div>
</div>
<div class="row">
<div class="col-xs-6">col-xs-6
</div>
<div class="col-xs-6">col-xs-6
</div>
</div>
<div class="row">
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
</div>
<div class="row">
<div class="col-xs-8">.col-xs-8</div>
<div class="col-xs-4">.col-xs-4</div>
</div>
<div class="row">
<div class="col-xs-4">.col-xs-4</div>
<div class="col-xs-4">.col-xs-4</div>
<div class="col-xs-4">.col-xs-4</div>
</div>
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
The CSS
.col-xs-12{
height: 100px;
background-color: blue;
color: white;
text-align: center;
}
.col-xs-6{
height: 100px;
background-color: yellow;
color: black;
text-align: center;
border: 2px solid black;
}