I have a gallery made with Bootstrap 3 by a grid of 4x2, this looks perfect until the width is less than 767px and higher than 430px. It should look a single centered image but looks like this.
I have already tried with margin: 0 auto; and there have been no changes.
I hope you can help me, thanks.
Add 'col-xs-12' to your bootstrap wrappers of the images, making it look like this:
class='col-md-3 col-sm-6 col-xs-12 retrato isotope-item'
Related
I'm working with Bootstrap 3 and I have a grid system like this:
<div class="row">
<div class="col-xs-4 offset-xs-4 col-sm-1 col-md-1 col-lg-1">
<img src="https://sitename.com/img/logo.jpg">
</div>
<div class="offset-xs-4">
</div>
</div>
And the result on xs devices goes like this:
But I want the logo to be placed in the center by using offset classes. Therefore I tried adding offset-xs-4 to the class that contains logo and also added another div with offset-xs-4 class after that.
But the problem is, it does not seem to be working and still shows the logo at the right side.
So the question is, how can I properly place this image in the center of screen when it comes to xs devices by using offset classes?
Bootstrap 3 offset classes isn't offset-xs-4; it is col-xs-offset-0
I think you should confirm the Bootstrap version you are using and use the right documentation:
Bootstrap 3 Offsetting columns documentation
I'm only a few months old in web development and i know my code is pretty simple but i have tried everthing i know but it is not working. The text and image are not aligning side by side if i increase the width of the image to 100% . also i want the image to go off screen. here is my html code (removing the images since i cant post it).
My css code just contains width=100%; and overflow:hidden;
<div class="row">
<div class="col-lg-6">
<h2>BE HEALTHY</h2>
<p>We are Fitlo, your number one app for weight loss, diet planning and a better overall well being. We’re dedicated to giving you the very best of health and lifestyle from the comfort of your home or office.</p>
</div>
<div class="col-lg-6">
<img class="image" src="" alt="bowl of food">
</div>
</div>
I do not have enough reputation to comment, so I will post this as an answer.
Just to be sure, you're using col-lg-6, so that will put the columns at 50% after large screen and above. If you're looking at a small screen, you'd need either col-md-6, or col-sm-6, or just col-6 if you want 2 columns all over.
If you already know that, then add the class img-fluid to your image. That should work out. This is the Bootstrap class to make images responsive. Bootstrap Responsive Images
I tried it on the attached JSFiddle link, make sure to expand the display box for the -lg breakpoint to take effect.
I am building this website for a friend of mine. She asked if i could make a slider of the header pics. I have tryd making it full width but it looks different in firefox and chrome and i dont know why.
the url is xx
The problem is that in firefox it has a margin/padding left of a lot, instead of 0. Tried adding !important, but no difference. In chrome it is nearly full width, but still not totally. I think im looking over something obvious :( help is highly appreciated.
The first problem is that you created a row as a container of the slider only. The row adds margin-left: -25px and margin-right: -25px. If you wanna use such a structure, you should put a col-xs-12 (if you're using Bootstrap 4 use col-12) inside row.
After that, you will see a fullwidth slider.
As a consequence your structure will be like that:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
...
slider structure
...
</div>
</div>
</div>
This should fix your problem in Firefox too.
I am not sure if you defined the width of the parent element carousel-example correct. You can extend your bootstrap.css for .carousel with the full width:
.carousel {
width:100%;
position:relative;
}
BR
webbolle
I'm new to bootstrap. Here I'm not able to figure out how can I achieve this kind of layout alignment using bootstrap. I tried but not able to achieve this, can anybody help me to do this!
Here is, what I want to achieve:
Here, there are two boxes side by side, left box (green with text) and right box having youtube video. when you resize it, that green box should go to the top of video box like stack. The text inside the green box should be vertically and horizontally center aligned.
You can use different CSS definitions for different window size.
Look here: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
and here: http://getbootstrap.com/css/#grid-media-queries
and here (example matching your problem): http://learnlayout.com/media-queries.html
You can create that layout with bootstrap. You may need to write your own because bootstrap's grid adds gutters between columns by adding padding. You should be able to add a background color to a column, but the content does not touch the edge like in the video example you posted.
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-3">Green box</div>
<div class="col-xs-12 col-sm-9">Video</div>
</div>
</div>
Take a look at this jsfiddle for an example.
Read through Bootstrap's grid documentation if you would like to modify it.
Hello I'm building this site on wordpress: MY SITE. The website is built in Wordpress everything looks perfect. However the follow us along with the 3 icons when you look at it in the monbile (shrink the browser) it gets really huge and crazy. Not sure how to fix it I tried everything.
Right now the header is split up into 3 sections each with a class ".col.-xs-12 .col-md-4" That way when its mobile they stack up on each other. In the first section (the follow us) I have another div with col-xs-4 I believe.
I know this is probably an easy fix. Thank you!
This is the rule from main.css that's causing the problem.
.col-md-4 .social-fixed { width: 45% }
It makes the icons blow up to be 45% of the width of their parent elements. You probably want to assign the width to the parent class, i.e. .col-md-4 or find some other way to resize the container.
Did you try adding col-xs-4 to them?
<div class="col-md-4 col-xs-4 widget1">...</div>
<div class="col-md-4 col-xs-4 widget2">...</div>
<div class="col-md-4 col-xs-4 widget3">...</div>