I cannot align an image to the bottom of the page. Even though, the column is the same height it just doesn't align all the way to the bottom.
Codepen: https://codepen.io/monsmado/pen/WNvmdOL
<div class="container">
<div class="row">
<div class="col-sm">
<img src="https://via.placeholder.com/557x347" class="img-fluid">
<h2>Lorum Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="d-sm-flex align-self-end">
<a href="#">
<img src="https://via.placeholder.com/31x36">
</a>
</div>
</div>
<div class="col-sm">
<img src="https://via.placeholder.com/557x347" class="img-fluid">
<h2>Lorem ipsum dolor sit amet consectetur</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="d-sm-flex align-self-end">
<a href="#">
<img src="https://via.placeholder.com/31x36">
</a>
</div>
</div>
<div class="col-sm">
<img src="https://via.placeholder.com/557x347" class="img-fluid">
<h2>Lorem ipsum dolor sit amet consectetur</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="d-sm-flex align-self-end">
<a href="#">
<img src="https://via.placeholder.com/31x36"">
</a>
</div>
</div>
</div>
</div>
You can add display: flex and flex-direction: column to the .col-sm and margin-top: auto to the div contain your bottom item:
CodePen
If you are using bootstrap 4, you can use class d-flex flex-column for .col-sm div and mt-auto for the bottom item div:
CodePen
Related
I'm trying to create a gallery for images of every shapes, that would act like the image search in duckduckgo desktop browser : the images fill each entire row.
To achieve that, duckduckgo keeps one constant height and slightly reduce the horizontal size of the images to have a perfect width. I want to do it in pure css
Here is an exemple if you search for fish images in duckduckgo : https://duckduckgo.com/?q=fish&t=newext&atb=v246-1&iar=images&iax=images&ia=images
You can see how each images keep their ratio aproximatively, but are modified a little bit to fit perfectly the entire view width, that gives a well organized image gallery with all kind of images sizes
first attempt : images stretch
I began by using the flex: 1; property, or in my case to be precise : flex: 1 1 0;, for the flex-grow property, this gives me something where the images become larger to fill the entire row, but some of them stretch too hard so at certain size of windows it's really weird
second attempt : images inside a box
then I tried to put the images inside a box, that would do the visual effect of growing, without changing the width of the image, but it's not really nice
third attempt : reduce the image by cutting
so then I tried to reproduce the method of duckduckgo, shrinking the images instead of growing them. I thought I would do it easily with flex-shrink, but I couldn't make it work, so I manually put the image in a box that is -30px smaller each size, left and right, and they grow automatically with flex, revealing the hidden part of the image.
Sometimes it grows more than the image width so we see the background, that's ok, but it's not better looking because some images get really too thin
fourth attempt : reduce with a minimum
so i tried with a minimum size, it's better, but still not satisfying at all
/*GALERY*/
/*first gallery and default settings*/
.galery {
display: flex;
flex-wrap: wrap;
}
.galery .card {
display: flex;
/*direction column for the text under the img*/
flex-direction: column;
/*flex-grow is what let the cards containing
the images grow until it fills the entire row*/
flex: 1 1 0;
margin: 20px;
}
.galery .card img {
/*a constant height for the effect of all images aligned*/
height: 200px;
}
.galery .card p {
/*the text on the left*/
margin-left: 0px;
}
.galery .card > * {
/*vertical margin of 5px is for the gap between <img> and <p>*/
/*horizontal margin of 0px is what makes the img
stretch to fit the div element*/
margin: 5px 0px;
}
.galery::after {
/*this pseudo-element is used to create an empty area after
the last card to avoid it to grow on an entire line*/
content: "";
flex: 10;
}
/*second gallery : space around the img*/
.galery.space .card .image_background {
/*the div .img_background is used to make the
frame visible when the img do not stretch*/
display: flex;
width: 100%;
background-color: hsl(0, 0%, 95%);
}
.galery.space .card .image_background img {
/*margin auto avoid the image to stretch*/
margin: auto;
}
/*third gallery : images cutted*/
/*images are inside an element that cut them horizontally
so when flex-grow expend them they fill the frame without
empty space most of the case*/
.galery.cut .card .image_background {
display: flex;
/*this wrapper takes 100% of the width and hides the img overflow*/
width: 100%;
overflow: hidden;
background-color: hsl(0, 0%, 95%);
}
.galery.cut .card .image {
/*this wrapper contains the img and has a width independent of the parent element*/
margin: auto;
}
.galery.cut .card .image img {
/*because of this negative margin, the wrapper .image is
thinner than the image, of 60px, so it can grow with less
chance of exceeding the img size*/
margin: auto -30px;
}
/*fourth gallery : minwidth to avoid having really small img*/
.galery.minwidth .card {
min-width: 150px;
}
<!-- the html code is just 4 times the same gallery of 17 img,
with different div elements to wrap what is needed for the css -->
<p>_images horizontal stretch_____________________________________________</p>
<div class="galery">
<div class="card">
<img src="https://media.mercola.com/ImageServer/Public/2010/July/Thumbnail/727fish-thmb.jpg">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://4.bp.blogspot.com/_0Js4q23LxSc/S9z_EhlbSuI/AAAAAAAABE0/frTJgUQiewg/w1200-h630-p-k-no-nu/banggai+cardinalfish.png">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://www.liveanimalslist.com/fish/images/koi-fish.jpg">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://r.ddmcdn.com/s_f/o_1/cx_87/cy_0/cw_450/ch_450/w_162/APL/uploads/2014/06/10-aquarium-fish-for-every-budget-pictures1.jpg">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://www.liveanimalslist.com/fish/images/killifish.jpg">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://aquariumfish.net/images_01/scat_silver_110217b3_w0090.jpg">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://sites.google.com/site/muranozoo/_/rsrc/1371868925930/fish-invertebrates/fish-invertebrates-2/FormiaMarlin.jpg?height=200&width=148">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://aquariumfish.net/images_01/blue_leopard_angelfish_151204a2_w0090.jpg">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://www.liveanimalslist.com/fish/images/cat-fish.jpg">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://www.webindia123.com/pets/fish/bett.jpg">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://www.aboutfishonline.com/images/anemonefish2.jpg">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://www.webindia123.com/pets/fish/neon.jpg">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<p>_images horizontal extra space_________________________________________</p>
<div class="galery space">
<div class="card">
<div class="image_background">
<img src="https://media.mercola.com/ImageServer/Public/2010/July/Thumbnail/727fish-thmb.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://4.bp.blogspot.com/_0Js4q23LxSc/S9z_EhlbSuI/AAAAAAAABE0/frTJgUQiewg/w1200-h630-p-k-no-nu/banggai+cardinalfish.png">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://www.liveanimalslist.com/fish/images/koi-fish.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://r.ddmcdn.com/s_f/o_1/cx_87/cy_0/cw_450/ch_450/w_162/APL/uploads/2014/06/10-aquarium-fish-for-every-budget-pictures1.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://www.liveanimalslist.com/fish/images/killifish.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://aquariumfish.net/images_01/scat_silver_110217b3_w0090.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://sites.google.com/site/muranozoo/_/rsrc/1371868925930/fish-invertebrates/fish-invertebrates-2/FormiaMarlin.jpg?height=200&width=148">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://aquariumfish.net/images_01/blue_leopard_angelfish_151204a2_w0090.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://www.liveanimalslist.com/fish/images/cat-fish.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://www.webindia123.com/pets/fish/bett.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://www.aboutfishonline.com/images/anemonefish2.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://www.webindia123.com/pets/fish/neon.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<p>_images horizontaly cut________________________________________________</p>
<div class="galery cut">
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://media.mercola.com/ImageServer/Public/2010/July/Thumbnail/727fish-thmb.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://4.bp.blogspot.com/_0Js4q23LxSc/S9z_EhlbSuI/AAAAAAAABE0/frTJgUQiewg/w1200-h630-p-k-no-nu/banggai+cardinalfish.png">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.liveanimalslist.com/fish/images/koi-fish.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://r.ddmcdn.com/s_f/o_1/cx_87/cy_0/cw_450/ch_450/w_162/APL/uploads/2014/06/10-aquarium-fish-for-every-budget-pictures1.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.liveanimalslist.com/fish/images/killifish.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://aquariumfish.net/images_01/scat_silver_110217b3_w0090.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://sites.google.com/site/muranozoo/_/rsrc/1371868925930/fish-invertebrates/fish-invertebrates-2/FormiaMarlin.jpg?height=200&width=148">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://aquariumfish.net/images_01/blue_leopard_angelfish_151204a2_w0090.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.liveanimalslist.com/fish/images/cat-fish.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.webindia123.com/pets/fish/bett.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.aboutfishonline.com/images/anemonefish2.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.webindia123.com/pets/fish/neon.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<p>_images horizontaly cut with minimum width_____________________________</p>
<div class="galery cut minwidth">
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://media.mercola.com/ImageServer/Public/2010/July/Thumbnail/727fish-thmb.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://4.bp.blogspot.com/_0Js4q23LxSc/S9z_EhlbSuI/AAAAAAAABE0/frTJgUQiewg/w1200-h630-p-k-no-nu/banggai+cardinalfish.png">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.liveanimalslist.com/fish/images/koi-fish.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://r.ddmcdn.com/s_f/o_1/cx_87/cy_0/cw_450/ch_450/w_162/APL/uploads/2014/06/10-aquarium-fish-for-every-budget-pictures1.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.liveanimalslist.com/fish/images/killifish.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://aquariumfish.net/images_01/scat_silver_110217b3_w0090.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://sites.google.com/site/muranozoo/_/rsrc/1371868925930/fish-invertebrates/fish-invertebrates-2/FormiaMarlin.jpg?height=200&width=148">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://aquariumfish.net/images_01/blue_leopard_angelfish_151204a2_w0090.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.liveanimalslist.com/fish/images/cat-fish.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.webindia123.com/pets/fish/bett.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.aboutfishonline.com/images/anemonefish2.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.webindia123.com/pets/fish/neon.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
do you have any idea how to do that better ?
What i'm really trying to do is a gallery of images in witch i could put any images without specific settings, no matter its size, if you have another design solution than the duckduckgo version, i'm listening
Can't figure out how to align this item like on photo
Making a web design from my prototype, but stacked here, tried many variations, couldn't figure out, this is what I've got.
If you can help somehow, it is would great.[this is how it should look like1.
<div class="container-fluid bg-light">
<div class="container">
<div class="row">
<div class="col">
<h1 class="text-center pqetitle">¿Por qué elegirnos?</h1>
<h3 class="text-center pqetxt">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
</div>
</div>
<div class="row">
<div class="col">
<h1 class="text-left pqesbtitle">Garantizar </h1>
<img class="text-right pqeicn" src="./img/quienes_somos/Garantizar_icon.png" alt="">
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</p>
</div>
<div class="col">
<h1 class="text-left pqesbtitle">Soporte</h1>
<img class="text-right pqeicn" src="./img/quienes_somos/Soporte_Tecnico_icon.png" alt="">
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</p>
</div>
</div>
<div class="row">
<div class="col text-center">
<img class="pqeimg"src="./img/quienes_somos/pic_por_que_elegirnos.png" alt="">
</div>
</div>
<div class="row">
<div class="col">
<h1 class="text-left pqesbtitle">Instalación</h1>
<img class="text-right pqeicn" src="./img/quienes_somos/Instalacion_icon.png" alt="">
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</p>
</div>
<div class="col">
<h1 class="text-left pqesbtitle">Innovaciones</h1>
<img class="text-right pqeicn" src="./img/quienes_somos/Innovations_icon.png" alt="">
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
I guess you are using Bootstrap.
Have a look, maybe this is what you are looking for :)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid bg-light">
<div class="container">
<div class="row">
<div class="col" style="text-align: center;">
<h1 class="text-center pqetitle">¿Por qué elegirnos?</h1>
<h3 class="text-center pqetxt">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12">
<div class="mini-box">
<h1 class="text-left pqesbtitle">Garantizar </h1>
<img class="text-right pqeicn" src="./img/quienes_somos/Garantizar_icon.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="col-xs-12">
<div class="mini-box">
<h1 class="text-left pqesbtitle">Soporte</h1>
<img class="text-right pqeicn" src="./img/quienes_somos/Soporte_Tecnico_icon.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="big-box text-center">
<img class="pqeimg" src="./img/quienes_somos/pic_por_que_elegirnos.png" alt="">
</div>
</div>
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12">
<div class="mini-box">
<h1 class="text-left pqesbtitle">Instalación</h1>
<img class="text-right pqeicn" src="./img/quienes_somos/Instalacion_icon.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="col-xs-12">
<div class="mini-box">
<h1 class="text-left pqesbtitle">Innovaciones</h1>
<img class="text-right pqeicn" src="./img/quienes_somos/Innovations_icon.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I had to make div table, because I didn't see a way to do it with a bootstrap table element.
Here is image:
Here is the code:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row border-top bg-primary pt-3 pb-0 mt-5">
<div class="col-12">
<p class="text-white"><b>Lorem ipsum</b></p>
</div>
</div>
<div class="row border-left border-right text-center">
<div class="col-8 pt-3 pb-0 border-right">
<p>Lorem ipsum</p>
</div>
<div class="col-4 pt-3 pb-0">
<p>Lorem ipsum</p>
</div>
</div>
<div class="row border text-center">
<div class="col-10">
<div class="row">
<div class="col pt-3 pb-0 border-right">
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
<div class="col pt-3 pb-0 border-right">
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
<div class="col pt-3 pb-0 border-right">
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
<div class="col pt-3 pb-0 border-right">
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
<div class="col pt-3 pb-0 border-right">
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
</div>
<div class="row border-top">
<div class="col bg-primary-dark pt-3 pb-0" style="width: 80%; flex-basis: unset;">
<p class="text-white"><b>Lorem ipsum</b></p>
<p class="text-white">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
</p>
</div>
<div class="col border-right" style="width: 20%; flex-basis: unset;"></div>
</div>
<div class="row border-top">
<div class="col border-right" style="width: 20%; flex-basis: unset;"></div>
<div class="col bg-info-dark pt-3 pb-0 border-right" style="width: 80%; flex-basis: unset;">
<p class="text-white"><b>Lorem ipsum</b></p>
<p class="text-white">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
</p>
</div>
</div>
</div>
<div class="col-2 pt-3">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
</p>
</div>
</div>
Now I want this to be responsive. Horizontal scroll, or any other way, any suggestions would be greatly appreciated
The class col in bootstrap will divide the row into amount of col elements you added.To make it responsive specify width of element for each screen type, using such classes as col-sm-12 (full width on small devices), col-md-6 (two column grid for medium screens) etc. Don't forget, bootstrap is mobile first.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
So I have this code:
https://jsfiddle.net/bdqgszv5/1/
Code without jsfiddle:
<section id="aussteller" class="row separated">
<div class="section-header text-center">
<h2>Aussteller</h2>
<h4>Unsere Aussteller informieren Sie über die neusten Innovationen</h4>
</div>
<div class="col-md-4 col-sm-6">
<div class="aussteller">
<div class="aussteller-info">
<div class="aussteller-photo">
<img src="http://allbrochures.net/wp-content/uploads/2015/04/ricoh-logo.jpg" alt="Ricoh">
</div>
</div>
<h3>Ricoh</h3>
<p>Zeigt uns im RICOH-truck die neusten Drucksysteme</p>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="aussteller">
<div class="aussteller-info">
<div class="aussteller-photo">
<img src="http://reonline.com/wp-content/uploads/2014/01/lexmark-logo-18863_640x480.jpg" style="width: 220px; height: 220px" alt="Lexmark">
</div>
</div>
<h3>Lexmark</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="aussteller">
<div class="aussteller-info">
<div class="aussteller-photo">
<img src="http://www.samsung.com/us/images/common/samsung-logo.jpg" style="width: 220px; height: 220px" alt="Samsung">
</div>
</div>
<h3>Samsung</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="aussteller">
<div class="aussteller-info">
<div class="aussteller-photo">
<img src="http://cf.juggle-images.com/matte/white/280x280/papyrus-logo-primary.jpg" style="width: 220px; height: 220px" alt="Papyrus">
</div>
</div>
<h3>Papyrus</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="aussteller">
<div class="aussteller-info">
<div class="aussteller-photo">
<img src="http://seeklogo.com/images/F/Fujitsu-logo-5CECF13A58-seeklogo.com.gif" style="width: 220px; height: 220px" alt="aussteller 5">
</div>
</div>
<h3>Fujitsu</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="aussteller">
<div class="aussteller-info">
<div class="aussteller-photo">
<img src="http://a1135.phobos.apple.com/us/r30/Purple4/v4/5f/85/bd/5f85bd7c-f6f9-6544-25fb-f00fd604b21a/mzl.snejseuw.png" style="width: 220px; height: 220px" alt="aussteller 6">
</div>
</div>
<h3>ELO</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</section>
Now I would like to reorder it, so that I can get this:
It should be responsive and never loose the order.
How could I do this?
I'm just familiar with css foundation, but I believe is almost the same setup with 12 as the magical number. Code it as a grid width small 2 columns and leave some empty to match your layout.
EDIT: you can use the empty spaces as small 4 columns, or if you can use a center class if possible. Good luck :)
I am beginner of Bootstrap framework and i got the problem when i layout my design. I want to divide 4 column inside of a row-fluid so i write the code as below:
But it is not appear to what i expected, the text in first Lorem ipsum encroached to the second one and not fixed to 4 column
<div class="row-fluid">
<div class="span2"></div>
<div class="span8">
<div class="row-fluid">
<div class="span3">Lorem ipsum dolor sit amet</div>
<div class="span3">Lorem ipsum dolor sit amet</div>
<div class="span3">Lorem ipsum dolor sit amet</div>
<div class="span3">Lorem ipsum dolor sit amet</div>
</div>
</div>
<div class="span2"></div>
Please anyone can help me,thanks in advance
Try wrapping the html in div.container-fluid and closing the div tag for the row:
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">First</div>
<div class="span8">
<div class="row-fluid">
<div class="span3">Lorem ipsum dolor sit amet</div>
<div class="span3">Lorem ipsum dolor sit amet</div>
<div class="span3">Lorem ipsum dolor sit amet</div>
<div class="span3">Lorem ipsum dolor sit amet</div>
</div>
</div>
<div class="span2">Last</div>
</div>
</div>