I'm trying use a image gallery on my index page. But it's been really difficult get expect behavior. This is my code:
.container
.row
.col-md-8.col-sm-8.col-xs-8
- 4.times do |i|
.col-md-1.col-sm-1.col-xs-1
%img.img-responsive.img-rounded{:alt => "", :src => "http://placehold.it/300"}
.col-md-4 //consider simple code in for this column !
I tried before add container, rows and others but always the images get smaller. Is smth wrong with my code? Am I making some mistake with bootstrap behavior?
I'm new and hope this is an answer that might help you:
I don't know why you're filling it like this.
The container has (in Bootstrap counting) a width of 12. So you can put in 12 elements with a class of col-**-1 or 4 of col-**-3. If you don't fill it up, it won't appear bigger although there would be enough space.
Here is one solution in plain html with colums of size 3, so 4 images are displayed in a good size:
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-8 col-xs-8">
<div class="col-md-3 col-sm-3 col-xs-3">
<img class="img-responsive img-rounded" src="http://placehold.it/300" />
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<img class="img-responsive img-rounded" src="http://placehold.it/300" />
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<img class="img-responsive img-rounded" src="http://placehold.it/300" />
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<img class="img-responsive img-rounded" src="http://placehold.it/300" />
</div>
</div>
</div>
</div>
BTW: Whats this for a cool markup language?
Related
I have some code that looks like this (using Bootstrap 4):
<header>
<div class="row">
<div class="col-xs-12 col-md-9">
<h1>Single and Satisfied</h1>
</div>
<div class="col-xs-12 col-md-3">
<div class="col-xs-4">
<img src="https://svgshare.com/i/Kmq.svg">
</div>
<div class="col-xs-4">
<img src="https://svgshare.com/i/Kmq.svg">
</div>
<div class="col-xs-4">
<img src="https://svgshare.com/i/Kmq.svg">
</div>
</div>
</div>
</header>
I've also got a CodePen here: https://codepen.io/davidshq/pen/VwvrRGg
I'd like the result to look something like this:
Single and Satisfied Image1 Image2 Image3
Instead I get something like this:
Single and Satisfied Image1
Image2
Image3
If I use floats or d-flex in an attempt to get the images to appear on the same line the images disappear entirely.
From what I've read this has to do with the SVGs being responsive and sizing themselves to the parent, which is of no size by default. I'm thinking I can define a size on the parent container but trying to understand the best way to do this in a Bootstrap approved manner.
Any suggestions?
You can do something like this:
The svg is too big so I have given size fo 100px each, using flex will take care of your requirement.
.row,.align{
display:flex;
}
<header>
<div class="row">
<div class="col-xs-12 col-md-9">
<h1>Single and Satisfied</h1>
</div>
<div class="col-xs-12 col-md-3 align">
<div class="col-xs-4">
<img src="https://svgshare.com/i/Kmq.svg" style="height:100px;width:100px;">
</div>
<div class="col-xs-4">
<img src="https://svgshare.com/i/Kmq.svg" style="height:100px;width:100px;">
</div>
<div class="col-xs-4">
<img src="https://svgshare.com/i/Kmq.svg" style="height:100px;width:100px;">
</div>
</div>
</div>
</header>
There's no col-xs-4 as far as I see from https://getbootstrap.com/docs/4.4/layout/grid/#grid-options, you could mean col-4.
Since you're trying to lay out three images in one line, you shall wrap them with .row:
<div class="row">
<div class="col-4">
<img src="https://svgshare.com/i/Kmq.svg" />
</div>
<div class="col-4">
<img src="https://svgshare.com/i/Kmq.svg" />
</div>
<div class="col-4">
<img src="https://svgshare.com/i/Kmq.svg" />
</div>
</div>
I'm trying to display some objects in 3 columns using Bootstrap 4. When using this code it only appears in 1 column, like this: web 1 column.
But my idea is to be displayed like this (more or less): web template 3 columns.
<div class="row-mt-5">
<div ng-repeat="woman in women">
<div class= "col-lg-4">
<!--Card-->
<div class="card">
<!--Card image-->
<img class="img-fluid" ng-src="{{woman.image_url}}" alt="{{woman.name}}">
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">{{woman.name}}</h4>
<!--Text-->
<p class="card-text"> <h5>{{woman.field}}</h5> <br> {{woman.job}}</p>
Learn more
</div>
</div>
<!--/.Card-->
</div>
</div>
</div>
I want to learn to use Bootstrap classes for object positioning.
First you need to know about the basic layout structure, learn it here, Please note that you need to define the grid layout for all the screens (sm md lg xl) the details are found in the link provided. Please refer to the below fiddle the code fix for your issue. I have included the ng-app and ng-controller for testing purposes, please ignore that.
HTML:
<div class="container-fluid" ng-app="myApp" ng-controller="MyController">
<div class="row">
<div class= "col-4 col-sm-4 col-md-4 col-lg-4" ng-repeat="woman in women">
<!--Card-->
<div class="card">
<!--Card image-->
<img class="img-fluid" ng-src="{{woman.image_url}}" alt="{{woman.name}}">
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">{{woman.name}}</h4>
<!--Text-->
<p class="card-text">
<h5>{{woman.field}}{{woman.job}}</h5>
</p>
Learn more
</div>
</div>
<!--/.Card-->
</div>
</div>
JSFiddle: here
I have the following structure of my page:
<div class="container-fluid">
<div class="row">
<div class="col-md-9">
<div class="picture">
<div class="row" style="margin-left:0px !important;margin-right:0px !important;padding-bottom:10px;">
<div class="col-md-1">
<img src="url" />
</div>
<div class="col-md-11">
Some name <br/>
Some email
</div>
</div>
</div>
</div>
<div class="col-md-3">
some text here
</div>
</div>
</div>
My issue is that when device width is smaller, name and email goes on the next row but not in the same row where image is. How to fix that? It should be responsive. Thanks!
Every column at a mobile breakpoint will have a width of 100%, which means your .col-md-* classes will all have a width of 100% at smaller sizes. This is a common expectation for responsive grid systems.
To get the image and inputs on the same line, you will have to add another class that overrides the widths set by the bootstrap col classes. Bootstrap has specific classes to target different breakpoints that you can use. See: https://getbootstrap.com/examples/grid/
HTML
<div class="col-md-1 col-xs-6">
<img src="url" />
</div>
<div class="col-md-11 col-xs-6">
Some name <br/>
Some email
</div>
This should do the trick.
I have an image that overflows my row. I read online that clearfix prevents this from happening. But having applied this, my image appears as a very thin line with hardly anything visible. My code is visible below. How do I ensure that my image dynamically resizes itself within this container?
<div class="row">
<div class="col-sm-2 col-md-2 col-lg-2">
<img src="url" alt="A picture" id="heading-img" class="img-responsive">
</div>
<div class="col-sm-6 col-md-6 col-lg-6 col-sm-offset-2 col-md-offset-2 col-lg-offset-2">other things</div>
</div>
add class="img-responsive" if you're using bootstrap css.
I'm trying a web shop layout consisting in three columns:
| thumb | main image | description |
the thumbs column, contains three images that should be resized exactly to match the main image height. I'm using the img-responsive class but there are some minimal pixel differences when I display this layout on different sizes.
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-xs-3" id="prodThumbs">
<img src="http://placehold.it/170x255" class="img-responsive">
<img src="http://placehold.it/170x255" class="img-responsive">
<img src="http://placehold.it/170x255" class="img-responsive">
</div>
<div class="col-xs-9">
<img src="http://placehold.it/534x800" class="img-responsive">
</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<h3>Price: 40,- €</h3>
<button type="button" class="btn-default">add to cart</button>
</div>
</div>
</div>
here is example http://jsfiddle.net/F6vtb/embedded/result/
Is there a better way to achieve this in bootstrap, so the images are perfectly aligned?
thanks
I think your best bet would just be to use a table instead of trying to use grid-columns. Grid-columns can be a pain to keep the same height.
DEMO