The following code using flexbox/centre bootstrap media card works correctly, apart from when viewed on a mobile sized screen, where the boxes are aligned to the left. I'd like them centred in the screen.
I looked at changing align-self-left to centre or text-align: center but it does not appear to work. I tried applying this to the article and row below. Not sure why it will not centre correctly?
CSS
.card .card-body {
padding: 15px;
text-align: center;
}
.boxFixDw {
display:inline-block; width: 285px;
color: #1576b9;
}
HTML
<div class="row flexbox-wrap">
<div class="col-lg-4 flexbox-equalise">
<article class="media card card-1">
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-12">
<div class="card-body align-self-left">
<h4 class="list-group-item-headline boxFixDw">LATEST RESOURCES</h4>
<p class="list-group-item-text">More added each week.</p>
VIEW NOW
</div>
</div>
</div>
</article>
</div>
<div class="col-lg-4 flexbox-equalise">
<article class="media card card-1">
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-12">
<div class="card-body card-body-left">
<h4 class="list-group-item-headline boxFixDw">JOIN NOW</h4>
<p class="list-group-item-text">For instant access.</p>
SIGN UP
</div>
</div>
</div>
</article>
</div>
<div class="col-lg-4 flexbox-equalise">
<article class="media card card-1">
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-12">
<div class="card-body card-body-left">
<h4 class="list-group-item-headline boxFixDw">SAMPLE RESOURCES</h4>
<p class="list-group-item-text">Check the quality.</p>
VIEW NOW
</div>
</div>
</div>
</article>
</div>
</div>
apart from when viewed on a mobile sized screen, where the boxes are
aligned to the left.
To center the cards on mobile you need to change align-items: flex-start; to align-items: center; for the .media through media query
#media only screen and (max-width: 767px) {
.media {
align-items: center !important;
}
}
.card .card-body {
padding: 15px;
text-align: center;
}
.boxFixDw {
display:inline-block; width: 285px;
color: #1576b9;
}
#media only screen and (max-width: 990px) {
.media {
align-items: center !important;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row flexbox-wrap">
<div class="col-lg-4 flexbox-equalise">
<article class="media card card-1">
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-12">
<div class="card-body align-self-left">
<h4 class="list-group-item-headline boxFixDw">LATEST RESOURCES</h4>
<p class="list-group-item-text">More added each week.</p>
VIEW NOW
</div>
</div>
</div>
</article>
</div>
<div class="col-lg-4 flexbox-equalise">
<article class="media card card-1">
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-12">
<div class="card-body card-body-left">
<h4 class="list-group-item-headline boxFixDw">JOIN NOW</h4>
<p class="list-group-item-text">For instant access.</p>
SIGN UP
</div>
</div>
</div>
</article>
</div>
<div class="col-lg-4 flexbox-equalise">
<article class="media card card-1">
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-12">
<div class="card-body card-body-left">
<h4 class="list-group-item-headline boxFixDw">SAMPLE RESOURCES</h4>
<p class="list-group-item-text">Check the quality.</p>
VIEW NOW
</div>
</div>
</div>
</article>
</div>
</div>
</div>
Related
In a section of my code I made a row-grid for a part that displays images but when I went to insert and look at the website its not displaying in a row format but in a column and im not sure why. I thought the problem came from it being col-sm-6 but i changed it to col-sm-12 and its still not displaying it. Any reasons why?
.site-main .project-area {
padding: 4rem 0;
}
.site-main .project-area .button-group button {
background: transparent;
border: none;
font: normal 500 16px/130px var(--lato);
text-transform: uppercase;
}
.site-main .project-area .button-group button+button {
padding-left: 3rem;
}
.site-main .project-area .grid .our-project>title h4 {
font: normal 700 25px/12px var(--lato);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section class="project-area">
<div class="container">
<div class="project title pb-5">
<h1 class="h1 text-uppercase title-h1"> Recent Projects</h1>
<h1 class="h1 text-uppercase title h1"> Quality Work</h1>
</div>
<div class="div button-group">
<button type="button" class="active">All</button>
<button type="button" data-filter=".cars">Cars</button>
<button type="button" data-filter=".character">Characters</button>
<button type="button">Food</button>
<button type="button">Activities</button>
</div>
<div class="row-grid">
<div class="col-lg-4 col-md-6 col-sm-6 element-item cars">
<div class="our-project">
<div class="img">
<img src="./img/portfolio/car.jpg" alt="car">
</div>
<div class="title py-4">
<h4 class="text-uppercase">minimul design</h4>
<span class="text-secondary">Latest, Popular</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 element-item character">
<div class="our-project">
<div class="img">
<img src="./img/portfolio/images.jpg" alt="car">
</div>
<div class="title py-4">
<h4 class="text-uppercase">video game character</h4>
<span class="text-secondary">popular, Portfolio</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 element-item popular">
<div class="our-project">
<div class="img">
<img src="./img/portfolio/ntfs-to-be-professional-gamer-image1.jpg" alt="car">
</div>
<div class="title py-4">
<h4 class="text-uppercase">minimul design</h4>
<span class="text-secondary">Latest, Popular</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 element-item popular">
<div class="our-project">
<div class="img">
<img src="./img/portfolio/ntfs-to-be-professional-gamer-image1.jpg" alt="car">
</div>
<div class="title py-4">
<h4 class="text-uppercase">minimul design</h4>
<span class="text-secondary">Latest, Popular</span>
</div>
</div>
</div>
</div>
</div>
</section>
Changing the class row-grid to row makes it work. I don't think Bootstrap has a class called row-grid.
If you are trying to fit all the div elements into one row, just replace the col-lg-4 col-md-6 col-sm-6 and the col-lg-4 col-md-6 col-sm-12 with col
Im wondering why do i have space between second text which is from first row and first text which is on second row? I find it annoying, why does it happen? Is there any way to fix it?
[IMG]http://i67.tinypic.com/2zhe0xg.jpg[/IMG]
This is how it looks on desktop:
[IMG]http://i65.tinypic.com/2eby5bs.png[/IMG]
HTML:
<div class="container-fluid">
<div class="row mt-5 mb-5 ml-3 mr-3">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-8">
<img class="img-fluid img-thumbnail" src="https://static-assets-prod.epicgames.com/fortnite/static/webpack/8704d4d5ffd1c315ac8e2c805a585764.jpg">
</div>
<div class="col-lg-4 col-md-4 col-sm-4text">
<div class="b">
<p>Somethin ggoes here maybe</p>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-8">
<img class="img-fluid img-thumbnail" src="https://static-assets-prod.epicgames.com/fortnite/static/webpack/8704d4d5ffd1c315ac8e2c805a585764.jpg">
</div>
<div class="col-lg-4 col-md-4 col-sm-4 text">
<div class="b">
<p>Something goes here maybe</p>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-5 mb-5 ml-3 mr-3">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-8">
<img class="img-fluid img-thumbnail" src="https://static-assets-prod.epicgames.com/fortnite/static/webpack/8704d4d5ffd1c315ac8e2c805a585764.jpg">
</div>
<div class="col-lg-4 col-md-4 col-sm-4 text">
<div class="b">
<p>Somethin ggoes here maybe</p>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-8">
<img class="img-fluid img-thumbnail" src="https://static-assets-prod.epicgames.com/fortnite/static/webpack/8704d4d5ffd1c315ac8e2c805a585764.jpg">
</div>
<div class="col-lg-4 col-md-4 col-sm-4 text">
<div class="b">
<p>Something goes here maybe</p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.row > .text > .b {
display: -webkit-box;
height: 70%;
line-height: 1.3;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
I tried multiple solutions but couldnt get it to work
There are some styles you should definitely include in future questions so we can diagnose conflicts. For future reference, include any styles for classes you have assigned.
As far as what I can tell just from your code and screenshots, though, I'd say setting margin: 0; on your 2 divs in a media query for the affected breakpoint would work, but I'd also like to add a suggestion that will be a bit less messy for you using flexbox.
/* Make your container a flexbox */
.container {
display: flex;
}
/* Give flex grow value of 1 to keep all inner containers equal size */
.article {
flex: 1;
margin: 5px;
}
/* Sizing the image */
.article>img {
max-width: 400px;
}
.article>h1 {
font-size: 12px;
}
/* You could also just set the flex-direction to column, but displaying as block at the breakpoint will achieve the layout you're looking for on mobile. 500px is a trivial guess, use inspector to find the sweet spot */
#media (max-width:500px) {
.container {
display: block;
}
}
<div class="container">
<div class="article">
<img src="https://3bonlp1aiidtbao4s10xacvn-wpengine.netdna-ssl.com/wp-content/uploads/2018/05/epic-fortnite.jpg" />
<h1>
Something here maybe.
</h1>
</div>
<div class="article">
<img src="https://3bonlp1aiidtbao4s10xacvn-wpengine.netdna-ssl.com/wp-content/uploads/2018/05/epic-fortnite.jpg" />
<h1>
Something here maybe.
</h1>
</div>
</div>
<div class="container">
<div class="article">
<img src="https://3bonlp1aiidtbao4s10xacvn-wpengine.netdna-ssl.com/wp-content/uploads/2018/05/epic-fortnite.jpg" />
<h1>
Something here maybe.
</h1>
</div>
<div class="article">
<img src="https://3bonlp1aiidtbao4s10xacvn-wpengine.netdna-ssl.com/wp-content/uploads/2018/05/epic-fortnite.jpg" />
<h1>
Something here maybe.
</h1>
</div>
</div>
You can read up a bit more on flexbox in this CSS-Tricks article as well. If you're confused on anything here, feel free to comment and I'll try and answer the best I can. I've composed a fiddle here too so you can see how it responds when resizing.
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>
i have big problem with vertical center in BS footer. My code below :
<footer class="footer navbar-fixed-bottom" style="background-color:lightgrey;">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<ul class="nav nav-pills nav-justified">
<li>SITE1</li>
<li>SITE2</li>
</ul>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center">
<div class="center-inner">
<p class="text-muted inner">Some text.</p>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center">
<p>More text.</p>
</div>
</div>
</div>
</div>
JSFiddle
Unfortunatelly, text in 2nd and 3th column isn't vertically centered. I tried solutions from similar topics, but sadly - without good effects in sticky footer (in most cases - it changed footer height and layout - after added display:table).
Below i uploaded graphic illustrating how it looks today, and how I would like it to look :
Home somebody can help me with this.
You can use this:
.center-vertical{
display: flex;
align-items: center;
}
(just apply to parent boxes)
https://jsfiddle.net/kaskull/z4wLpk9h/5/
Try this
You can set the media-query value to set the break-point.
Check working updated demo
HTML:
<footer class="footer navbar-fixed-bottom" style="background-color:lightgrey;">
<div class="container">
<div class="row row-eq-height">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<ul class="nav nav-pills nav-justified">
<li>SITE1</li>
<li>SITE2</li>
</ul>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center">
<div class="center-inner">
<p class="text-muted inner">Some text.</p>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center">
<p>More text.</p>
</div>
</div>
</div>
</footer>
CSS:
#media screen and (max-width: 767px) {
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
align-items: center;
}
}
}
footer [class*="col-"] p {
padding: 10px 15px;
margin-bottom: 0;
}
Please check this.
footer .text-muted.inner, footer p{padding:10px 15px;margin:0;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<footer class="footer navbar-fixed-bottom" style="background-color:lightgrey;">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<ul class="nav nav-pills nav-justified">
<li>SITE1</li>
<li>SITE2</li>
</ul>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center">
<div class="center-inner">
<p class="text-muted inner">Some text.</p>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center">
<p>More text.</p>
</div>
</div>
</div>
</div>
</footer>
Hope this will help you.
Thanks.
It's because your links has a padding around it, so that you should also adding padding in p tag.
.footer [class*="col-"] p {
padding: 10px 15px;
margin: 0;
}
Working Demo
Im using bootstrap. Need to place two cards of equal row-height. Each card is placed inside col-xs-6. Card contains text and buttons. When i use col-height col-xs-6 card both the card join together. Could be please help me on this.
<div class="row">
<div class="row-height">
<div class="col-height col-middle col-xs-6 card">
<div class="row">
<div class="col-xs-12 text-center">
<h3 class="heading-s1">Login</h3>
</div>
<div class="col-xs-12 text-center">
Login!
</div>
</div>
</div>
<div class="col-height col-middle col-xs-6 card">
<div class="row">
<div class="col-xs-12 text-center">
<h3 class="heading-s1">Sign UP</h3>
</div>
<div class="col-xs-12 text-center">
Sign Up!
</div>
</div>
</div>
</div>
</div>
Is that you want?
.row should be wrapped into .container
.card {
border: 1px solid black;
margin: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row-height">
<div class="row">
<div class="col-height col-middle col-xs-5 pull-left card">
<div class="col-xs-12 text-center">
<h3 class="heading-s1">Login</h3>
</div>
<div class="col-xs-12 text-center">
Login!
</div>
</div>
<div class="col-height col-middle col-xs-5 pull-right card">
<div class="col-xs-12 text-center">
<h3 class="heading-s1">Sign UP</h3>
</div>
<div class="col-xs-12 text-center">
Sign Up!
</div>
</div>
</div>
</div>
</div>