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
Related
<div class="cursor-pointer" (click)="goBack()">
<i class="fa fa-arrow-left my-arrow ml-3 mb-1"> </i>
<a class="ml-1 go-back">Go Back</a>
</div>
I created go back button, but it is clickable on entire row, to solve this I tried:
<div class="row">
<div class="col-sm-2 cursor-pointer" (click)="goBack()">
<i class="fa fa-arrow-left my-arrow ml-3 mb-1"> </i>
<a class="ml-1 go-back">Go Back</a>
</div>
But now col-sm-2 width also is more and it is clickable, I want to make only button clickable. Is there any proper way to do the same?
try this way
<div class="row">
<div class="col-sm-2">
<a class="ml-1 go-back cursor-pointer" (click)="goBack()">
<i class="fa fa-arrow-left my-arrow ml-3 mb-1"> </i>
Go Back
</a>
</div>
</div>
I'm trying to border a div that contains 4 fa-icons. Since I've set the parent div as Container, the border is automatically occupying large padding on the left & right sides horizontally. I've also tried nesting bootstrap grids, but it's not helping. Can anyone please help with this?
NOTE: Padding should not be greater than 1px on all sides and the div should exactly be in the center of the page.
HTML:
<div class="container" id="socialIcons">
<div class="row">
<div class="col-md-12">
<a href="https://www.google.com">
<i class="fab fa-linkedin fa-3x "></i>
</a>
<a href="https://www.google.com" target="_blank">
<i class="fab fa-youtube fa-3x"></i>
</a>
<a href="https://www.google.com">
<i class="fab fa-instagram fa-3x"></i>
</a>
<a href="https://www.google.com">
<i class="fab fa-github fa-3x"></i>
</a>
</div>
</div>
</div>
CSS:
#socialIcons {
position: relative;
text-align: center;
margin-top: 300px !important;
border: 1px solid white;
}
UPDATE: After applying Jeff's answer, this is closer to what I needed, but still has the automatic padding on the right side of the GitHub icon. Any idea why?
You could do something like this (when you swap your icons with my span's, it should give you the proper padding on top and bottom):
Codpen
Instead of hard coding text-align: center;, just add the class text-center through Bootstrap. Also, notice I added justify-content-center to the row.
<div class="container text-center" id="socialIcons">
<div class="row justify-content-center">
<div class="border">
<a href="https://www.google.com">
<span>google</span>
</a>
<a href="https://www.google.com">
<span>youtube</span>
</a>
<a href="https://www.google.com">
<span>fb</span>
</a>
<a href="https://www.google.com">
<span>twitter</span>
</a>
</div>
</div>
</div>
and CSS:
#socialIcons {
position: relative;
margin-top: 300px !important;
}
.border {
border: 1px solid black;
padding: 1px;
}
<div class="container" id="socialIcons">
<div class="row">
<div class="col-md-12" style="border: 1px solid white;">
<a href="https://www.google.com">
<i class="fab fa-linkedin fa-3x "></i>
</a>
<a href="https://www.google.com" target="_blank">
<i class="fab fa-youtube fa-3x"></i>
</a>
<a href="https://www.google.com">
<i class="fab fa-instagram fa-3x"></i>
</a>
<a href="https://www.google.com">
<i class="fab fa-github fa-3x"></i>
</a>
</div>
</div>
I hope above code will helps you
If your icons should be center-aligned - you don't need to use div element with container class. Just add a div wrapper with custom class, and add your styles on it.
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.
How can i float left the social icons with bootstrap, with text centered?
Im showing an image here, what i want. Now i use col-md-3 divs for floating, but there are to many free spaces between the divs.
<div class="col-md-12 footer_social_divs_box">
<div class="col-md-3 footer_social_divs text-center">
<i class="fa fa-facebook-official" aria-hidden="true"></i>
</div><div class="col-md-3 footer_social_divs text-center">
<i class="fa fa-twitter-square" aria-hidden="true"></i>
</div><div class="col-md-3 footer_social_divs text-center">
<i class="fa fa-youtube-square" aria-hidden="true"></i>
</div><div class="col-md-3 footer_social_divs text-center">
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
</div>
I guess you don't need to use the responsive classes on this:
.footer-responsive {
margin: 0 5px;
display: inline-block;
}
.text-center {
text-align: center;
}
.fa {
display: inline-block;
width: 32px;
height: 32px;
background: #000;
}
<div class="col-md-12 footer_social_divs_box text-center">
<div class="footer-responsive footer_social_divs text-center">
<i class="fa fa-facebook-official" aria-hidden="true"></i>
</div>
<div class="footer-responsive footer_social_divs text-center">
<i class="fa fa-twitter-square" aria-hidden="true"></i>
</div>
<div class="footer-responsive footer_social_divs text-center">
<i class="fa fa-youtube-square" aria-hidden="true"></i>
</div>
<div class="footer-responsive footer_social_divs text-center">
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
</div>
You don't need responsive class for that, you can simple use a padding or margin.
try this:
https://jsfiddle.net/leonardoaraujocosta/f070qpfh/
<div class="col-md-12 footer_social_divs_box">
<div class="social_links_container">
<div class="social_link_item">
<a href="https://www.facebook.com/Ferrari/?hc_ref=NEWSFEED&fref=nf" title="Facebook" target="_blank">
<span class="glyphicon glyphicon-superscript" aria-hidden="true"></span>
</a>
</div>
<div class="social_link_item">
<a href="https://www.facebook.com/Ferrari/?hc_ref=NEWSFEED&fref=nf" title="Facebook" target="_blank">
<span class="glyphicon glyphicon-superscript" aria-hidden="true"></span>
</a>
</div>
<div class="social_link_item">
<a href="https://www.facebook.com/Ferrari/?hc_ref=NEWSFEED&fref=nf" title="Facebook" target="_blank">
<span class="glyphicon glyphicon-superscript" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
.social_links_container {
width: 300px;
margin: 0 auto;
}
.social_link_item {
width: 33%;
float: left;
color: white;
text-align: center;
}
I hope I helped you