I want the image on the left to be with no padding or margin as the photo below in the jsfiddle
https://jsfiddle.net/pq7cxg8e/4/
<div class="box-blanco">
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-3 col-lg-2 hidden-xs">
<a href="salas-estudios/caravaca-ds55">
<img src="http://lorempixel.com/100/100/sports/1" alt="Caravaca" width="85" height="68"></a>
</div>
<div class="col-xs-10 col-sm-10 col-md-9 col-lg-10">
<span class="text-muted visible-xs pull" style="color: #A6A6A6; font-size: 12px;"><i class="fa fa-fw fa-map-marker"></i>Chacarita</span>
<h5>Test Title</h5>
<div class="col-separador-s"></div>
<p class="text-muted" style="font-size: 12px;">
<span class="text-muted hidden-xs" style="color: #A6A6A6;"><i class="fa fa-fw fa-map-marker"></i>Chacarita</span>
<span class="text-muted" style="color: #A6A6A6;"><i class="fa fa-fw fa-phone"></i>4000-8531</span>
<span class="text-muted" style="color: #A6A6A6;"><i class="fa fa-fw fa-mobile fa-lg"></i>15-4000-7713</span></p>
</div>
</div>
</div>
Thanks in advance
The
padding: 10px!important;
Causes the image to be padded, if you want to size the div to a particular size then do that. Otherwise keep padding # 0.
Changing the image size will also change the size of the box.
As you can see in the fiddle: https://jsfiddle.net/gcampton/do34opoo/1/
Related
I have a issue with vertical alignment in a container. I have the following code that does what I want, that is, the first row in the center and the second at the bottom of the container.
Full screen
<header class="masthead" id="home">
<div class="container h-100">
<div class="row h-100 align-items-center justify-content-evenly text-center">
<div class="col-4">
<img src="assets/img/profil.png" class="rounded-circle img-fluid" alt="...">
<hr class="divider" />
<h1 class="text-white font-weight-bold">d3vyce</h1>
</div>
<div class="col-md-8 col-lg-4">
<h2 class="text-white font-weight-bold">Hi 👋, Welcome to my Site!</h2>
<p class="text-white">Developer, CTF Player, Homelab, 3D Printing</p>
<hr class="divider" />
<div class="d-grid col-6 mx-auto">
<a class="btn btn-outline-light btn-lg" href="https://blog.d3vyce.fr" target="_blank"><i class="fa fa-bookmark fa-lg"></i> Blog</a>
<a class="btn mt-2 btn-outline-light btn-lg" href="https://github.com/d3vyce" target="_blank"><i class="fa fa-github fa-lg"></i> Github</a>
</div>
</div>
</div>
<div class="row head-row justify-content-center">
<div class="col-12 mouse_scroll p-0">
<a href="#about">
<div class="mouse">
<div class="wheel"></div>
</div>
<div>
<span class="m_scroll_arrows unu"></span>
<span class="m_scroll_arrows doi"></span>
<span class="m_scroll_arrows trei"></span>
</div>
</a>
</div>
</div>
</div>
</header>
For the alignment at the bottom of the second row I use the following CSS:
.mouse_scroll {
display: block;
width: 24px;
height: 100px;
position: absolute;
bottom: 0; }
The problem happens with the responsive. The columns of the first row are well one on top of the other, but the space between the two is much too important and I can't modify it :(
I tried to search on stackoverflow for answers, but after many tests I'm in a dead end...
Reponsive
Thank you in advance for your answers!
I need some advice to make bootstrap panel header responsive. Panel has title with several buttons on the right side. It looks fine in large screen but looks ugly when browser size is small.
My full code here jsfiddle.
.panel {
margin: 15px;
}
.panel-title {
padding-top: 7px;
font-size: 20px;
}
.mr-10 {
margin-right: 10px;
}
<div class="panel panel-success panel-br-4">
<div class="panel-heading clearfix">
<h4 class="panel-title pull-left">
<i class="fa fa-file-text" aria-hidden="true"></i> <span>Documents</span>
</h4>
<a id="document-сreate-btn" class="btn btn-success pull-right">
<i class="fa fa-plus-circle"></i>
<span>Create new document</span>
</a>
<a class="btn btn-warning pull-right mr-10">
<i class="fa fa-chevron-circle-down" aria-hidden="true"></i>
</a>
<a class="btn btn-warning pull-right mr-10">
<span>Save new order</span>
</a>
</div>
<div class="panel-body">Some content</div>
</div>
When all items cannot fit in one line, I want to make header as in the next picture:
Is such things makes by flexbox or bootstrap grid system? Whats the better way? I will appreciate any examples! :)
This is just a quick example of how to use Bootstrap grid system. It's not gonna be as perfect as you want but it will give you an introduction to grid systems. Also, don't forget to read about media queries.
<div class="panel panel-success panel-br-4">
<div class="panel-heading">
<div class="row">
<div class="col-sm-6">
<h4 class="panel-title">
<i class="fa fa-file-text" aria-hidden="true"></i>
<span>Documents</span>
</h4>
</div>
<div class="col-sm-3" style="display: flex">
<a class="btn btn-warning mr-10">
<span>Save new order</span>
</a>
<a class="btn btn-warning">
<i class="fa fa-chevron-circle-down" aria-hidden="true"></i>
</a>
</div>
<div class="col-sm-3">
<a id="document-сreate-btn" class="btn btn-success mr-10" data-url="">
<i class="fa fa-plus-circle"></i>
<span>Create new document</span>
</a>
</div>
</div>
</div>
<div class="panel-body">Some content</div>
I have two div's sitting side by side, but are not centered inside of its div but rather stay on the left of its row. I am trying to make it responsive and centered as the screen size is being adjusted here is my code.
<div class="connectdiv">
<div class="row">
<div class="col-xs-6 text-center" "col-sm-6" >
<h2 id="connect"><u>Connect</u></h2>
<a target="_blank" href="https://www.instagram.com/balt_jitsu19/"><i class="fa fa-instagram fa-lg"></i></a>
<i class="fa fa-envelope fa-lg"></i>
<a target="_blank" href="https://www.freecodecamp.com/armbar1"><i class="fa fa-free-code-camp fa-lg"></i></a>
<a target="_blank" href="http://github.com/baltz1"><i class="fa fa-github fa-lg"></i></a>
</div>
<div class="col-xs-6 text-center" "col-sm-6">
<h2 id="connect"><u>Made With</u></h2>
<i class="fa fa-html5 fa-2x"></i>
<i class="fa fa-css3 fa-2x"></i>
<img src="https://png.icons8.com/icons8/ios7/32/" title="Icons8" width="32" height="32">
<img src="https://png.icons8.com/gimp/ios7/25/" title="GIMP" width="25" height="25">
</div>
</div>
</div>
My Css
#connect{
color:rgb(255, 255, 255);
font-family:'Oleo Script Swash Caps', cursive;
text-shadow:5px 1px 0px rgb(0, 0, 0);
font-size:35px;
}
.connectdiv{
padding:20px;
width:100%;
margin:5px auto;
}
if it helps i have here on codepen https://codepen.io/balt1/pen/VbYweZ?editors=0100
try this one ... it will work :
<div class="connectdiv">
<div class="row">
<div class="col-xs-6 text-center col-sm-6" >
<h2 id="connect"><u>Connect</u></h2>
<a target="_blank" href="https://www.instagram.com/balt_jitsu19/"><i class="fa fa-instagram fa-lg"></i></a>
<i class="fa fa-envelope fa-lg"></i>
<a target="_blank" href="https://www.freecodecamp.com/armbar1"><i class="fa fa-free-code-camp fa-lg"></i></a>
<a target="_blank" href="http://github.com/baltz1"><i class="fa fa-github fa-lg"></i></a>
</div>
<div class="col-xs-6 text-center col-sm-6">
<h2 id="connect"><u>Made With</u></h2>
<i class="fa fa-html5 fa-2x"></i>
<i class="fa fa-css3 fa-2x"></i>
<img src="https://png.icons8.com/icons8/ios7/32/" title="Icons8" width="32" height="32">
<img src="https://png.icons8.com/gimp/ios7/25/" title="GIMP" width="25" height="25">
</div>
</div>
You haven't applied the col-sm-6 class properly. Currently it's a quoted string precariously applied to the DIV.
Change
class="col-xs-6 text-center" "col-sm-6"
to
class="col-xs-6 col-sm-6 text-center
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css');
<div class="connectdiv">
<div class="row">
<div class="col-xs-6 col-sm-6 text-center">
<h2 id="connect"><u>Connect</u></h2>
<a target="_blank" href="https://www.instagram.com/balt_jitsu19/"><i class="fa fa-instagram fa-lg"></i></a>
<i class="fa fa-envelope fa-lg"></i>
<a target="_blank" href="https://www.freecodecamp.com/armbar1"><i class="fa fa-free-code-camp fa-lg"></i></a>
<a target="_blank" href="http://github.com/baltz1"><i class="fa fa-github fa-lg"></i></a>
</div>
<div class="col-xs-6 col-sm-6 text-center">
<h2 id="connect"><u>Made With</u></h2>
<i class="fa fa-html5 fa-2x"></i>
<i class="fa fa-css3 fa-2x"></i>
<img src="https://png.icons8.com/icons8/ios7/32/" title="Icons8" width="32" height="32">
<img src="https://png.icons8.com/gimp/ios7/25/" title="GIMP" width="25" height="25">
</div>
</div>
</div>
You have too many quotes in your div tag after text-center. Change it to:
<div class="col-xs-6 text-center col-sm-6" >
you cot some of these " too much
try
<div class="col-xs-6 text-center col-sm-6">
instead of
<div class="col-xs-6 text-center" "col-sm-6">
About extra quotes already was written (class="col-xs-6 text-center" "col-sm-6")
But one more point, Bootstrap4 hasn't col-xs-* class, instead it's col-* class for extra small screens!
You need to write <div class="col-6 text-center">
class col-sm-6 nothing changes, because Bootstrap mobile first!
Bootstrap4 docs
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 am trying to center some icons in bootstrap columns, and they are centered when the page is large, but when the width gets smaller the icons shade to the right inside their columns. This might be hopeless, but is there any way for me to keep the icons centered no matter the size of the window?
Here is the HTML
<div class="row text-center" style="padding: 4px 2.5em 4px 2.5em;">
<div class="col-xs-3 text-center">
<a class="subtle-link" href="#" target="_blank"><i class="fa fa-lg fa-twitter-square"></i></a>
</div>
<div class="col-xs-3">
<a class="subtle-link" href="#" target="_blank"><i class="fa fa-lg fa-instagram"></i></a>
</div>
<div class="col-xs-3">
<a class="subtle-link" href="#" target="_blank"><i class="fa fa-lg fa-facebook-square"></i></a>
</div>
<div class="col-xs-3">
<a class="subtle-link" href="#" target="_blank"><i class="fa fa-lg fa-google-plus-square"></i></a>
</div>
</div>
Here is a jFiddle:
http://jsfiddle.net/3ufoa55d/
This happens because of left and right paddings in the bootstrap "col-xs-3" style.
I added this css to your fiddle, and it works fine for me:
.icons-group .col-xs-3 {
padding: 0;
}
also i marked your
<div class="row text-center icons-group" style="padding: 4px 3em 4px 3em;">
div with "icons-group" style to set scope for above css.