How can i center a jumbotron in the center of my page?
I already tried col-lg-6 with float-lg-center.
.jumbotron {
min-width: 585px;
margin: 10px auto;
display: flex;
justify-content: center;
margin: 10px 10px 10px 10px;
border: 0.08em solid black;
}
h1 {
font-size: 6em;
color: #484949;
}
#socDesc {
color: black;
}
body {
min-width: 520px;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="col-lg-8 col-md-10 col-sm-12 col-xs-12 offset-lg-2 offset-md-1 float-md-center">
<div class="jumbotron">
<div class="container">
<div class="container-fluid">
<div class="column">
<h1 class="text-center">Society</h1>
<hr />
<h4 class="text-center">"That's one small step for a man, one giant leap for mankind" - Neil Armstrong</h4>
<hr />
<div class="figure">
<div class="row">
<div class="col-lg-6 col-md-5 col-sm-4 col-xs-3">
<img id="" class="figure-img img-fluid rounded" src='http://4.bp.blogspot.com/-1tvR6wEiwiI/VYJSH4pfrsI/AAAAAAAABa8/RoQtTAtnD6Q/s1600/PBS.jpg' />
</div>
<div class="col-lg-6 col-md-5 col-sm-4 col-xs-3">
<img id="" class="figure-img img-fluid rounded" src='http://www.extremetech.com/wp-content/uploads/2013/04/lhc17.jpg' />
</div>
</div>
<!-- row-->
<figcaption class="figure-caption">This is the Large Ha</figcaption>
<hr />
</div>
<!-- figure -->
</div>
<!-- column -->
</div>
</div>
</div>
</div>
View on Codepen
Add text-center in the class
<div class="jumbotron text-center">
Try <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 offset-3 float-md-center"> That worked for me, but offset-xs-3 may be more proper due to the following:
It wasn't working in codepen for some reason but if you want the same amount of columns on all screen sizes you can use only col-xs-6 and it will apply that to all larger screen sizes.
Related
I started to learn Bootstrap since few days, and I am facing a problem about horizontal alignment.
In my exemple below, I want to distribute equitably the three divs "first", "second" and "third" on the screen, but it doesn't work.
<div class="container">
<div class="row justify-content-between">
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="first"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="second"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="third"></div>
</div>
</div>
</div>
Nevertheless, "justify-content-between" doesn't change anything...
Does anyone could help me?
If your using boostrap 4.1.1
https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css
.row is used
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
so you can just use,
<div class="container">
<div class="row ">
<div class="col-12 col-md-4 first">
<div class="text-center">
first 1
</div>
</div>
<div class="col-12 col-md-4 second">
<div class="text-center">second<br>second</div>
</div>
<div class="col-12 col-md-4 third">
<div class="text-center">third<br>third<br>third</div>
</div>
</div>
</div>
Further follow https://getbootstrap.com/docs/4.1/layout/grid/
Use only the col class instead of all the other col-* classes for the three columns.
.first,
.second,
.third {
height: 500px;
border: 1px solid red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col">
<div class="first"></div>
</div>
<div class="col">
<div class="second"></div>
</div>
<div class="col">
<div class="third"></div>
</div>
</div>
</div>
You should not use fixed height. I have used just to show that the divs are aligned at the center.
Visit this link for more info
Update
If the content of the columns are img as you have commented that they are, then you should do this:
Use only col-12 and col-md-4. col-12 covers col-sm-12. And col-md-4 covers col-lg-4 also.
For the images, use img-fluid, d-block, and mx-auto classes.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-12 col-md-4 ">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Ward_Cunningham_-_Commons-1.jpg" alt="" class="img-fluid d-block mx-auto">
</div>
<div class="col-12 col-md-4 ">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/42/HNL_Wiki_Wiki_Bus.jpg" alt="" class="img-fluid d-block mx-auto">
</div>
<div class="col-12 col-md-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/9/96/History_Comparison_Example_%28Vector%29.png" class="img-fluid d-block mx-auto" alt="">
</div>
</div>
</div>
Check this pen
Update
In order to add space on the left and right side of the images, use px-5 for the columns.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-12 col-md-4 px-5">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Ward_Cunningham_-_Commons-1.jpg" alt="" class="img-fluid d-block mx-auto">
</div>
<div class="col-12 col-md-4 px-5">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/42/HNL_Wiki_Wiki_Bus.jpg" alt="" class="img-fluid d-block mx-auto">
</div>
<div class="col-12 col-md-4 px-5">
<img src="https://upload.wikimedia.org/wikipedia/commons/9/96/History_Comparison_Example_%28Vector%29.png" class="img-fluid d-block mx-auto" alt="">
</div>
</div>
</div>
Check this pen
if you still need more space, use custom css.
.px-10 {
padding-left: 120px;
padding-right: 120px;
}
what i understood from that image that you sent that mean you already defined width and height for those divs and if you want to center those divs into the col you have to use margin:auto
PLEASE open the snippet in a full page mode to see it clearly
i just make a snippet to show you 2 cases the first case if you dont use fixed width it will take the col width as you define it here col-12 col-sm-12 col-md-4 col-lg-4" but once you use fixed width then you have to center the div with margin:auto
.row {
background-color: #eee;
}
.first {
height: 100px;
/* width: 100px; */
background-color: red;
}
.second {
height: 100px;
/* width: 100px; */
background-color: blue;
}
.third {
height: 100px;
/* width: 100px; */
background-color: green;
}
.first2 {
height: 100px;
width: 100px;
background-color: red;
margin: auto;
}
.second2 {
height: 100px;
width: 100px;
background-color: blue;
margin: auto;
}
.third2 {
height: 100px;
width: 100px;
background-color: green;
margin: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row justify-content-between">
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="first"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="second"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="third"></div>
</div>
</div>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="first2"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="second2"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="third2"></div>
</div>
</div>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="first3"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="second3"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="third3"></div>
</div>
</div>
</div>
I´m trying to acchive this image gallery using bootstrap grid layout:
but I can´t overflow the last image on the second row into the first row...
Here is my html code:
.gal-container {
display: block;
width: 100%;
padding: 16px;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.box {
padding: 32px;
}
.row img {
max-width: 100%;
max-height: 100%;
}
<section>
<div class="gal-container">
<div class="box">
<div class="row">
<div class="col-sm-6 nopadding"><img src="img/image1.jpg"></div>
<div class="col-sm-3 nopadding"><img src="img/image2.jpg"></div>
<div class="col-sm-3 nopadding"><img src="img/image3.jpg"></div>
</div>
<div class="row">
<div class="col-sm-3 nopadding"><img src="img/image4.jpg"></div>
<div class="col-sm-3 nopadding"><img src="img/image5.jpg"></div>
<div class="col-sm-6 nopadding"><img src="img/image6.jpg"></div>
</div>
</div>
</div>
</section>
The result of this code is this:
I would appreciate the help to put the Stranger Things image at the bottom of the two small pictures :)
There's absolutely no custom css needed for this and the job can be done with less code using native Bootstrap 4 classes alone:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<section class="container">
<div class="row no-gutters">
<div class="col-sm-6">
<div class="row no-gutters">
<div class="col-12"><img src="img/image1.jpg"></div>
<div class="col-sm-6"><img src="img/image2.jpg"></div>
<div class="col-sm-6"><img src="img/image3.jpg"></div>
</div>
</div>
<div class="col-sm-6">
<div class="row no-gutters">
<div class="col-sm-6"><img src="img/image4.jpg"></div>
<div class="col-sm-6"><img src="img/image5.jpg"></div>
<div class="col"><img src="img/image6.jpg"></div>
</div>
</div>
</div>
</section>
Your markup is not matching as per your desired layout.It should be something like this :
<div class="box">
<div class="row">
<div class="col-sm-6 nopadding">
<div class="col-sm-12 nopadding">
<img src="img/image1.jpg">
</div>
<div class="row">
<div class="col-sm-6 nopadding">
<img src="img/image2.jpg">
</div>
<div class="col-sm-6 nopadding">
<img src="img/image3.jpg">
</div>
</div>
</div>
<div class="col-sm-6 nopadding">
<div class="col-sm-12 nopadding">
<img src="img/image4.jpg">
</div>
<div class="row">
<div class="col-sm-6 nopadding">
<img src="img/image5.jpg">
</div>
<div class="col-sm-6 nopadding">
<img src="img/image6.jpg">
</div>
</div>
</div>
</div>
</div>
Also add overflow:hidden in nopadding.
Hope it helps !
If you just swap around positioning and the wrappers, you should be able to get your desired effect
Also, you will have to take into account the paddings and widths you need as they will affect the positioning of the elements.
Demo works in full screen due to size
.gal-container {
display: block;
width: 600px;
padding: 16px;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.box {
padding: 30px;
}
.row img {
max-width: 100%;
max-height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="gal-container">
<div class="row">
<div class="col-sm-6 nopadding">
<div class="col-sm-12 nopadding"> <img src="http://via.placeholder.com/300x150"> </div>
<div class="col-sm-6 nopadding"> <img src="http://via.placeholder.com/150x100"> </div>
<div class="col-sm-6 nopadding"> <img src="http://via.placeholder.com/150x100"> </div>
</div>
<div class="col-sm-6 nopadding">
<div class="col-sm-6 nopadding"> <img src="http://via.placeholder.com/150x100"> </div>
<div class="col-sm-6 nopadding"> <img src="http://via.placeholder.com/150x100"> </div>
<div class="col-sm-12 nopadding"> <img src="http://via.placeholder.com/300x150"></div>
</div>
</div>
</div>
HTML CODE:
<div class="container-fluid">
<header class="header-area row">
<div class="container-fluid">
<div class="logo-area row">
<div class="col-xs-7 col-xs-offset-5 col-sm-7 col-sm-offset-5">
<img class="img-responsive" src="images/logo.png" alt="V" />
</div>
</div>
</div>
<div class="container-fluid">
<div class="heading row">
<div class="col-xs-10 col-xs-offset-2 col-sm-9 col-sm-offset-3 col-md-7 col-md-offset-5">
<h1>I love design </h1>
</div>
</div>
</div>
</header>
</div>
CSS CODE:
.header-area .logo-area img {
width: 90px;
height: auto;
margin: 52px 0 120px;
}
.img-responsive {
margin: 0 auto;
}
I tried in many ways but i failed.The solution should be done using bootstrap.Please help me.
here is a solution, just add css display:inline-block and put all your tag between this html thg <center > </center>
here is modified code
.inline{
display: inline-block;
margin-right: auto;
margin-left: auto;
}
.header-area .logo-area img {
width: 90px;
height: auto;
margin: 52px 0 120px;
}
.img-responsive {
margin: 0 auto;
}
<center>
<div class="container-fluid">
<header class="header-area row">
<div class="container-fluid inline">
<div class="logo-area row">
<div class="col-xs-7 col-xs-offset-5 col-sm-7 col-sm-offset-5">
<img class="img-responsive" src="images/logo.png" alt="V" />
</div>
</div>
</div>
<div class="container-fluid inline">
<div class="heading row">
<div class="col-xs-10 col-xs-offset-2 col-sm-9 col-sm-offset-3 col-md-7 col-md-offset-5">
<h1>I love design </h1>
</div>
</div>
</div>
</header>
</div>
</center>`
good luck..
try adding 1 more class text-center to conrainer-fluid and remove any margins you applied in your css
<div class="container-fluid text-center">
<header class="header-area row">
<div class="container-fluid">
<div class="logo-area row">
<div class="col-xs-7 col-xs-offset-5 col-sm-7 col-sm-offset-5">
<img class="img-responsive" src="images/logo.png" alt="V" />
</div>
</div>
</div>
<div class="container-fluid text-center">
<div class="heading row">
<div class="col-xs-10 col-xs-offset-2 col-sm-9 col-sm-offset-3 col-md-7 col-md-offset-5">
<h1>I love design </h1>
</div>
</div>
</div>
</header>
</div>
Add this style in you CSS file:
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
And also add apply this class on your image:
<img class="img-responsive" src="images/logo.png" class=".center-block" alt="V" />
Demo
I want to create equal padding with all div under the .slideshow div. The problem is the last div right padding.
Now looks like this:
I want this, just with equal padding / space between divs and equal img heights:
The code:
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="product-container">
<div class="slideshow">
<p>Test message, Test message</p>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
</div>
</div>
</div>
</div>
CSS:
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
.product-container{
padding: 0px 9%;
}
.slideshow{
background-color: #efeff1;
border: 1px solid #c5c5c7;
overflow: hidden;
}
.product-container img{
width:100%;
}
.col-lg-3{
padding-right:12px;
padding-left:0px;
}
Fiddle:
Fiddle
Just wrap all your image containing divs in additional .row:
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
</div>
And remove unnecessary styling:
.col-lg-3{
padding-right:12px;
padding-left:0px;
}
Also, you don't need to repeat responsive classes for all devices:
<div class="col-sm-3 col-md-3 col-lg-3"></div>
Can be written:
<div class="col-sm-3"></div>
Updated fiddle
Is this what you're trying to acheive?
.product-container {
padding: 0 2px 6px 2px;
overflow: hidden;
}
.slideshow {
background-color: #efeff1;
border: 1px solid #c5c5c7;
padding-left: 20px;
}
.product-container img {
width: 100%;
}
.product-container .pads {
padding: 0px 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="col-lg-12">
<div class="product-container">
<div class="row">
<div class="slideshow">
<p>Test message, Test message</p>
</div>
<div class="col-sm-3 col-md-3 col-lg-3 pads">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3 pads">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3 pads">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3 pads">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
</div>
</div>
</div>
</div>
I used the last-child selector. "Bla" is a class I added to the divs in question
.bla:last-child{
padding-right:0px ;
}
Had some issues with the height but used display: flex; to deal with that.
This wont work well in older browsers
http://jsfiddle.net/52VtD/12065/
If the right padding is removed it will have the result you are looking for.
http://jsfiddle.net/0rm0h547/light/
http://jsfiddle.net/0rm0h547/show/
css
.continuous {
padding-right: 0px;
}
html
..
<div class="col-sm-3 col-md-3 col-lg-3 continuous">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
..
Add an extra css class that removes padding-right.
You can give padding-right:0px; and you will get wat you want.
http://jsfiddle.net/52VtD/12070/
.col-lg-3{
padding-right:0px;
padding-left:0px;
}
Try:
remove
.col-lg-3{
padding-left:12px;
padding-right:0px;
}
add
.product-container .col-lg-3
{
padding-left:0px;
padding-right:0px;
}
I'm trying to make a grid layout with images inside, The images aren't always the same size, Some of them seem to make the layout of the grid slightly smaller and i can't figure out a way to get them all the same size.
Here's the HTML.
<div class="col-xs-12">
<div class="row">
<h2>Handheld Consoles</h2>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
<a href="#">
<div class="tile purple text-center">
<h3 class="title">Nintendo 3DS</h3>
<div class="col-xs-12"><img class="img-responsive" style="max-height:128px; max-width:128px" src="../images/3ds.png" /></div>
</div>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
<a href="#">
<div class="tile red text-center">
<h3 class="title">Nintendo GBA</h3>
<div class="col-xs-12"><img class="img-responsive" style="max-height:128px; max-width:128px" src="../images/gba.png" /></div>
</div>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
<a href="#">
<div class="tile orange text-center">
<h3 class="title">Nintendo 64</h3>
<div class="col-xs-12"><img class="img-responsive" style="max-height:128px; max-width:128px" src="../images/n64.png" /></div>
</div>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
<a href="#">
<div class="tile green text-center">
<h3 class="title">Sony PSP</h3>
<div class="col-xs-12"><img class="img-responsive" style="max-height:128px; max-width:128px" src="../images/psp.png" /></div>
</div>
</a>
</div>
</div>
</div>
And the CSS.
.tile {
width:100%;
display: inline-block;
box-sizing: border-box;
background: #fff;
padding: 15px;
margin-bottom: 20px;
color:#fff;
}
.title {
margin-top: 0px;
text-align:center;
}
.purple {
background: #5133AB;
}
.purple:hover {
background: #3e2784;
}
i believe if you just set the height of class .tile, it should work
.tile {
width:100%;
display: inline-block;
box-sizing: border-box;
background: #fff;
padding: 15px;
margin-bottom: 20px;
color:#fff;
height: 200px; // or whatever height you want all the tiles to be
}