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>
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 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>
I have designed picture 1 in PhotoShop which is what I was planning in the HTML.
I added the float to all elements but for some reason I don't understand it starts breaking the divs (picture 2)... am I missing something obvious here?
[![enter image description here][1]][1]
<div style="width: 974px; margin: 0 auto; background-color: white; padding: 0px;border: 0px solid black;">
<div style="margin: 10px 0px 10px 0px; top: 0px; left: 0px; float: left;border: 1px solid black;">
<a href="/Main/">
<img src="http://s10.postimg.org/7qbv2a6jd/tb_logo_site3.png" width="180" height="86" />
</a>
</div>
<div style="float:right;margin-top:10px;border: 1px solid black;">
<img src="http://s10.postimg.org/h8bm2bs7t/patreon_site3.png" width="280" height="42" />
</div>
<div style="clear:both;"></div>
<div style="margin-top:35px;margin-left:60px;float: left;border: 1px solid black;">
<img src="http://s10.postimg.org/q9uqtofix/poster_1_site3.png" width="300" height="496" />
</div>
<div style="float:left;margin-top:0px;margin-left:30px;border: 1px solid black;">
<img src="http://s10.postimg.org/h9ljvqu1l/paper_soho_title_site3.png" width="400" height="114" />
</div>
<div style="float:left;margin-top:0px;margin-left:30px;border: 1px solid black;">
<img src="http://s10.postimg.org/mfwp6s8t5/fist_page_icon_site3.png" />
</div>
<div style="float:left;margin-top:0px;margin-left:30px;border: 1px solid black;">
<img src="http://s10.postimg.org/4m175hpqx/first_page_site3.png" />
</div>
<div style="float:left;margin-top:0px;margin-left:30px;border: 1px solid black;">
<img src="http://s10.postimg.org/7mi1m1121/last_page_icon_site3.png" />
</div>
<div style="float:left;margin-top:0px;margin-left:30px;border: 1px solid black;">
<img src="http://s10.postimg.org/6vpbg8yop/last_page_site3.png" />
</div>
</div>
The alignment is off because of the size of Read From First Page and Jump To Last Page images. Giving width to the images will place it to the side of left container.
Also use display:inline-block with vertical-align:middle to align the container vertically into middle.
Here is the link that explains the use of display:inline-block
http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/
Have modified your html code
<div style="width: 974px; margin: 0 auto; background-color: white; padding: 0px;border: 0px solid black;">
<div style="margin: 10px 0px 10px 0px; top: 0px; left: 0px; float: left;border: 1px solid black;">
<a href="/Main/">
<img src="http://s10.postimg.org/7qbv2a6jd/tb_logo_site3.png" width="180" height="86">
</a>
</div>
<div style="float:right;margin-top:10px;border: 1px solid black;">
<img src="http://s10.postimg.org/h8bm2bs7t/patreon_site3.png" width="280" height="42">
</div>
<div style="clear:both;"></div>
<div style="margin-top:35px;margin-left:60px;float: left;border: 1px solid black;">
<img src="http://s10.postimg.org/q9uqtofix/poster_1_site3.png" width="300" height="496">
</div>
<div style="float:left;margin-top:0px;margin-left:30px;border: 1px solid black;">
<img src="http://s10.postimg.org/h9ljvqu1l/paper_soho_title_site3.png" width="400" height="114">
</div>
<div style="margin-top:0px;margin-left:30px;border: 1px solid black;display: inline-block;vertical-align: middle;">
<img src="http://s10.postimg.org/mfwp6s8t5/fist_page_icon_site3.png">
</div>
<div style="margin-top:0px;margin-left:30px;border: 1px solid black;height: 100%;display: inline-block;">
<img src="http://s10.postimg.org/4m175hpqx/first_page_site3.png" style="
width: 230px;">
</div>
<div style="display: inline-block;margin-left:30px;border: 1px solid black;vertical-align: middle;">
<img src="http://s10.postimg.org/7mi1m1121/last_page_icon_site3.png">
</div>
<div style="display: inline-block;margin-top:0px;margin-left:30px;border: 1px solid black;">
<img src="http://s10.postimg.org/6vpbg8yop/last_page_site3.png" style="
width: 230px;">
</div>
</div>
You have way too many divs, and you gotta adjust the margins/paddings.
Take a look at This link..
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
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>