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.
Related
I am working on an angular project where I am getting the data in image and title and location. I tried to make a responsive div but unable to make them in one size.
<div *ngFor="let company of companies" class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">
<div class="card">
<div class="card-content">
<div class="card-body py-0 text-center">
<input [checked]="true" type="radio" formControlName="scope" (click)="nextFormPostion(nextFormPostionName)" (change)="nextFormPostion(nextFormPostionName)" id="img{{company.scope}}" class="d-none imgbgchk" value="{{company.scope}}">
<label for="img{{company.scope}}">
<div class="row justify-content-center">
<div class="col-12" style="height: 6rem ; display:table-cell; vertical-align: middle;">
<img src="{{company.logo}}" class="mt-1 img-fluid mh-100" alt="Image 1">
</div>
<div class="col-12 mt-2" style="min-height: 3rem;font-size: 12px;text-transform: none;">
<span>{{company.company}}</span>
</div>
<div class="col-12 mt-1" style="min-height: 2.5rem;font-size: 12px;text-transform: none;">
<span>{{company.country}}</span>
</div>
</div>
<div class="tick_container">
<div class="tick"><i class="fa fa-check"></i></div>
</div>
</label>
</div>
</div>
</div>
</div>
company.logo is the image path and company.company is the name of the company. I want to make image in vertical and horizontal align center and if company name length is new line it change the size of all divs.
You don't need bootstrap exactly to do that you can use JavaScript to get the div side you want and apply as width + height.
Also you can use CSS with, for example:
width: 100%
The first thing you need to check if you have any border, margin, padding that is affecting your code. I don't know, I don't have enough information. But I believe it could be because Bootstrap puts automatic padding on .row
For this you can put
<div class="row g-0">
</div>
Bootstrap 5 - No gutters
Or if it is in another element, simply add the px-0 class that removes the padding from the widths.
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.
In the following layout, I have a col-md-2 which doesn't seem to be rendering. You will see it in the part under "Current Projects". All of the blocks below that in the various sections are to be centered. I have a col-md-2, col-md-8, col-md-2 with content in the col-md-8. Right now they all appear to the left, as if that col-md-2 doesn't exist.
<div class="row featureBox">
<div class="col-md-2"></div>
<div class="col-md-8"> CONTENT HERE </div>
<div class="col-md-2"></div>
</div>
Use the .col-md-offset-2 class with your col-md-8 div. The code will look like this:
<div class="row featureBox">
<div class="col-md-offset-2 col-md-8"> CONTENT HERE </div>
</div>
If your first .col-md-2 is empty it's not rendered. If you want it rendered you need to put some content in it, eventually whitespace (not recommended, as it will show up on smaller widths as empty space above the content of your .col-md-8).
If the only reason you added that column was to offset the middle column, all you need is
<div class="row featureBox">
<div class="col-md-8 col-md-offset-2"> CONTENT HERE</div>
</div>
Same goes for xs, lg or sm.
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?
I have a page with a main bootstrap panel and inside this panel I have another panel. The objective is to have multiple nested panels inside the main one creating something that looks similar to an image gallery.
I was able to create the content and at this point it is responsive, adjusting the number of nested panels per row and its size when necessary.
However the inner panels have an image that should be centered. I tried placing the image inside a div with class container. However, when I do that, at certain screen sizes, the images end up outside the inner panels.
Here's my HTML (for the sake of simplicity with only 2 inner panels):
<div id="mainContainer" class="container">
<div class="panel panel-default">
<div class="panel-heading">Panel Title</div>
<div class="panel-body">
<div class="row">
<!--BEGIN OF ITEM 1 -->
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">Item 01</div>
<div class="panel-body"><img src="http://placehold.it/150x150" alt="" class="img-responsive" />
</div>
</div>
<!--END OF ITEM 1 -->
<!--BEGIN OF ITEM 2 -->
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">Item 02</div>
<div class="panel-body"><img src="http://placehold.it/150x150" alt="" class="img-responsive" />
</div>
</div>
<!--END OF ITEM 2 -->
</div>
</div>
</div>
</div>
jsfiddle available here: http://jsfiddle.net/9LFKV/
If you resize your browser, you'll see that at some point the inner panel grows in width but the image is left aligned.
In that case, how do I put the image centered without breaking everything else?
Twitter bootstrap has a helper class of center-block, you could use that to align the element horizontally as follows:
<img src="http://placehold.it/150x150" class="img-responsive center-block">
WORKING DEMO.
You can also use text-center class for the parent element to align its inline elements.
Add style margin:auto to your image,that will help you to horizontally center your image