I am trying to implement a slideshow with swiperjs with slidesPerView: 'auto' option with the following layout:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide py-3">
<div class="swiper-zoom-container">
<img src="...">
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination-wrapper">
<div class="swiper-pagination"></div>
</div>
</div>
the problem is that no matter how small the images' width is, the slides are always 100% wide, e.g. I need to make the orange containers here as wide as their gray children:
https://codepen.io/anon/pen/JVpBZO
I can't simply hardcode the width as I don't know it beforehand.
I tried to set display: inline-flex on .swiper-slide but it doesn't change anything.
Related
I'm trying to bottom align an img in a jumbotron, but cannot figure it out.
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-lg-8">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg">Learn more »</a></p>
</div>
<div class="col-lg-4 text-center">
<img src="http://via.placeholder.com/200x200">
</div>
</div>
</div>
</div>
I tried adding the following to the CSS
.vertical-bottom {
display: flex;
align-items: bottom;
}
And then added the additional class to the DIV containing the img
<div class="col-lg-4 text-center vertical-bottom">
This didn't work, why is it so hard to vertically align things in bootstrap?
Here a kind of code:
Bootply
Css:
The media query is set to 1200 because I see you're using col-lg-xx
#media screen and (min-width:1200px) {
.flex_container img{
object-fit: contain;
object-position: 100% 100%;
}
.flex_container {
display: flex;
}
}
Html:
<div class="jumbotron">
<div class="container">
<div class="row flex_container">
<div class="col-lg-8">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg">Learn more »</a></p>
</div>
<div class="col-lg-4 text-center flex_container">
<img src="http://via.placeholder.com/200x200" style="">
</div>
</div>
</div>
</div>
I have a row of thumbnails like this:
I want them to be equal height though. This is my code:
<div class="row text-center">
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<div class="caption">
<h3>HOTKEY + COMBO</h3>
<p>Hotkey description goes here. Category only shown in explore.</p>
<p>
<a href="#" class="btn btn-default" data-tooltip="Change Hotkey">
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<div class="caption">
<h3>HOTKEY + COMBO</h3>
<p>short desc</p>
<p>
<a href="#" class="btn btn-default" data-tooltip="Change Hotkey">
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 hotkey-add">
<div class="thumbnail">
<div class="caption">
<p></p>
<p><span class="glyphicon glyphicon-plus"></span></p>
</div>
</div>
</div>
</div>
Is this possible? Like we see in bootstrap4 here is equal height cards:
http://www.codeply.com/render/KrUO8QpyXP#
I know I'm a little late on this, but I think the best way is flexbox. Here's how it would work in Bootstrap 3:
.row.display-flex {
display: flex;
flex-wrap: wrap;
}
.thumbnail {
height: 100%;
}
Just add display-flex to the containing row. Also, the upcoming Bootstrap 4 has flexbox as the default so this extra CSS won't be necessary in the future.
Thumbnails with flexbox
You can also do more with the position of child elements.
Also see,
make Bootstrap columns all the same height
It seems that bootstrap 4, like you show in the example, is using to get the same height, display: table for the container div and display: table-cell for the inner ones.
Other solution can be using <table> instead <div>, using flex property...
Checkout this How can I make Bootstrap columns all the same height?
I'm trying to build a profile card in Bootstrap 3 and I'm having trouble getting the image to fit into the card. I think I can do this easier if I link to image in the css but I have many profile cards with all different people so I think keeping the image link in the HTML is better in this case.
Here's how I'd like it:
and here's the where I'm at:http://jsfiddle.net/L3789n7u/1/
Any help is greatly appreciated. Thanks!
~Tony
<div class="container">
<div class="row">
<div class="people-cards">
<div class="col-md-6">
<div class="well">
<div class="profile-image">
<img src="https://higherlogicdownload.s3.amazonaws.com/MBGH/4f7f512a-e946-4060-9575-b27c65545cb8/UploadedImages/Board%20Photos/SIZE%20150x190/PAMELA%20HANNON%202015.jpg">
<div class="card-info">
<h3 div class="company">Company Name</h3>
<h4 div class="name">Person Name</h4>
<h5 div class="title">Job Title</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
As ever you have multiple options, here is example of one of them.
<div class="container">
<div class="row">
<div class="people-cards">
<div class="col-md-6" style="border: 1px solid black;">
<div class="row">
<div class="profile-image" style="float:left;">
<img src="https://higherlogicdownload.s3.amazonaws.com/MBGH/4f7f512a-e946-4060-9575-b27c65545cb8/UploadedImages/Board%20Photos/SIZE%20150x190/PAMELA%20HANNON%202015.jpg" />
</div>
<div class="profile-info">
<h3 div class="company">Company Name</h3>
<h4 div class="name">Person Name</h4>
<h5 div class="title">Job Title</h5>
</div>
<div class="profile-link">
VIEW PROFILE
</div>
</div>
</div>
</div>
</div>
</div>
Basically you need to make profile image to float left, so other content will appear next to it. Also because your example how you would like it contains border around card you need to wrap image, info and link in row. If you want to customize image size you can still use all Bootstrap's col-size-number.
Working example on JSFiddle
I am trying to achieve full background width, using skeleton framework. For now, bad luck.
Here's how it looks now : http://shrani.si/f/3A/Uy/28somHnh/capture.png
Thanks everyone for helping me.
<div class="container">
<div id="portfolio-color">
<div class="sixteen columns">
<div id="color">
<div class="five columns offset-by-four">LATEST WORK
</div>
</div>
</div>
</div>
</div>
You can do so by putting .container onto a full width wrapping element. Something like this:
See dabblet here http://dabblet.com/gist/6476534
<style>
#import url(import.skeleton.before.css)
.wrapper {width: 100%;}
.color-one {background-color: red;}
.color-two {background-color: green;}
</stlye>
<div class="wrapper color-one">
<div class="container">
<div class="sixteen columns"></div>
</div>
</div>
<div class="wrapper color-two">
<div class="container">
<div class="five columns offset-by-four"></div>
<div class="eleven columns"></div>
</div>
</div>
Hello I am having little problem with responsive design. I don't know how to add image on the left and text on the right.
I am working with Skeleton.
What should I do ?
Update: Some Code
<section id="about">
<div class="container">
<div class="container">
<div class="one_half ">
<img class="picture-me" src="images/me.png" alt="">
<!-- PICTURE SHOULD BE ON THE LEFT -->
</div>
</div>
<div class="one_half last">
<h2 class="name"> Borut</h2>
<p>I am pixel-perfect...</p>
<img class="shadow" src="images/shadow.png" alt="" width="537" height="1">
<img class="quote-right" src="images/quote-right.png" alt="" width="29" height="21">
<img class="quote-left" src="images/quote-left.png" alt="" width="29" height="21">
Look at the Skeleton Grid layout system
You have to declare the layout within a div of class container. Then add divs with the number of columns you'd like the to consume as classes. To place columns side by side, use classes alpha and omega.
<div class="container">
<div class="twelve columns clearfix">
<div class="six columns alpha">first block</div>
<div class="six columns omega">second block</div>
</div>
</div>
I added the following css to clarify the blocks
.alpha {
background-color: red;
}
.omega {
background-color: green;
}
This will render as follows:
See this fiddle to play around with the code a little