I am creating a selection link that has 10 containers. And what I want is to divide them into 5 equal columns. Now my problem is I want to expand the width of the columns. Means I dont have a container class in my parent row.
Here's my sample code:
<div id="categories-selections">
<div class="col-md-2 no-padding">
<img src="public/images/cat1.png" class="img-responsive" />
</div>
<div class="col-md-2 no-padding">
<img src="public/images/cat2.png" class="img-responsive" />
</div>
<div class="col-md-2 no-padding">
<img src="public/images/cat3.png" class="img-responsive" />
</div>
<div class="col-md-2 no-padding">
<img src="public/images/cat4.png" class="img-responsive" />
</div>
<div class="col-md-2 no-padding">
<img src="public/images/cat5.png" class="img-responsive" />
</div>
<div class="col-md-2 no-padding">
<img src="public/images/cat6.png" class="img-responsive" />
</div>
<div class="col-md-2 no-padding">
<img src="public/images/cat7.png" class="img-responsive" />
</div>
<div class="col-md-2 no-padding">
<img src="public/images/cat8.png" class="img-responsive" />
</div>
<div class="col-md-2 no-padding">
<img src="public/images/cat9.png" class="img-responsive" />
</div>
<div class="col-md-2 no-padding">
<img src="public/images/cat10.png" class="img-responsive" />
</div>
</div>
Here's what should be the output:
And here's what I have:
That's all guys I hope you can help me.
Here's the sample fiddle:
https://jsfiddle.net/mk7bdyey/
You could just create a whole new column all together
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
}
Next you need to define width of new classes in case of different media queries.
.col-xs-15 {
width: 20%;
float: left;
}
#media (min-width: 768px) {
.col-sm-15 {
width: 20%;
float: left;
}
}
#media (min-width: 992px) {
.col-md-15 {
width: 20%;
float: left;
}
}
#media (min-width: 1200px) {
.col-lg-15 {
width: 20%;
float: left;
}
}
then you can just use like this
<div class="row">
<div class="col-md-15 col-sm-3">
...
</div>
</div>
Adjust the padding from left and right as per your requirement to the div in which you have given id="categories-selections". you can put in-line css like style="padding-left:30px; padding-right:30px;"
Related
Need to align four different height (beetween 160-180px) svg images with text under them.
Images should be placed in line at sight and I don't know how to make strict align short text under them in one line like on screenshot.
Thanks!
UPD: Sorry for inconvinient information, thought that this question is quite typical for those who know css good.
Here is my html and css. Also I'm using bootstrap rows.
<div class="did-you-know">
<div class="row items">
<div class="col-lg-3 col-xs-6">
<div class="icon">
<img src="/img/mswa/inline-wa.svg"/>
</div>
<div class="title text-poppins">
<p>We’re from WA</p>
<p>{like you!}</p>
</div>
</div>
<div class="col-lg-3 col-xs-6">
<div class="icon">
<img src="/img/mswa/inline-packaging.svg"/>
</div>
<div class="title text-poppins">
<p>We use minimal packaging</p>
<p>{great for the planet}</p></div>
</div>
<div class="col-lg-3 col-xs-6">
<div class="icon">
<img src="/img/mswa/inline-quality.svg"/>
</div>
<div class="title text-poppins">
<p>We only choose quality</p>
<p>{better for your health}</p></div>
</div>
<div class="col-lg-3 col-xs-6">
<div class="icon">
<img src="/img/mswa/inline-community.svg"/>
</div>
<div class="title text-poppins">
<p>We love giving back</p>
<p>{great for our community}</p></div>
</div>
</div>
</div>
.did-you-know {
padding: 20px;
text-align: center;
}
.did-you-know .items .icon {
padding: 50px;
}
.did-you-know .items .title {
font-size: 20px;
}
here is a solution:
Replace images by your images.
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 25%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<img src="https://freesvg.org/img/cartoonsun.png" alt="Snow" style="width:100%">
<p style='text-align: center;'>test1</p>
</div>
<div class="column">
<img src="https://freesvg.org/img/cartoonsun.png" alt="Forest" style="width:100%">
<p style='text-align: center;'>test2</p>
</div>
<div class="column">
<img src="https://freesvg.org/img/cartoonsun.png" alt="Mountains" style="width:100%">
<p style='text-align: center;'>test3</p>
</div>
<div class="column">
<img src="https://freesvg.org/img/cartoonsun.png" alt="Mountains" style="width:100%">
<p style='text-align: center;'>test3</p>
</div>
</div>
</body>
</html>
So I´m having trouble fitting 3 images in the same row ,
The thing is, that this images are not always the same so when I upload an image that its has a diferrent size everything moves., Any advise to achieve this ? thanks
HTML:
<div class="first-slot">
<div class="masonry-box post-media">
<img src="upload/'.$row['fotos'].'" alt="" class="img-fluid">
<div class="shadoweffect">
<div class="shadow-desc">
<div class="blog-meta">
<span class="bg-orange">'.$row['categoria'].'</span>
<h4>'.$row['titulo'].'</h4>
<small>'.$row['fecha'].'</small>
<small>'.$row['autor'].'</small>
</div>
</div>
</div>
</div>
</div>
CSS:
.first-slot {
float: left;
width: 65%;
height: 35%;
}
.last-slot,
.second-slot {
float: left;
width: 35%;
height: 28%;
}
Bootstrap
.img-fluid {
max-width: 100%;
height: auto;
}
I think this will solve your problem. You can use these class names and css in you code. Change image src locations according to your requirements. And change margin attribute in css according to your need.
PS: dnt forget to include bootstrap link in your project file
.imgItem{
display: inline-block;
margin: 10px;
}
.imgContainer{
display: flex;
}
<div class="row">
<div class="col imgContainer" >
<div class="col imgItem">
<img src="http://placehold.it/150x100" class="img-responsive
" alt="Responsive image" />
</div>
<div class="col imgItem">
<img src="http://placehold.it/150x100" class="img-responsive
" alt="Responsive image" />
</div>
<div class="col imgItem">
<img src="http://placehold.it/150x100" class="img-responsive
" alt="Responsive image" />
</div>
</div>
</div>
please help me with this https://jsfiddle.net/duonglam271/spdqL73a/
I could not position the tree and those fished
.coral {
float: left;
padding-top: 2%;
}
.coral img {
width: 80%;
}
.col-9 {
width: 73%;
display: inline-block;
}
.col-3 {
width: 23%;
display: inline-block;
position: relative;
}
.col-2 {
width: 16.66%;
display: inline-block;
}
.skill-header {
padding-top: 2%;
text-align: center;
font-size: 100%;
}
.skill-level {
padding-left: 1%;
font-size: 100%;
}
.crab {
width: 70%;
margin-top: 20%;
}
<div class="container div-5">
<div class="row">
<div class="col-3 coral">
<img src='https://i.imgur.com/y7ciVbe.png' />
</div>
<div class="col-9">
<div class="col-12 skill-header">
<h1>Skills</h1>
</div>
<div class="col-12 skill-level">
<div class="col-2 ">
<h2>Beginner</h2>
</div>
<div class="col-2 ">
<h2>Familiar</h2>
</div>
<div class="col-2 ">
<h2>Intermediate</h2>
</div>
<div class="col-2 ">
<h2>Professional</h2>
</div>
</div>
<div class="col-2 ">
<img class="crab" src='https://i.imgur.com/UghhNt0.png' />
</div>
<div class="col-2 ">
<img class="crab" src='https://i.imgur.com/UghhNt0.png' />
</div>
<div class="col-2 ">
<img class="crab" src='https://i.imgur.com/UghhNt0.png' />
</div>
</div>
</div>
</div>
Example
I have a look and this issue you are using the wrong measurement of grid system as it's work well with 12 grids
for 4 columns as it needs to be divided to col-3 each as 12 in total. you are using col-2 which is total in 8 which left col-4 in space and cause layout issue unless you need to put Horizontal alignment.
so I suggest you have look at grid layout and it will help you much understand
suggest code that I wrote and working on my side
<div class="col-12 skill-level">
<div class="col-3">
<h2>Beginner</h2>
</div>
<div class="col-3 ">
<h2>Familiar</h2>
</div>
<div class="col-3 ">
<h2>Intermediate</h2>
</div>
<div class="col-3 ">
<h2>Professional</h2>
</div>
</div>
Please have a look at https://v4-alpha.getbootstrap.com/layout/grid/
Have a fun with code
You can use media queries for it. I added custom font-size to h2.
h2 {
font-size:16px;
}
.coral {
float: left;
padding-top: 2%;
}
.coral img {
width: 80%;
}
.col-9 {
width: 73%;
display: inline-block;
}
.col-3 {
width: 23%;
display: inline-block;
position: relative;
}
.col-2 {
width: 16.66%;
display: inline-block;
}
.skill-header {
padding-top: 2%;
text-align: center;
font-size: 100%;
}
.skill-level {
padding-left: 1%;
font-size: 100%;
}
.crab {
width: 70%;
margin-top: 20%;
}
#media only screen and (max-width: 768px){
h2 {
font-size:11px;
}
}
#media only screen and (max-width: 768px){
h2 {
font-size:9
}
}
<div class="container div-5">
<div class="row">
<div class="col-3 coral">
<img src='https://i.imgur.com/y7ciVbe.png' />
</div>
<div class="col-9">
<div class="col-12 skill-header">
<h1>Skills</h1>
</div>
<div class="col-12 skill-level">
<div class="col-2 ">
<h2>Beginner</h2>
</div>
<div class="col-2 ">
<h2>Familiar</h2>
</div>
<div class="col-2 ">
<h2>Intermediate</h2>
</div>
<div class="col-2 ">
<h2>Professional</h2>
</div>
</div>
<div class="col-2 ">
<img class="crab" src='https://i.imgur.com/UghhNt0.png' />
</div>
<div class="col-2 ">
<img class="crab" src='https://i.imgur.com/UghhNt0.png' />
</div>
<div class="col-2 ">
<img class="crab" src='https://i.imgur.com/UghhNt0.png' />
</div>
</div>
</div>
</div>
I have a row of images with title and descriptions, that when the window is downsized to 991px or fewer in width, the list should be vertical, with the title and description to the right of the image, not below it.
<div class="row">
<div class="col-md-2">
<img src="http://placehold.it/150x150">
<h5 class="story-title">Title of the store goes here</h5>
<h6>Description</h6>
</div>
<div class="col-md-2">
<img src="http://placehold.it/150x150">
<h5 class="story-title">Title of the store goes here</h5>
<h6>Description</h6>
</div>
<div class="col-md-2">
<img src="http://placehold.it/150x150">
<h5 class="story-title">Title of the store goes here</h5>
<h6>Description</h6>
</div>
<div class="col-md-2">
<img src="http://placehold.it/150x150">
<h5 class="story-title">Title of the store goes here</h5>
<h6>Description</h6>
</div>
<div class="col-md-2">
<img src="http://placehold.it/150x150">
<h5 class="story-title">Title of the store goes here</h5>
<h6>Description</h6>
</div>
<div class="col-md-2">
<img src="http://placehold.it/150x150">
<h5 class="story-title">Title of the store goes here</h5>
<h6>Description</h6>
</div>
#media (max-width: 991px), (max-height: 460px) {
.col-md-2:hover {
background-color: transparent;
}
.col-md-2 {
display: inline-block;
float: left;
}
}
JSFIDDLE
JSFiddle
You're targeting the wrong elements. Your container doesn't need to be pushed to display: inline-block or floated. The elements within it do:
#media (max-width: 991px), (max-height: 460px) {
.col-md-2:hover{
background-color: transparent;
}
.col-md-2 img {
float: left;
}
.col-md-2 {
overflow: auto;
}
}
I know this question has been asked a lot but each one seems to be a bit unique and I have tried at least 7 different versions here on StackOverflow and none have worked.
It should be a simple fix but I can't center the div contents. I need all the rows centered to the gird and centered when scaled all the way down to the mobile view.
Here is my code example:
http://codepen.io/anon/pen/aOBJEv
Here is the html:
<div class="row-fluid">
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6"><img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/image-333x333.jpg" class="img-btm">
<div class="top"> <img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png"> </div>
<div class="topic text-center">cheese </div>
</div>
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6"><img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/Ed-Vizenor-150x150.jpg" class="img-btm">
<div class="top"> <img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png"> </div>
<div class="topic text-center">Cool Beans </div>
</div>
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6"><img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/BeauBird-150x150.png" class="img-btm">
<div class="top"> <img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png"> </div>
<div class="topic text-center">I am happy </div>
</div>
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6"><img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/ave4-150x150.jpg" class="img-btm">
<div class="top"> <img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png"> </div>
<div class="topic text-center">Hello world! </div>
</div>
</div>
I have added the .row-fluid{...} and div.bottom{...} code blocks to your existing CSS.
.row-fluid {
text-align: center;
}
div.bottom {
display: inline-block;
float: none;
text-align: left;
}
.top {
position: absolute;
top: -5px;
left: 0px;
}
.topic {} .bottom {
position: relative;
top: 0px;
left: 0px;
margin-bottom: 25px;
max-width: 275px;
min-width: 277px;
}
.img-btm {
height: 233px;
width: 228px;
-webkit-border-radius: 233px;
-moz-border-radius: 233px;
border-radius: 233px;
}
.bottom .text-center {
max-width: 275px;
min-width: 277px;
position: absolute;
left: -10px;
top: 18px;
font-size: 18px;
color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="row-fluid">
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6">
<img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/image-333x333.jpg" class="img-btm">
<div class="top">
<img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png">
</div>
<div class="topic text-center">cheese</div>
</div>
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6">
<img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/Ed-Vizenor-150x150.jpg" class="img-btm">
<div class="top">
<img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png">
</div>
<div class="topic text-center">Cool Beans</div>
</div>
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6">
<img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/BeauBird-150x150.png" class="img-btm">
<div class="top">
<img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png">
</div>
<div class="topic text-center">I am happy</div>
</div>
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6">
<img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/ave4-150x150.jpg" class="img-btm">
<div class="top">
<img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png">
</div>
<div class="topic text-center">Hello world!</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
source: Bootstrap 3 responsive centered columns
Source has no explanation for the code, so
The class .row-fluid has a text-align:center property which makes its contents centered.
Under div.bottom I have the display:inline-block property which is necessary for its parents text-align property to work; float:none overrides the default float:left and text-align:left is a fix for center positioning the image inside the column div, because there was some padding to the element.