I have this Bootstrap grid https://www.codeply.com/p/FuHGj3t94N
It works fine with large desktop , but on mobile all is messed up.
Especially the "NEW" text is not visible in mobile and is not responsive.
What is wrong in my Bootstrap grid code ?
Please flow the Bootstrap grid system.
And please see the code here to see your code demo
you should add
<div class="col-lg-1 col-md-1 col-sm-2 col-4"
and
<div class="col-lg-11 col-md-11 col-sm-10 col-8"
to make 100% responsive
Related
I'm trying to use the bootstrap-5 grid system inside a modal popup.
For testing, I simply took the main modal example from https://getbootstrap.com/docs/5.0/components/modal/, and added the grid example inside the modal-body:
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
</div>
....
Result: the grid is not respected in any way. But why?
https://jsfiddle.net/3041fLwk/
The issue is bootstrap doesn't implement responsive on modal.
It relies on parent window for media queries.
The same if you create a smallbox with limited width.
To implement responsive on modal is to use iframe, or gotta set breakpoint on modal yourself
I think your problem is coming from your use of ms-auto - when I removed all of the ms-auto classes the grid worked as expected.
Using bootstrap, how can we make the height of two columns exactly the same?
For example:
<div class="row">
<div class="col-md-6">
Too much in here
</div>
<div class="col-md-6">
A little here resulting in shorter height
</div>
</div>
All I found through google or other posts asking the same thing here either did not work or if it did, it killed the responsiveness of bootstrap.
For example the flex technique works but it kills the responsive effect of bootstrap.
What is the proper and standard solution for this?
I have a page http://spitzpomeranian.com/fr/?option=com_rsform&view=rsform&formId=5
with 2 div:
- one on the left display iframe youtube,
- one on the right display a form
On desktop view it is fine,
but when I reduce my window to see the responsive view, the form on the right doesn't go under my youtube video, but it goes behind!
Any CSS expert could explain me how can I get that done please?
I search solution o google and tried many things without success.
Thanks in advance.
It seems as your page is already using Twitter Bootstrap (I've viewed the source of the page) but you're not taking advantage of Bootstrap's responsive column layout.
You currently have these 2 elements:
<div class="div_image_homepage_left"></div>
<div class="div_image_homepage_right"></div>
I recommend removing the current css properties you already have for them (i.e float, display, position, etc) and using the following:
<div class="row">
<div class="div_image_homepage_left col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
<div class="div_image_homepage_right col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
</div>
This will make them take 50% on large and medium size (6 columns out of 12 columns) screens and 100% on small and extra small screen sizes (12 out of 12 columns).
Read more about Bootstrap grid system here
Hope this helps.
I am new to HTML5 and I have created a website with home page having few icons with absolute position, fixed top and left values.
But when the same is opened in mobile device, I have to scroll a lot, and the images are not coming in center as expected.
Please let me know your inputs for same, as I am new to HTML5 and would like to learn different aspect.
Thanks & Regards,
Mrudul
I'm going to take a wild guess and say you're using bootstrap to make things responsive.
If thats the case, you can simple add a class to images to make them scale correctly..
<img src="http://placehold.it/1920x400" class="img-responsive" alt="">
You can copy and paste this in your editor to test it.
This way, if the screen gets smaller, so will your image.
EDIT :
Also, if you want the image to be contained in a wrapper you can use the following structure :
<div class="container">
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/1920x400" class="img-responsive" alt="">
</div>
</div>
</div>
Is it possible to create a page in bootstrap with slider on only left half of the page and some text on right half of the page?
Will the website/page still be responsive?
If there is any such theme already, please suggest. (WordPress or bootstrap responsive)
That is not a problem at all. I suggest you take a look at the bootstrap documentation, specifically at the Grid section. It describes how to build the sites grid, which (by itself) will be responsive. If the column content behaves nicely when the viewport size changes, depends on the content you put in there.
For the slider, take a look at slick slider which is responsive.
Here is a quick bootstrap grid example for 2 columns next to each other that should give you an idea of how to do this:
<div class="container">
<div class="row">
<div class="col-md-6">
Left Column
</div>
<div class="col-md-6">
Right Column
</div>
</div>
</div>