I'm using Bootstrap CDN on a website where I am trying to align the icons to the left side with logo and centre the text on a top bar. Is there a simple method to get it done?
Top bar picture
<div class="topbar clearfix">
<div class="container">
<div class="row-fluid">
<div class="col-md-4 text-left">
<div class="social">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-pinterest"></i>
</div><!-- end social -->
</div><!-- end left -->
<div class="col-md-8 text-right">
<p>
Интернет-магазин производителя фитоламп и промышленного освещения
<strong><i class="fa fa-phone"></i></strong> +7(499) 100-00-00
</p>
</div><!-- end left -->
</div><!-- end row -->
</div><!-- end container -->
</div>
try use
class="container-fluid"
and adjust the col-md-4 .. to the value you really need
I have included a sidebar in one column and 3 thumbnails in another 3 columns in a row. The thumbnail image is fitting the entire columns at first but when I resize the thumbnail images are getting smaller keeping the column in full width (as for usual bootstrap responsive works). I need to stretch my images as that of the column they are filled in.
Here's my HTML:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid side-navigation-bar">
<div class="row">
<!--==========================================-->
<!--Side navigation bar-->
<!--==========================================-->
<div class="col-md-3 col-md-3-thumbnail">
<div class="nav-side-menu" >
<div class="brand"><i class="fa fa-heartbeat"> myVitals.com</i></div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list" >
<ul id="menu-content" class="menu-content collapse out" >
<li>
<a href="#">
<i class="fa fa-home fa-lg fa-fw"></i> Home
</a>
</li>
<li>
<a href="#">
<i class="fa fa-book fa-lg fa-fw"></i> My Appointments
</a>
</li>
<li>
<a href="#">
<i class="fa fa-s15 fa-lg fa-fw"></i> Facilities
</a>
</li>
<li>
<i class="fa fa-cogs fa-lg fa-fw"></i> Services
</li>
<li>
<i class="fa fa-stethoscope fa-lg fa-fw"></i> Doctors
</li>
<li>
<a href="#">
<i class="fa fa-medkit fa-lg fa-fw"></i> Medications
</a>
</li>
<li>
<a href="#">
<i class="fa fa-medkit fa-lg fa-fw"></i> Medications
</a>
</li>
</ul>
</div>
</div>
</div>
<!--==========================================-->
<!--End of Side navigation bar-->
<!--==========================================-->
<!--==========================================-->
<!--Cards-->
<!--==========================================-->
<div id="column" class="col-md-3 col-sm-6 col-md-3-thumbnail text-center">
<div class="thumbnail">
<figure class="imghvr-hinge-down">
<img src="http://via.placeholder.com/320x211" alt="Bootstrap Thumbnail Customization">
</figure>
<div class="caption">
<h5><b>Bootstrap Cards Design</b></h5>
<p class="card-description">Hi there How are you?</p>
<p>Read More</p>
</div>
</div>
</div>
<div id="column" class="col-md-3 col-sm-6 col-md-3-thumbnail text-center">
<div class="thumbnail">
<figure class="imghvr-hinge-down">
<img src="http://via.placeholder.com/320x211" alt="Bootstrap Thumbnail Customization">
</figure>
<div class="caption">
<h5><b>Bootstrap Cards Design</b></h5>
<p class="card-description">Hi there How are you?</p>
<p>Read More</p>
</div>
</div>
</div>
<div id="column" class="col-md-3 col-sm-6 col-md-3-thumbnail text-center">
<div class="thumbnail">
<figure class="imghvr-hinge-down">
<img src="http://via.placeholder.com/320x211" alt="Bootstrap Thumbnail Customization">
</figure>
<div class="caption">
<h5><b>Bootstrap Cards Design</b></h5>
<p class="card-description">Hi there How are you?</p>
<p>Read More</p>
</div>
</div>
</div>
</div>
</div>
I even tried the width:100% for the thumbnail image as
.thumbnail > img{width:100%; display:block;}
The problem is, the img is not taking the full-width as that of its column
Can anyone please help me???
Used .img-fluid for responsive image in Bootstrap.4. it have following css:
.img-fluid {
max-width: 100%;
height: auto;
}
https://getbootstrap.com/docs/4.0/content/images/
You can just set the width to 100% and the height to auto, this will expand it to full width.
CSS:
.thumbnail > figure > img {
width: 100%;
height: auto;
}
JSFiddle Demo
I am creating a web page where i want to show multiple rows of images. I am using Bootstrap 3.3.7 and have the following code. What is happening is that when using a col-md3, the last images are not show correctly. I want to have them in the same row, starting from left to right, but they are in the middle of the row or some other position.
<div class="staff-picked-posts padding-top-70 background-color-gray padding-bottom-40" id="chennal-page">
<div class="container">
<div class="tab-content">
<div class="slide tab-pane active" id="l">
<div class="">
<div class="item active">
<div class="row">
<ul class="staff-picked-videos">
<li class="col-md-3 col-sm-4 col-xs-12">
<div class="post-details">
<div class="overlay-inner-image">
<img src="https://i.ytimg.com/vi/o3Kbc-LSGvI/hqdefault.jpg" alt="">
<a a="" class="inner-image-overlay" href="/Home/Detail/41/these-athletes-are-incredibly-angry-want-to-check-out-their-reactions"></a>
<div class="watch-icon" data-toggle="tooltip" title="" data-original-title="Watch Later">
<i class="fa fa-clock-o" aria-hidden="true"></i>
</div>
</div>
<div class="image-content background-color-light-green">
<h3>These athletes are incredibly angry. Want to check out their reactions?</h3>
<!--<p>kocco.co<i class="fa fa-check-circle-o trending-post"></i></p>-->
<p class="margin-bottom-0">4/30/2017 <span><i class="fa fa-eye"></i> 0 </span><i class="fa fa-thumbs-o-up"></i> 0</p>
</div>
</div>
</li>
<li class="col-md-3 col-sm-4 col-xs-12">
<div class="post-details">
<div class="overlay-inner-image">
<img src="https://i.ytimg.com/vi/H2EXKlJ0pfI/hqdefault.jpg" alt="">
<a a="" class="inner-image-overlay" href="/Home/Detail/44/most-shocking-boxing-moments-want-to-check"></a>
<div class="watch-icon" data-toggle="tooltip" title="" data-original-title="Watch Later">
<i class="fa fa-clock-o" aria-hidden="true"></i>
</div>
</div>
<div class="image-content background-color-light-green">
<h3>Most Shocking Boxing moments. Want to check? </h3>
<!--<p>kocco.co<i class="fa fa-check-circle-o trending-post"></i></p>-->
<p class="margin-bottom-0">4/30/2017 <span><i class="fa fa-eye"></i> 0 </span><i class="fa fa-thumbs-o-up"></i> 0</p>
</div>
</div>
</li>
<li class="col-md-3 col-sm-4 col-xs-12">
<div class="post-details">
<div class="overlay-inner-image">
<img src="https://i.ytimg.com/vi/3jT_q7dt-cM/hqdefault.jpg" alt="">
<a a="" class="inner-image-overlay" href="/Home/Detail/45/top-10-crazy-moments-in-sports"></a>
<div class="watch-icon" data-toggle="tooltip" title="" data-original-title="Watch Later">
<i class="fa fa-clock-o" aria-hidden="true"></i>
</div>
</div>
<div class="image-content background-color-light-green">
<h3>Top 10 Crazy Moments in Sports </h3>
<!--<p>kocco.co<i class="fa fa-check-circle-o trending-post"></i></p>-->
<p class="margin-bottom-0">4/30/2017 <span><i class="fa fa-eye"></i> 0 </span><i class="fa fa-thumbs-o-up"></i> 0</p>
</div>
</div>
</li>
<li class="col-md-3 col-sm-4 col-xs-12">
<div class="post-details">
<div class="overlay-inner-image">
<img src="https://i.ytimg.com/vi/RvklO0O3BcY/hqdefault.jpg" alt="">
<a a="" class="inner-image-overlay" href="/Home/Detail/46/top-20-funny-moments-in-soccer"></a>
<div class="watch-icon" data-toggle="tooltip" title="" data-original-title="Watch Later">
<i class="fa fa-clock-o" aria-hidden="true"></i>
</div>
</div>
<div class="image-content background-color-light-green">
<h3>Top 20 funny moments In Soccer </h3>
<!--<p>kocco.co<i class="fa fa-check-circle-o trending-post"></i></p>-->
<p class="margin-bottom-0">4/30/2017 <span><i class="fa fa-eye"></i> 0 </span><i class="fa fa-thumbs-o-up"></i> 0</p>
</div>
</div>
</li>
<li class="col-md-3 col-sm-4 col-xs-12">
<div class="post-details">
<div class="overlay-inner-image">
<img src="https://i.ytimg.com/vi/_c55cW6UGP0/hqdefault.jpg" alt="">
<a a="" class="inner-image-overlay" href="/Home/Detail/50/ronaldinho-making-amazing-plays-in-soccer"></a>
<div class="watch-icon" data-toggle="tooltip" title="" data-original-title="Watch Later">
<i class="fa fa-clock-o" aria-hidden="true"></i>
</div>
</div>
<div class="image-content background-color-light-green">
<h3>Ronaldinho making amazing plays in soccer. </h3>
<!--<p>kocco.co<i class="fa fa-check-circle-o trending-post"></i></p>-->
<p class="margin-bottom-0">4/30/2017 <span><i class="fa fa-eye"></i> 0 </span><i class="fa fa-thumbs-o-up"></i> 0</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
EDIT 1:
ANSWER THANKS TO Shariqkhan
/*screen-sm*/
#media (min-width: 768px) and (max-width: 992px) {
.staff-picked-videos .col-sm-4:nth-child(3n+1) {
clear: both;
}
}
/*screen-md*/
#media (min-width: 992px) and (max-width: 1200px) {
staff-picked-videos .col-md-3:nth-child(4n+1) {
clear: both;
}
}
/*screen-lg corresponds with col-lg*/
#media (min-width: 1200px) {
staff-picked-videos .col-md-3:nth-child(4n+1) {
clear: both;
}
}
The first column on every new row should clear i.e they should have clear:both in their css markup.
In your example the first column (These athletes are...), 5th column (Ronaldinho making...) should clear floats.
So you should add this CSS rule:
.staff-picked-videos .col-md-3:nth-child(4n+1) {
clear: both;
}
I think the expected behaviour is:
CardA CardB CardC CardD
CardE ...
Right?
If yes, the root cause of your problem is: The height of cards are different. In your case, CardA's height is larger than CardB, when CardB is placed in new row, browser will try to find the most left and most top position (unfortunately, "top" has higher priority than "left", which is the behaviour of float -- the underline CSS rule used by col-md-3). So, if CardA's height is 110 and CardB&CardC&CardD's height is 100, the result would be:
CardA CardB CardC CardD
CardE ...
If CardA's height is 110 and CardB's height is 105 and CardC&CardD's height is 100, the result would be:
CardA CardB CardC CardD
CardE ...
To implement your expected behaviour, cards should be placed in columns, not rows. For example, CardA and CardE should be put into one <div>, CardB and CardF should be put into another <div> etc.
Your columns will not have class col-md-3. Instead they will have col-md-2 where first column will have an additional class col-md-offset-1
Your column structure would look like this -
<div class="row">
<div class="col-md-2 col-md-offset-1"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>
The offset adds space to the left of your element.
You can see the first li height is increased due to that only this issue is caused due to lengthy title please use excerpt css for title https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow . You can set maximum height to the post and also give overflow hidden or please use excerpt css to the title of the post if the height of all post is adjusted by maximum height css your issue will be fixed.
I got the left side to line up but can't get the right side to work. I tried pull-right, float:right, text-align:right, but none of them work. Here is my code. Appreciate any help]1
<footer class="footer clearfix">
<div class="footer-grid">
<div class="footer-L col-md-6">
<a class="footer-text" href="hysys.html">
<span>Previous</span>
<i class="fa fa-arrow-left"></i>
<h2>HYSYS<h2>
</a>
</div>
<div class="footer-R col-md-6 pull-right">
<a class="footer-text" href="hysys.html">
<span>Next</span>
<i class="fa fa-arrow-right"></i>
<h2>Aspen One</h2>
</a>
</div>
</div>
</footer>
I've spent three hours trying to reproduce the image above, however I am unable to make the texts remain on the side and centered with facebook-pile and icons. Can anyone help me?
Code:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<section class="social-media">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="fb-pile">
<h2> no Facebook:</h2>
<div class="fb-facepile" data-href="https://www.facebook.com/facebookdevelopers" data-max-rows="1" data-colorscheme="light" data-size="small" data-show-count="true"></div>
</div>
</div>
<div class="col-md-4">
<div class="social-icons">
<h2>Compartilhar:</h2>
<a target="_blank" href="" title="Ir para página do facebook">
<span class="fa fa-facebook fa-2x"></span>
</a>
<a target="_blank" href="" title="Ir para página do twitter">
<span class="fa fa-twitter fa-2x"></span>
</a>
<a target="_blank" href="" title="Ir para página do instagram">
<span class="fa fa-instagram fa-2x"></span>
</a>
</div>
</div>
<div class="col-md-2">
<div class="trip-advisor">
<img class="trip-advisor-img" title="Recomende o Pub Crawl no Trip Advisor" src="http://upload.wikimedia.org/wikipedia/fr/1/1d/TripAdvisor-logo.png"/>
</div>
</div>
</div>
</div>
</section>
Try changing the .social-media h2 style to include display: inline-block instead of floating it:
http://codepen.io/a_double/pen/EayaOa