I'm using a template with Bootstrap.
The following code:
<div class="row mix-grid thumbnails wrapper white" id="pictures_placeholder">
<div class="col-md-3 col-sm-4 mix ">
<div class="mix-inner">
<img class="img-responsive" src="../../../assets/admin/pages/media/works/img1.jpg"
alt="">
<div class="mix-details picture-bottom-label">
<div class="row">
<div class="col-md-12 col-xs-12">
<div class="col-md-4 col-xs-3">
<img src="../../../assets/admin/pages/media/profile/profile_user.jpg"
class="img-responsive img-circle profile-pic"
alt=""
/>
</div>
<div class="col-md-8 col-xs-8 text-left user-name">Asaf Nevo</div>
</div>
</div>
</div>
</div>
</div>
</div>
does this:
How can I make the name (Asaf Nevo) to be entered to the image ?
try adding this to CSS:
div.user-name{height:92px;line-height:92px;}
hope that helps.
Put the name in the same div as the image. Make both inline.
<img src="../../../assets/admin/pages/media/profile/profile_user.jpg"
class="img-responsive img-circle profile-pic" alt="" />Asav Nevo
Now play with the CSS property vertical-align. Something like vertical-align: middle could work and yes, this property should be applied to the surrounding div if not mistaken, potentially also to the inline content itself. I cannot try it right now.
Add this to the css:
.user-name {
margin-top:50%;
}
Related
I wanted three images in each row...
<div class="row">
<div class="col-lg-4">
<div class="thumbnail">
<img src="https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</div>
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img src="https://images.pexels.com/photos/2103864/pexels-photo-2103864.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</div>
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img src="https://images.pexels.com/photos/1476321/pexels-photo-1476321.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</div>
</div>
I expected it to be inside the border and all the images should have been of same size (three in each row) ...But its not.. help...
You have <div class="thumbnail">, but the built-in bootstrap 3 thumbnail classname is <div class="img-thumbnail">.
You say you want all images to be the same size, but your images have different proportions. Their pixel sizes are: 500x333, 500x750, and 500x375. What behavior do you want exactly? You could force them to all be the same height and width by setting adding styles for height=500px; width=500px;, but then the images will be distorted and squashed.
What you'll want to do is remove &w=500 from the image URLs so they scale to the dynamic width of the Bootstrap grid, and maybe also change the class on the columns to col-md-4 or col-sm-4 to make sure the images sit next to each other on smaller screens.
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=1">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://images.pexels.com/photos/2103864/pexels-photo-2103864.jpeg?auto=compress&cs=tinysrgb&dpr=1">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://images.pexels.com/photos/1476321/pexels-photo-1476321.jpeg?auto=compress&cs=tinysrgb&dpr=1">
</div>
</div>
</div>
If you want all three images to have the same height as well, you could do something like this:
.thumbnail img {
max-height: 300px;
}
To achieve true dynamic uniformity, you should look at using Bootstrap 4 card groups instead.
I wish to have a group of centered images arranged in a certain way on the homepage of a bootstrap site. To look like the image below:
I want them to remain centered and then shrink when we go to mobile, with the "freeshipping block" not displaying so it just the two horizontal blocks below 750px.
I have set up a Plunker with the code I have
https://plnkr.co/edit/l6rbmEZQbqGZYifBmF5k?p=preview
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-12 customer-greeting">
<p class="intro_text">My opening blurb of text</p>
<div class="offerscontainer">
<div class="offeroftheday">
<a href="product_info.php?products_id=221">
<img class="img-responsive" src="http://i.imgur.com/TQ6gwoO.jpg">
</a>
</div>
<div class="freeshipping">
<img class="img-responsive" src="http://i.imgur.com/Xqw75nl.jpg">
</div>
<div class="24hrdelivery">
<a href="index.php?cPath=53">
<img class="img-responsive" src="http://i.imgur.com/F3JTlas.jpg">
</a>
</div>
</div>
</div>
Should I be adding float classes or should they all be bootstrap col-8-sm, col-4-sm etc?
PS - Should #queries be used in Bootstrap sites or should they pretty much all layout be handled in the HTML code with col-8-sm (bootstrap classes) etc
You can do it like this..
HTML
<div class="container">
<div class="row">
<div class="col-sm-8">
<img class="img-responsive width-100" src="http://i.imgur.com/TQ6gwoO.jpg">
<br>
<img class="img-responsive width-100" src="http://i.imgur.com/TQ6gwoO.jpg">
<br>
</div>
<div class="col-sm-4">
<img class="img-responsive width-100" src="http://i.imgur.com/Xqw75nl.jpg">
</div>
</div>
</div>
CSS
.width-100 { width: 100%; }
You can write col-md-* or col-sm-* depending on your requirement!
I have an image that's 1300px wide, using bootstrap I want this image to fill the full width of my container which is set to 1300px. I create a row, give it a full 12 columns and then add in the image with a class of image responsive. With this set up I get the output below.
I want my image to stretch all the way along to where my image is in my content, here is my code.
<div class="row">
<div class="container">
<div class="col-md-12">
<img src="<?php bloginfo('template_directory'); ?>/assets/img/homeBanner.jpg" alt="placeholder 960" class="img-responsive"/>
</div>
</div>
</div>
The image is set to width 100% so not sure why it isn't filling the container.
In bootstrap 4.1, the w-100 class is required along with img-fluid for images smaller than the page to be stretched:
<div class="container">
<div class="row">
<img class='img-fluid w-100' src="#" alt="" />
</div>
</div>
see closed issue: https://github.com/twbs/bootstrap/issues/20830
(As of 2018-04-20, the documentation is wrong: https://getbootstrap.com/docs/4.1/content/images/ says that img-fluid applies max-width: 100%; height: auto;" but img-fluid does not resolve the issue, and neither does manually adding those style attributes with or without bootstrap classes on the img tag.)
Check if this solves the problem:
<div class="container-fluid no-padding">
<div class="row">
<div class="col-md-12">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1300%C3%97400&w=1300&h=400" alt="placeholder 960" class="img-responsive" />
</div>
</div>
</div>
CSS
.no-padding {
padding-left: 0;
padding-right: 0;
}
Css class no-padding will override default bootstrap container padding.
Full example here.
#Update
If you use bootstrap 4 it could be done even simpler
<div class="container-fluid px-0">
<div class="row">
<div class="col-md-12">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1300%C3%97400&w=1300&h=400" alt="placeholder 960" class="img-responsive" />
</div>
</div>
</div>
Updated example here.
First of all if the size of the image is smaller than the container, then only "img-fluid" class will not solve your problem. you have to set the width of image to 100%, for that you can use Bootstrap class "w-100".
keep in mind that "container-fluid" and "col-12" class sets left and right padding to 15px and "row" class sets left and right margin to "-15px" by default.
make sure to set them to 0.
Note:
"px-0" is a bootstrap class which sets left and right padding to 0 and
"mx-0" is a bootstrap class which sets left and right margin to 0
P.S. i am using Bootstrap 4.0 version.
<div class="container-fluid px-0">
<div class="row mx-0">
<div class="col-12 px-0">
<img src="images/top.jpg" class="img-fluid w-100">
</div>
</div>
</div>
Here's what worked for me. Note: Adding the image within a row introduces some space so I've intentionally used only a div to encapsulate the image.
<div class="container-fluid w-100 h-auto m-0 p-0">
<img src="someimg.jpg" class="img-fluid w-100 h-auto p-0 m-0" alt="Patience">
</div>
container class has 15px left & right padding, so if you want to remove this padding, use following, because row class has -15px left & right margin.
<div class="container">
<div class="row">
<img class='img-responsive' src="#" alt="" />
</div>
</div>
Codepen: http://codepen.io/m-dehghani/pen/jqeKgv
This will do the same as many of the other answers, but will make sides flush with the window, so there is no scroll bars.
<div class="container-fluid">
<div class="row">
<div class="col" style="padding: 0;">
<img src="example.jpg" class="img-responsive" alt="Example">
</div>
</div>
</div>
i have a problem creating three four columns div inside the bootstrap thumbnail. The problem is that if i use the col-xs-4 class, the text inside go out of the caption of bootstrap. And if i use three div inside another one, it works, but i can't align the text inside each div at the center. Any ideas? Currently i use this script:
<div class="col-md-3 col-lg-3 col-xs-6 col-sm-4">
<a href="profilo?id=<?php echo $dati['id'];?>" class="thumbnail">
<img src="<?php echo $url1;?>" alt="Immagine profilo" />
<span class="flag-diamond"></span>
<div class="caption">
<div class="esc_username"><span class="username"><?php echo $username;?></span><span class="hidden-xs age"><?php echo $anni;?> anni</span></div>
<div class="esc_city"><?php echo $dati['citta'];?></div>
<div style="width:100%">
<div class="col-xs-4">TRY</div>
<div class="col-xs-4">TRY</div>
<div class="col-xs-4">TRY</div>
</div>
</div>
</a>
</div>
and i get this:
but i want to do something like this:
[EDIT]
If i add padding:0 to the three div, i get this:
With Bootstrap you can nest divs which basically means that you can just add a surrounding row to your 3 divs.
<div class="row">
<div class="col-xs-4">TRY</div>
<div class="col-xs-4">TRY</div>
<div class="col-xs-4">TRY</div>
</div>
The reason this should work is because row class has negative left and right margins which will automatically adjust itself to the container which, in your case, is the outer div.
write class
.no-padding{
padding:0px;
}
Then apply where you don't want padding as follows
<div class="col-xs-4 no-padding">TRY</div>
<div class="col-xs-4 no-padding">TRY</div>
<div class="col-xs-4 no-padding">TRY</div>
I hope this will solve your problem if not try adding !important to padding this will override other padding if it's overriding
.no-padding{
padding:0px !important;
}
please try this css code instead of col-xs-4:
<div class="col-sm-4">TRY</div>
<div class="col-sm-4">TRY</div>
<div class="col-sm-4">TRY</div>
best way you can set the padding = 0 or you can set a background-color for the container div
like
<div class="col-md-3 col-lg-3 col-xs-6 col-sm-4">
<a href="profilo?id=<?php echo $dati['id'];?>" class="thumbnail">
<img src="<?php echo $url1;?>" alt="Immagine profilo" />
<span class="flag-diamond"></span>
<div class="caption">
<div class="esc_username"><span class="username"><?php echo $username;?></span><span class="hidden-xs age"><?php echo $anni;?> anni</span></div>
<div class="esc_city"><?php echo $dati['citta'];?></div>
<div style="width:100%;background-color:#EEE;">
<div class="col-xs-4">TRY</div>
<div class="col-xs-4">TRY</div>
<div class="col-xs-4">TRY</div>
</div>
</div>
</a>
</div>
I want my date picker to be in the middle of the page, eg. the line where I have: <div class="center-block text-center datepicker"></div>
Obviously center-block and text-center I tried already - but neither change anything. And with the offset it just makes it close to the centre without being perfectly centre aligned.
What do I need to do?
Thanks
<div class='row'>
<div class='col-sm-12'>
<div class='page-header page-header-with-icon mg-t'> <i class='fa-icon-calendar'></i>
<h2>Calendar</h2>
</div>
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<div class="center-block text-center datepicker"></div>
</div>
</div>
</div>
</div>
Try something like this:
<div class="col-sm-12">
<div class="datepicker"></div>
</div>
Then give the date picker something like:
.datepicker {
display:inline-block;
margin:0 auto;
}
I haven't tested this, but it would be where I would start.
style="text-align:center;" shall do the trick no? I tested and for me, the "CALENDAR" text is centered
<div class="col-sm-12">
<div class="page-header page-header-with-icon mg-t" style="text-align:center;">
<i class="fa-icon-calendar"></i>
<h2>Calendar</h2>
</div>
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<div class="center-block text-center datepicker"></div>
</div>
</div>
</div>
</div>
This is what should solve your problem. Add it somewhere in your custom stylesheet and change the width % to what suits your design.
.datepicker-inline {
width: 20%;
}