I am trying to create the following layout in Bootstrap 5 for three different breakpoints.
Playing with offsets and orders didn't bring a solution, for example:
<div class="col-xs-12 col-md-6">Text A</div>
<div class="col-xs-12 col-md-6"><img src="Img.jpg" class="img-fluid"></div>
<div class="col-xs-12">Text B</div>
works for XS and MD, but not for LG. Img is 1200x800, but I could resize it.
Related
I'm trying to create the following layout:
When the page is smaller - the blue column should go under the red column.
No matter what I try - the issue is the red box always wants to be the same height as the blue box.
https://codepen.io/LeeBow/pen/eYKGzdb
<div class="container-fluid">
<div class="row">
<div class="col-md-8 order-md-1">
<div
style="height:100px;width:100px;background-color:red"></div>
</div>
<div class="col-md-4 order-md-3"><div style="height:300px;width:100px;background-color:blue"></div></div>
</div>
<div class="row">
<div class="col-md-4 order-md-2"><div style="height:100px;width:100px;background-color:green"></div></div>
</div>
</div>
I would like my green box to move under the red box.
The red box always stays the same height as the blue box. It moves under the red box correctly when the screen is smaller.
But the green box will not move under the red box.
Make two blue boxes:
one for desktop (use classes d-md-block d-none) and
one for mobile (use classes d-md-none d-block, which is the opposite from above).
Those classes are Bootstrap classes to manipulate display CSS property.
See the snippet below.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div style="height:100px;width:100%;background-color:red"></div>
<div class="d-md-none d-block" style="height:300px;width:100%;background-color:blue"></div> <!-- Show on mobile -->
<div style="height:100px;width:100%;background-color:green"></div>
</div>
<div class="col-md-4 d-md-block d-none">
<div style="height:300px;width:100%;background-color:blue"></div> <!-- Show on desktop -->
</div>
</div>
</div>
I have a webpage that shows an image up to size 400x400px, if they click on the image then I want it to display in a modal that sizes to accommodate the actual size of the image
The modal comes up but it defaults to 500px whatever the size of the image (from https://getbootstrap.com/docs/5.2/components/modal/#fullscreen-modal). If the image is larger than that I want the modal to be larger, and if smaller I want the modal to be smaller, I cannot see how to do this. I notice you can also have a fullscreen image by using modal-fullscreen but that doesn't help me.
Surely possible for the modal to size to accommodate the data
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div>
<a data-bs-toggle="modal" data-bs-target="#full_size_image_dialog">
<img src="https://via.placeholder.com/400" class="figure-img img-fluid border border-dark">
</a>
<div id="full_size_image_dialog" class="modal">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5>
Full Size artwork
</h5>
</div>
<div class="modal-body">
<img src="https://via.placeholder.com/500" class="figure-img img-fluid border border-dark">
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
Edit
So I went though the answers at How to resize Twitter Bootstrap modal dynamically based on the content
The only answer that sort of worked was adding style="max-width : 1200px;"to the div with bootstrap class of modal-dialog
<div id="full_size_image_dialog" class="modal">
<div class="modal-dialog modal-dialog-scrollable" style="max-width : 1200px;">
<div class="modal-content">
<div class="modal-header">
<h5>
Full Size artwork
</h5>
</div>
<div class="modal-body">
<img src="http://172.17.22.1:9790/minimserver/*/Music/PopRock/Lily*20Allen/Alright,*20Still/01*20-*20Smile.wav/$!picture-34755692-444226.jpg" class="figure-img img-fluid border border-dark">
<figcaption>
1200 x 1200
</figcaption>
</div>
</div>
</div>
</div>
The trouble is that if the actual height of the image is larger than the height of the browser window then the image has to be scrolled vertically
What I actually want is the full image to be displayed full size but only if enough room in browser, otherwise display the max size it can be displayed without vertical scrolling. I can set a lower value for max-width so it works on my window, but then that is not going to be great for users with bigger resolution windows.
It does handle preventing sideways scrolling okay, so if the width of window is too small to show whole image it will shrink image accordingly, and we can reasonably assume images will usually be square.
So my attempted solution was to use Bootstraps container system to set different max-width size for different screen widths using col-md, col-xl ectera. But the trouble is it seems from the help that modal windows need to use their own container within the modal-body div but this isn't going to help because the max-width style has to be applied at the modal div so is outside of modal-body scope.
I tried just utilising the main page container, but it just uses the first dialog code each time, i.e it never uses more than 700px max width
<div class="row g-0">
<div class="col p-2">
<div id="full_size_image_dialog" class="modal">
<div class="modal-dialog modal-dialog-scrollable" style="max-width : 700px;">
<div class="modal-content">
<div class="modal-header">
<h5>
Full Size artwork
</h5>
</div>
<div class="modal-body">
<img src="http://172.17.22.1:9790/minimserver/*/Music/PopRock/Lily*20Allen/Alright,*20Still/01*20-*20Smile.wav/$!picture-34755692-444226.jpg" class="figure-img img-fluid border border-dark">
<figcaption>
1200 x 1200
</figcaption>
</div>
</div>
</div>
</div>
</div>
<div class="col-md p-2">
<div id="full_size_image_dialog" class="modal">
<div class="modal-dialog modal-dialog-scrollable" style="max-width : 1200px;">
<div class="modal-content">
<div class="modal-header">
<h5>
Full Size artwork
</h5>
</div>
<div class="modal-body">
<img src="http://172.17.22.1:9790/minimserver/*/Music/PopRock/Lily*20Allen/Alright,*20Still/01*20-*20Smile.wav/$!picture-34755692-444226.jpg" class="figure-img img-fluid border border-dark">
<figcaption>
1200 x 1200
</figcaption>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row g-0">
<div class="col-7 col-md-6 col-lg-4 col-xl-3 p-2">
<a data-bs-toggle="modal" data-bs-target="#full_size_image_dialog">
<img src="http://172.17.22.1:9790/minimserver/*/Music/PopRock/Lily*20Allen/Alright,*20Still/01*20-*20Smile.wav/$!picture-34755692-444226.jpg" class="img-fluid border border-dark">
</a>
</div>
At the moment, this is the best solution I could come up with using only CSS:
.modal-dialog {
max-width: max-content !important;
}
.modal-body {
display: flex;
}
.modal-body img {
object-fit: contain;
}
Only problem is that white bars appear to the left and right of the image when screen height is less then image height.
This is because of the object-fit: contain; style which I added to the image to maintain the original aspect ratio. If you remove this style then then white bars will disappear but the image will not keep it's initial aspect ratio when it's height is shrinking.
JS Fiddle: https://jsfiddle.net/hvaosw5j/
The cards rendered in each are not aligned correctly, because instead of aligning horizontally they are aligned vertically (which I don't want).
It is very strange that this happens because I have made many similar rowr classes that contain exactly the same cards (But with different content) and these "align" perfectly well. In fact, this had never happened to me with the rows I have made before until I made this one, and as much as I check the code over and over again it is exactly the same as the ones I have made previously except for the content which is the only thing different.
<row>
{{#each schdData.logs}}
<div class="col-md-3">
<div class="card">
<div class="card-body">
<p class="card-text">{{{objst this}}}</p>
</div>
</div>
</div>
{{/each}}
</row>
And to clarify, this row class is not inside another row class, it is only inside a container p-4" class as I use to put all the rows-columns of cards I make in row classes and they do work.
Here. You have used row element instead of row as class. You need to use <div class="row">...</div> instead of <row>...</row>. Please read bootstrap Grid system for more understand.
Your code should be as below:
<div class="row">
{{#each schdData.logs}}
<div class="col-md-3">
<div class="card">
<div class="card-body">
<p class="card-text">{{{objst this}}}</p>
</div>
</div>
</div>
{{/each}}
</div>
i have created a partial view layout using bootstrap to display a single panel. whenever I call a partial view I use this layout and pass the section name on the ViewBag.
<div class="panel panel-default">
<div class="panel-heading">
#ViewBag.SectionName
</div>
<div class="panel-body">
<div class="container">
#RenderBody()
</div>
</div>
</div>
However, the issue is that inside a partial view, I may be calling another partial view using the same layout multiple times. This would result in nested panels with multiple levels.
The issue is, that I want to add a header element to the panel heading element containing the section name depending on the partial view nesting level. If we had three levels, the code would look like this:
<div class="panel panel-default main-content-panel">
<div class="panel-heading">
<h1>Section 1</h1>
</div>
<div class="panel-body">
<div class="container">
<div class="panel panel-default main-content-panel">
<div class="panel-heading">
<h2>Section 2</h2>
</div>
<div class="panel-body">
<div class="container">
<div class="panel panel-default main-content-panel">
<div class="panel-heading">
<h3>Section 3</h3>
</div>
<div class="panel-body">
<div class="container">
Some content and respective closing divs....
how could I accomplish this? An idea or solution that does not uses JS will be appreciated.
JS would certainly be the easiest way, but since you've explicitly disallowed that, the only option is to evaluate how many nesting levels there will be before they're actually rendered.
There's not a whole lot of detail here about what data structure represents these sections, but generally, you'll need to do a recursive count of the lower levels while rendering the upper level, and change the heading accordingly in the partial responsible for it. I can't give any more guidance than that without more code.
Long and short, you only get one bite at the apple when a partial is being rendered. You can't wait until the end and then modify something that happened in a previously rendered partial.
I try to have a second responsive ui-grid inside a block of the first one, but I'm not able to get something like this to work.
This would behave like a 25% 25% 50% fluid responsive layout.
Here is a short sample of what I mean:
<fieldset class="ui-grid-a ui-responsive">
<div class="ui-block-a">
<fieldset class="ui-grid-a ui-responsive">
<div class="ui-grid-solo">
<div class="ui-block-a">
</div>
</div>
<div class="ui-block-a">
</div>
<div class="ui-block-b">
</div>
</fieldset>
</div>
<div class="ui-block-b">
<img src="images/jquery-logo.png" width="100%" />
</div>
</fieldset>
Here is a sample of what i get now:
http://jsfiddle.net/j5zbB/
The idea shall be that: at bigger screen sizes, two form elements are positioned on the same line, and at smaller sizes, they are positioned below each other.
UPDATE
Please, let me better explain with pictures the idea beyond this question.
This would be the nested layout at bigger screen sizes, like in a tablet, landscape:
This would be the nested layout in a tablet, portrait:
This would be the nested layout at very small screen sizes, like in a phone:
Maybe there is another way to achieve something like that without ui-grids, or someone can help? Thanks to all in advance.