Skip to content

Arsalan #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Arsalan #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
38e3fdc
Fixed layout for BootstrapOne.html
arsalan Jun 13, 2015
dbe0625
Implemented layout using responsive column resets
arsalan Jun 13, 2015
528f4b4
implemented layout using grid classes
arsalan Jun 13, 2015
1740a62
implemented layout changes using css floats (pull-right and pull-left…
arsalan Jun 13, 2015
f4bcfdd
Removed extraneous row from the 4th challenge, added new challenges a…
arsalan Jun 13, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions BootstrapFive.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<style type="text/css">
.content {
background: #EEE;
border: 1px solid #DDD;
padding: 10px;
}
</style>
</head>
<body>
<!-- Use the cute kitty pictures bellow, and arrange them into the desired result. You'll need the one style item defined above to complete this properly. The rest is all Bootstrap. -->
<div class="row">
<div class="content col-lg-2 col-md-3 col-sm-4 col-xs-6">I'm content!</div>
<div class="content col-lg-2 col-md-3 col-sm-4 col-xs-6">I'm content!</div>
<div class="content col-lg-2 col-md-3 col-sm-4 col-xs-6">I'm content!</div>
<div class="content col-lg-2 col-md-3 col-sm-4 col-xs-6">I'm content!</div>
<div class="content col-lg-2 col-md-3 col-sm-4 col-xs-6">I'm content!</div>
<div class="content col-lg-2 col-md-3 col-sm-4 col-xs-6 visible-lg">I'm content only visible to large screens!</div>

</div>

</body>
</html>
22 changes: 13 additions & 9 deletions BootstrapFour.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,19 @@
</head>
<body>
<!-- Use the cute kitty pictures bellow, and arrange them into the desired result. You'll need the one style item defined above to complete this properly. The rest is all Bootstrap. -->
<div class="row">
<img class='img-responsive nopadding col-xs-3' src='http://placekitten.com/g/490/490'>
<img class='img-responsive nopadding col-xs-3' src='http://placekitten.com/g/500/500'>

<img class='img-responsive' src='http://placekitten.com/g/490/490'>
<img class='img-responsive' src='http://placekitten.com/g/500/500'>
<img class='img-responsive' src='http://placekitten.com/g/510/510'>
<img class='img-responsive' src='http://placekitten.com/g/495/495'>
<img class='img-responsive' src='http://placekitten.com/g/810/810'>
<img class='img-responsive' src='http://placekitten.com/g/520/520'>
<img class='img-responsive' src='http://placekitten.com/g/530/530'>
<img class='img-responsive' src='http://placekitten.com/g/540/540'>
<img class='img-responsive' src='http://placekitten.com/g/550/550'>
<img class='img-responsive nopadding col-xs-6 pull-right' src='http://placekitten.com/g/810/810'>

<img class='img-responsive nopadding col-xs-3 pull-left' src='http://placekitten.com/g/510/510'>
<img class='img-responsive nopadding col-xs-3 pull-left' src='http://placekitten.com/g/495/495'>

<img class='img-responsive nopadding col-xs-3' src='http://placekitten.com/g/520/520'>
<img class='img-responsive nopadding col-xs-3' src='http://placekitten.com/g/530/530'>
<img class='img-responsive nopadding col-xs-3' src='http://placekitten.com/g/540/540'>
<img class='img-responsive nopadding col-xs-3' src='http://placekitten.com/g/550/550'>
</div>
</body>
</html>
13 changes: 8 additions & 5 deletions BootstrapOne.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,14 @@
</head>
<body>
<!-- Add the correct Bootstrap classes to achieve the desired result. The styling defined above has already been applied. -->
<div class="">
<div class="header">Header</div>
<div class="nav">Nav</div>
<div class="body">Body</div>
<div class="footer">Footer</div>

<div class="container-fluid">
<div class="row header">Header</div>
<div class="row">
<div class="col-md-4 nav">Nav</div>
<div class="col-md-8 body">Body</div>
</div>
<div class="row footer">Footer</div>
</div>
</body>
</html>
25 changes: 25 additions & 0 deletions BootstrapReorderColumns.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-md-push-4">
<div class="alert alert-danger">B</div>
</div>
<div class="col-md-4 col-md-pull-4">
<div class="alert alert-info">A</div>
</div>

<div class="col-md-4">
<div class="alert alert-warning">C</div>
</div>
</div>
</div>
</body>
</html>
21 changes: 20 additions & 1 deletion BootstrapThree.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,30 @@

<!-- You'll need to add a bit of your own styling to get the desired result. -->
<style type="text/css">
.red {
background-color: rgb(255,0,0);
}

.blue {
background-color: rgb(0,0,255);
}

.black {
background-color: #000;
}

.box{
height: 100px;
}

</style>
</head>
<body>
<!-- Add the divs you'll need to achieve the desired result bellow this line. -->

<div class="row">
<div class="col-xs-12 col-md-6 black box"></div>
<div class="col-xs-12 col-md-6 col-lg-3 blue box"></div>
<div class="col-xs-12 col-lg-3 visible-lg red box"></div>
</div>
</body>
</html>
12 changes: 10 additions & 2 deletions BootstrapTwo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,19 @@
border: 1px solid black;
background-color: yellow;
}

</style>
</head>
<body>
<!-- A little less help this time. You'll need to add the remaining divs, and use the fill class from the style defined at the top of the doc. -->
<div class="fill">This first column will be too large when the rows wrap, so you have to figure out how to get the second row to display properly.</div>

<div class="row">
<div class="col-xs-6 col-md-3 fill">This first column will be too large when the rows wrap, so you have to figure out how to get the second row to display properly.</div>
<div class="col-xs-6 col-md-3 fill">Second</div>

<div class="clearfix visible-xs-block visible-sm-block"></div>

<div class="col-xs-6 col-md-3 fill">Third</div>
<div class="col-xs-6 col-md-3 fill">Fourth</div>
</div>
</body>
</html>