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
Related
I am trying to center all columns in a row Horizontally center in bootstrap 4.
the first row is correctly aligned center, but the 2nd row columns, not working properly, although I used same class for it.
my code as below
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
.bg{
background: url('bg.jpg') center / cover no-repeat;
height: 600px;
}
.row1{
padding-top: 200px;
}
.row2{
padding-top: 100px;
}
img{
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
border-radius: 6px;
}
.img1{
height: 164px;
}
.img2{
height: 258px;
width: 238px;
}
</style>
</head>
<body>
<div class="container-fluid bg">
<div class="row justify-content-center row1">
<img src="img1.jpg" class="img1" alt="Italian Trulli">
</div>
<div class="row justify-content-center row2">
<div class="col col-lg-2">
<img src="img1.jpg" class="img2" alt="Italian Trulli">
</div>
<div class="col col-lg-2">
<img src="img1.jpg" class="img2" alt="Italian Trulli">
</div>
<div class="col col-lg-2">
<img src="factory.jpg" class="img2" alt="Italian Trulli">
</div>
</div>
</div>
</body>
</html>
The result as below (2nd row is not correctly aligned)
cols are centered horizontally. It's just that the image sizes you set in your css do not cover the entire width of the col. So, ' visually' it appears that they are not centered. Remember, with the code you shared you are centering horizontally the col divs, not the images
See example below
As you can see the cols ( red border ) are centered horizontally inside the row ( blue border ), but the imgs are smaller in width so they are not centered
.bg{
background: url('bg.jpg') center / cover no-repeat;
height: 600px;
}
.col {
overflow: hidden;
}
.row {
border:1px solid blue
}
img{
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
border-radius: 6px;
}
.img1{
height: 164px;
}
.img2{
height:50px;
width: 50px;
}
.col {
border:1px solid red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container-fluid bg">
<div class="row justify-content-center row2">
<div class="col col-2">
<img class="img2" src="https://via.placeholder.com/150" />
</div>
<div class="col col-2">
<img class="img2" src="https://via.placeholder.com/150" />
</div>
<div class="col col-2">
<img class="img2" src="https://via.placeholder.com/150" />
</div>
</div>
</div>
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.
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>