/    Sign up×
Community /Pin to ProfileBookmark

Bootstrap help

Copy linkTweet thisAlerts:
Jan 16.2015

Can someone please help me to get this layout with bootstrap? I am beginner and i cant figure out. The image is on this link:

[url]http://i.imgur.com/JT3F96R.jpg[/url]

The red stroke indicates things i cant figure out how to do them. I would be really happy if someone could write code or really describe (i am pure beginner) how to get this layout.
I will be most gratefull for your help and time.

to post a comment
JavaScript

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@LesshardtoofindJan 18.2015 — Hard to tell from your picture but something like this?

[code=html]
<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
<div class="row" style="">
<div class="col-sm-12" style="background-color:lavender; height: 40px;"></div>
</div>
<div class="row">
<div class="col-sm-1" style="background-color:lavender; height: 500px;"></div>
<div class="col-sm-10" style="background-color:lavenderblush; height: 500px; overflow: hidden;"><img src="http://d1p2djnhl25rj0.cloudfront.net/sites/default/files/IMG_7790.JPG"

style="width: 105%; position: relative; left: -2%;"></div>
<div class="col-sm-1" style="background-color:lavender; height: 500px;"></div>
</div>
<div class="row">
<div class="col-sm-1" style="background-color:lavender; height: 40px;"></div>
<div class="col-sm-1" style="background-color:black; height: 40px; overflow: hidden; color: white; padding-top: 10px;">Home</div>
<div class="col-sm-1" style="background-color:black; height: 40px; overflow: hidden; color: white; padding-top: 10px;">About Us</div>
<div class="col-sm-1" style="background-color:black; height: 40px; overflow: hidden; color: white; padding-top: 10px;">Contact Us</div>
<div class="col-sm-1" style="background-color:black; height: 40px; overflow: hidden; color: white; padding-top: 10px;">Other Info</div>
<div class="col-sm-6" style="background-color:black; height: 40px;"></div>
<div class="col-sm-1" style="background-color:lavender; height: 40px;"></div>
</div>
<div class = "row">
<div class="col-sm-1" style="background-color:lavender; height: 100px";></div>
<div class="col-sm-10" style="background-color:lavender; height: 100px; padding-top: 20px;"><h1>Welcome to My Bootstrap Example Page</h1></div>
<div class="col-sm-1" style="background-color:lavender; height: 100px;"></div>
</div>
<div class = "row">
<div class="col-sm-1" style="background-color:lavender; height: 15px";></div>
<div class="col-sm-10" style="background-color:grey; height: 15px;"></div>
<div class="col-sm-1" style="background-color:lavender; height: 15px;"></div>
</div>
<div class = "row">
<div class="col-sm-1" style="background-color:lavender; height: 200px";></div>
<div class="col-sm-3" style="background-color:grey; height: 200px; padding 5%;"><div style="background-color: white; height: 200px;"></div></div>
<div class="col-sm-7" style="background-color:grey; height: 200px;">
<h4>Some Text</h4>
<h4>Some Text</h4>
<h4>Some Text</h4>
<h4>Some Text</h4>
<h3 style="float: right; margin-top: 50px;">Some Text</h3>
</div>
<div class="col-sm-1" style="background-color:lavender; height: 200px;"></div>
</div>
<div class = "row">
<div class="col-sm-1" style="background-color:lavender; height: 15px";></div>
<div class="col-sm-10" style="background-color:grey; height: 15px;"></div>
<div class="col-sm-1" style="background-color:lavender; height: 15px;"></div>
</div>
<div class="row" style="">
<div class="col-sm-12" style="background-color:lavender; height: 20px;"></div>
</div>
<div class="row" style="">
<div class="col-sm-9" style="background-color:lavender; height: 60px;"></div>
<div class="col-sm-1" style="background-color:lavender; height: 60px;"><h4>Text</h4></div>
<div class="col-sm-1" style="background-color:lavender; height: 60px;"><button style="width: 100%; position: relative; top: 5px; float: right;">Click Me</button></div>
<div class="col-sm-1" style="background-color:lavender; height: 60px;"></div>
</div>
<div class="row" style="">
<div class="col-sm-6" style="background-color:lavender; height: 10px;"></div>
<div class="col-sm-5" style="background-color:red; height: 10px;"></div>
<div class="col-sm-1" style="background-color:lavender; height: 10px;"></div>
</div>
<div class="row" style="">
<div class="col-sm-1" style="background-color:lavender; height: 200px;"></div>
<div class="col-sm-10" style="background-color:lavender; height: 200px;"><h4 style="float: right;">Good Ole Text</h4></div>
<div class="col-sm-1" style="background-color:lavender; height: 200px;"></div>
</div>
</div>

</body>
</html>
[/code]

It looked pretty close you may have to fiddle with some margins ect. Great reference is http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp. It does a great job explaining the grid system and how to use it as a beginner. Just follow through the tutorials and use their try me editors to actively view your changes. Its pretty straightforward.
×

Success!

Help @Jerry000 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.1,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...