Given this wrapping:
<div class="container">
<div class="row-fluid swell">
<div class="span9">
hello world
</div>
</div>
</div>
With this styling (atop twitter-bootstrap):
.swell {
background-color: #F5F5F5;
border: 1px solid #E3E3E3;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;
margin-bottom: 20px;
min-height: 20px;
padding: 19px;
}
How do I get graceful responsiveness?
(Plnkr where you can see the website running; drag side of browser window to see problem)
Don't make a div both a row and a well:
<div class="row-fluid">
<div class="swell">
<div class="span9">
hello world
</div>
</div>
</div>
Figured out the solution:
<div class="swell">
<div class="row-fluid">
<div class="span9">
Hello world!
</div>
</div>
</div>
Related
I tried positioning the footer in holy grail layout using bootstrap grod, but I am unable to do so. I tried everything
I tried positioning the footer in holy grail layout using bootstrap grod, but I am unable to do so. I tried everything
I tried positioning the footer in holy grail layout using bootstrap grod, but I am unable to do so. I tried everything
Could someone help with this?
`
html,
body {
height: 100%;
width: 100%;
}
.container-fluid {
border: 5px solid plum;
}
.main-row {
border: 5px solid orangered;
}
.left-sidebar {
border: 3px solid teal;
}
.nav-bar {
border: 3px solid crimson;
}
.main-right-sidebar {
border: 3px solid khaki;
padding: 0px;
}
.main-bar {
border: 3px solid greenyellow;
}
.right-sidebar {
border: 3px solid turquoise;
}
.footer {
border: 3px solid deeppink;
}
.cont {
border: 3px solid brown;
padding: 0px;
}
</style>
</head>
<body>
<div class="container-fluid h-100">
<div class="row h-100 main-row">
<div class="col-2 h-100 left-sidebar">
</div>
<div class="col-8 h-75 main-right-sidebar">
<div class="col-12 h-25 nav-bar">
</div>
<div class="col-12 h-75 main-bar">
</div>
</div>
<div class="col-2 h-75 right-sidebar">
</div>
<div class="col-10 h-25 footer">
</div>
</div>
</div>
</body>
</html>`
Try to offset your footer.
<div class="col-md-10 offset-md-1 h-25 footer">
</div>
I have two divs that supposed to be on one line. one div is 1/3 the width of the line and the second is 2/3rd width. what isnt the second bigger div floating up to be on the same line as the smaller one.
.home {
border: 4px solid gray;
background-image: radial-gradient(circle, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3)), url('https://unsplash.it/1024/768');
background-size: cover;
background-repeat: none;
background-position: center center;
}
.top {
background: black;
}
.bottom {
background: blue;
}
.left-nav {
border: 1px solid gray;
}
.right-content {
border: 1px dashed purple;
height: 100px;
}
<!--Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<section class="home">
<!--Middle Row-->
<div class="row">
<!--Top Row-->
<div class="twelve columns top u-full-width">
<h4 class="heading"><span class="demphasize">Teacher Application Submission for </span>Dwayne Neckles</h4>
</div>
<!--Navigation-->
<div class="left-nav one-third column">
<nav>
<ul>
<li>Home
</li>
<li>Biography
</li>
<li>Community
</li>
<li>Leadership
</li>
</ul>
</nav>
</div>
<div class="right-content two-thirds column">
</div>
<!--Footer Row-->
<div class="twelve columns u-full-width">
<h6 class="byline demphasize">Developed For</h6>
<img src="https://unsplash.it/204/52" width="204" height="52" alt="logo">
</div>
</div>
</section>
You need to wrap rows in <div class="row">...</div>
.home {
border: 4px solid gray;
background-image: radial-gradient(
circle,
rgba(0,0,0,0),
rgba(0,0,0,.3)
),url('https://unsplash.it/1024/768');
background-size: cover;
background-repeat: none;
background-position: center center;
}
.top{
background: black;
}
.bottom{
background
}
.left-nav {
border: 1px solid gray;
}
.right-content {
border: 1px dashed purple;
height: 100px;
}
<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/skeleton.2.02.css" rel="stylesheet"/>
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" rel="stylesheet"/>
<!--Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<section class="home">
<!--Middle Row-->
<div class="row">
<!--Top Row-->
<div class="twelve columns top u-full-width">
<h4 class="heading"><span class="demphasize">Teacher Application Submission for </span>Dwayne Neckles</h4>
</div>
</div>
<!--Navigation-->
<div class="row">
<div class="left-nav one-third column">
<nav>
<ul>
<li>Home</li>
<li>Biography</li>
<li>Community</li>
<li>Leadership</li>
</ul>
</nav>
</div>
<div class="right-content two-thirds column">
</div>
</div>
<!--Footer Row-->
<div class="row">
<div class="twelve columns u-full-width">
<h6 class="byline demphasize">Developed For</h6><img src="https://unsplash.it/204/52" width="204" height="52" alt="logo">
</div>
</div>
</section>
Here is my html
.div1 {
border: 1px solid black;
height: 100px;
}
.div2 {
border: 1px solid green;
height: 100px;
}
.div3 {
border: 1px solid red;
height: 100px;
}
.div4 {
border: 1px solid blue;
height: 100px;
}
.div5 {
border: 1px solid yellow;
height: 100px;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container main-content">
<div class="row">
<div class="col-md-6 div1">1</div>
<div class="col-md-6 div2">2</div>
</div>
<div class="row">
<div class="col-md-4 div3">3</div>
<div class="col-md-4 div4">4</div>
<div class="col-md-4 div5">5</div>
</div>
</div>
And output is
But my original grid system is
A margin in top and right.
How can I implement this on bootstrap grid system
You can use standard Bootstrap approach and add divs inside columns:
<div class="container main-content">
<div class="row">
<div class="col-md-6"><div class="div1">1</div></div>
<div class="col-md-6"><div class="div2">2</div></div>
</div>
<div class="row">
<div class="col-md-4"><div class="div3">3</div></div>
<div class="col-md-4"><div class="div4">4</div></div>
<div class="col-md-4"><div class="div5">5</div></div>
</div>
</div>
It will give you gutter between columns. If 30px is to much you can overwrite Bootstrap CSS.
To add margin-top simply, add it to the div1, div2 etc.
.div1,
.div2,
.div3,
.div4,
.div5{
margin-top: 10px;
}
Working example: https://codepen.io/paweljanicki/pen/wzdazq
I think you want to implement this for every col?
try to override the bootstrap col classes:
col-md-1 {margin: 2px 2px 0px 0px;}
col-md-2 {margin: 2px 2px 0px 0px;}
... till
col-md-12 {margin: 2px 2px 0px 0px;}
if there is no change, force it with !important.
col-md-6 {margin: 2px 2px 0px 0px !important;}
css:
.margin-right-10px{
margin-right:10px;
}
.margin-left-10px{
margin-left:10px;
}
.margin-5px{
margin-left:5px;
margin-right:5px;
}
.margin-top{
margin-top:1px;
}
js
$(".col-md-6").firstChild.addClass(margin-right-10px);
$(".col-md-6").secondChild.addClass(margin-left-10px);
$(".col-md-4").firstChild.addClass(margin-right-10px margin-top);
$(".col-md-4").secondChild.addClass(margin-5px margin-top);
$(".col-md-4").lastChild.addClass(margin-left-10px margin-top);
You can change css as you wish.
I want to create a bookcase like this
I've done some bit and the code is as follows
HTML
enter code here
<html>
<head>
<link rel="stylesheet" type="text/css" href="bookshelf.css" />
</head>
<body>
<div id="bookshelf">
<div class="shelf">
<div class="column" style="border-top:8px solid #444;">
<div class="rand">
<div class="inside"></div>
</div>
</div>
<div class="column">
<div class="rand">
<div class="rand-border"></div>
<div class="inside"></div></div>
</div>
</div>
<div class="column">
<div class="rand">
<div class="inside"></div>
</div>
</div>
<div class="column">
<div class="rand">
<div class="inside"></div></div>
</div>
</div>
<div class="column">
<div class="rand">
<div class="inside"></div></div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
.shelf {
width:360px;
margin: 50px auto;
box-shadow:5px 5px 50px #000;
}
.shelf .column {
border-style:solid;
border-width:0 10px 8px 8px;
border-color:#444 #444 #444 #444;
}
.shelf .column .rand {
border-bottom:100px solid #888;
border-right:1px solid #555;
}
.shelf .column .inside {
border-style:solid;
border-color:#000 #222 #666 #111;
height:100px;
background:url(wood.jpg) repeat;
box-shadow:inset 5px 5px 20px #000, inset 2px -2px 20px #111;
}
Problem: I want the book holder i.e. he base of each rack as shown in the image. Would love to have some ideas about this. currently my bookcase looks like the image below.
!bookcase screenshot
I need some help figuring out why bootstrap is not spacing my columns out correctly. I created a fiddle below with the slide show row and the next row with that has the 3 columns. For some reason the three columns are flush right instead of centered like they should be.
Can anyone tell me what I am doing wrong?
<header class="header">
<div class="container">
<div class="row" id="header">
<div class="span12">
<h1> Header</h1>
</div>
</div>
</div>
</header>
<br><br>
<div class="container">
<div class="row">
<img src="http://dummyimage.com/1200x425/000/fff&text=Slide+Show+1200+x+425" style="margin: 0px 0px 0px; border: 0px solid rgb(0, 0, 0);" />
</div>
<div class="row">
<div id="user1" class="span4 ">
<img src="http://dummyimage.com/370x150/000/fff" style="margin: 10px 0px 0px; border: 0px solid rgb(0, 0, 0);" />
</div>
<div id="user2" class="span4">
<img src="http://dummyimage.com/370x150/000/fff" style="margin: 10px 0px 0px; border: 0px solid rgb(0, 0, 0);" />
</div>
<div id="user3" class="span4 ">
<img src="http://dummyimage.com/370x150/000/fff" style="margin: 10px 0px 0px; border: 0px solid rgb(0, 0, 0);" />
</div>
<div class="clear"></div>
</div>
</div>
http://jsfiddle.net/yoderman94/ccnfu/
I hope I got your question right. Bootstrap class row has a margin left of about -20px. So the convention is to have an element with a class span inside it which gives it margin-left of 20px.
Your issue is not with the three boxes rather its with the row above it.
<div class="row">
<img src="http://dummyimage.com/1200x425/000/fff&text=Slide+Show+1200+x+425" style="margin: 0px 0px 0px; border: 0px solid rgb(0, 0, 0);" />
</div>
In the above code the row doesn't have a span class inside hence the image doesn't have 20px margin-left. You need to give a class say span12 to img and remove the inline style margin.
<div class="row">
<img class="span12" src="http://dummyimage.com/1200x425/000/fff&text=Slide+Show+1200+x+425" style=" border: 0px solid rgb(0, 0, 0);" />
</div>
See fiddle
Using row-fluid show-grid to locate them to middle like following
<div class="container">
<div class="row-fluid show-grid">
<img src="http://dummyimage.com/1200x425/000/fff&text=Slide+Show+1200+x+425" style="margin: 0px 0px 0px; border: 0px solid rgb(0, 0, 0);" />
</div>
<div class="row-fluid show-grid">
<div id="user1" class="span4 ">
<img class="span12" src="http://dummyimage.com/370x150/000/fff" style="margin: 10px 0px 0px; border: 0px solid rgb(0, 0, 0);" />
</div>
<div id="user2" class="span4">
<img class="span12" src="http://dummyimage.com/370x150/000/fff" style="margin: 10px 0px 0px; border: 0px solid rgb(0, 0, 0);" />
</div>
<div id="user3" class="span4 ">
<img class="span12" src="http://dummyimage.com/370x150/000/fff" style="margin: 10px 0px 0px; border: 0px solid rgb(0, 0, 0);" />
</div>
<div class="span4"></div>
<div class="clear"></div>
</div>
</div>