I've a fluid row in which i have a item (nontext) and I want to align it horizontal centered
text
<div class="container-fluid">
<div class="row-fluid">
<div class="span12" style="text-align: center">
<img src="#Url.Content("~/Images/Domain/IMG_1710.jpg")" />
</div>
</div>
</div>
this works pretty fine
but as soon as I add a max-width and max-height the alignment doesn't work anymore.
<div class="container-fluid">
<div class="row-fluid">
<div class="span12" style="text-align: center;max-height: 300px; max-width: 400px" >
<img src="#Url.Content("~/Images/Domain/IMG_1710.jpg")" />
</div>
</div>
What am I doing wrong ? How can I set max width and hight and have a centered alignment?
To follow bootstrap rules, try to center it with the offset class
<div class="row-fluid">
<div class="span4 offset4">
<img src="yourimage" />
</div>
</div>
see documentation
Applying max-height and max-width on one of Bootstrap's span# classes will override grid styling. I would recommend adding the height/width on the image (if the text align doesn't work, you can try margin: 0 auto on the image.
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.
How to make image inside div not to be bigger than the div? now I set width is set to 500px what is not a good solution.
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-md-12 col-lg-12 col-sm-12 col-xm-12">
<div class="col-md-6 col-lg-6 col-sm-12 col-xm-12"">
<img src="imagesource" class="img-responsive" width="500" height="auto">
</div>
</div>
</div>
</div>
Setting
img {
width:100%;
}
or
<img style="width:100%;"/>
will make sure that an img is never wider than its parent container.
You should remove your inline styles (width and height) for <img>. Also remove double quotes here col-xm-12"">
Jsfiddle here
How to do responsive product images in bootstrap? I need all the columns and images scale down when i'm sizing the browser like here: link
<div id="product-list">
<div class="container">
<div class="row">
<div class="col-lg-15 col-md-3 col-sm-4 col-xs-12 item">
<div class="product">
<div class="product-image">
<img src="http://placehold.it/220x322" width="220" height="322" class="img-responsive" alt="Simple product">
</div>
<div class="product-info">
<div class="product-name">Rick Owens</div>
<div class="product-model">Glass ice nappa leather bomber</div>
<div class="product-price">€ 1161.00</div>
</div>
</div>
</div>
<!-- more products -->
</div>
</div>
</div>
Here's the html fiddle
Give your images the 'img-responsive' class and wrap it in the default bootstrap tree (container - row - col)
Adding Bootstrap's built in .img-responsive class to any image tag will do the job.
The .img-responsive class applies the following CSS properties to the image:
max-width: 100%;
height: auto;
display: block;
I am using bootstrap fluid layout. The layout I desire is as follows:
My html code
<div class="container">
<div class="row-fluid">
<div class="span4 well">span4</div>
<div id="h" class="span8 well ">span8</div>
</div>
<div id='calendar' ></div>
</div>
It gives span4 and span8 column in a row for desktop. On a small device, it puts span4 at the top and displays span8 below it. But, when the screen is resized, I wanted to have span8 at the top and span4 below it.
The solution I tried
<div class="container">
<div class="row-fluid">
<div id="h" class="span8 well pull-right">span8</div>
<div class="span4 well ">span4</div>
</div>
<div id='calendar' ></div>
</div>
It works but it gives following layout for big screen. span4 leaves some margin initially which I want to avoid.
How can I do that?
Try adding this style:
#x{
margin-left: 0px;
}
And updating your html to:
<div class="container">
<div class="row-fluid">
<div id="h" class="span8 well pull-right">span8</div>
<div id="x" class="span4 well">span4</div>
</div>
<div id='calendar' ></div>
</div>
The id is just trumping this portion of the Bootstrap css:
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
need your help. I created a div that contains 2 floating DIVs. The first Div would be the leftnav. The second Div contains 2 floating DIVs too. The problem #container div height set to auto but not seem to work.
here: jsfiddle
I tried the clear:both at the end of the second div, but it didn't work.
Any help would be appreciated. Thanks
<div id="header">header</div>
<div id="container">
<div id="first">first</div>
<div id="second">
<div id="scol1">
<div id="scol1a">scol1a</div>
<div id="scol1b">scol1b</div>
<div id="scol1c">scol1c</div>
</div>
<div id="scol2">
<div id="scol2a">scol2a</div>
<div id="scol2b">scol2b</div>
<div id="scol2c">scol2c</div>
</div>
</div><!--SECOND DIV-->
<br style="clear: both;" />
</div> <!--CONTAINER DIV-->
<div id="footer">footer</div>
change scol1 height to auto as well. http://jsfiddle.net/Y47sx/31/
You have given 100px height to scol1a, scol1b, scol1c. This causes container having problem. To solve this you should define your #container height: 306px; (100+100+100+6)= 306px. 6px for border.
See this Demo
Note: I have removed <br style="clear: both;" />
In stand of <br style="clear: both;" /> use <div style="clear:both; float:none;"></div> and remove height of <div id="scol1"></div> <div id="scol2"></div>