I've got a view with Angular (v.5) components, that uses Bootstrap for making the layout in the screen. So I've got various controls, one at the left, which uses most of the space (col-md-8), and two controls which are inline, in the right part (col-md-4).
Even trying col-sm I notice that in little displays (less than 1280px), the two components in the right, get overlapped one over the other. Check:
This is how it looks in big screens, the intended behavior
But one of them "mounts" over the other like this, when you make the window a little smaller
It even reaches this point...
But when you make the window really really small, it looks like this, which is fine in my opinion.
I want to do that one of these components, actually just puts in top or bottom side of the other, or simple get advantage of all the free space, instead of getting overlapped by the other like it currently does.
This is the current code of this header of my template, give it a look:
<div class="row">
<div class="col-md-8">
<segments [config]="config"></segments>
</div>
<div class="col-md-4 date-positioning">
<div class="row">
<div class="col-md-4 col-sm-4">
<granularity [config]="config" ></granularity>
</div>
<div class="col-md-8 col-sm-8">
<date-picker-wrapper [config]="config" [dateranges]="dateranges" [doubleDateRange]="true" ></date-picker-wrapper>
</div>
</div>
</div>
</div>
What you see are the granularity and daterangepicker components, the segments one is the component you see in the final image, which occupies most of the left side of the screen (but there's a reason for that)
So, any ideas on how to style this properly with Bootstrap, so this weird behavior doesn't happen?
Related
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.
This question already has an answer here:
How to left column fixed and right scrollable in Bootstrap 4, responsive?
(1 answer)
Closed 3 years ago.
I'm currently working on an HTML page that uses Bootstrap4. My idea is to have a split screen layout with a logo on the right side and a signup form on the left. I also need the page to be scrollable because the signup form is on the long side. So far finding a tutorial where the page scrolls has been an issue.
However, I have gotten it to work like so:
<div class="container-fluid h-100">
<div class="row h-100">
<!-- 1st half -->
<div class="col-sm-6 col-2 h-100 py-2 d-flex align-items-center justify-content-center fixed-top" id="left">
<h5 class="hidden-xs-down">
<!--First half content here (fixed col)-->
<p> I don't scroll </p>
</h5>
</div>
<div class="col-sm-6 invisible col-2"><!--hidden spacer--></div>
<!-- 2nd half -->
<div class="col offset-2 offset-sm-6 py-2">
<!--Second half content here (scrollable col)-->
<p> I do scroll </p>
</div>
</div>
</div>
CSS is pretty simple:
body, html {
height: 100%;
}
This code works perfectly, however is is not responsive. I am hoping to make it so that when the window get's smaller (or if a user is on mobile) the 1st column does on top and the second column is on the bottom.
Any idea on how I can accomplish this? Thanks.
TBH I'm not getting why you are using that col-2, col and offset-2 maybe I understood something wrong but based on what I saw in the fiddle (I create with your markup). This isn't necessary at all for what you want to achieve. Instead you should use col-12 and an appropriate offset-sm. In BS3 it was col-xs for mobile devices but that changed.
I adapted the markup in a way that it does what your question asks for! All from my perspective useless bootstrap classes were removed that influenced the grid layout. It was necessary to add one line of CSS to reset position:fixed when size reaches mobile breakpoint e.g. col-XX. I colored the <div> and added some content to better see the result.
https://jsfiddle.net/vaefh780/4/
Context, my page is divided like so:
Left hand side (col-xs-8)
Right hand side (col-xs-4)
The right hand side should remain fixed and not scroll (there are some elements on the left hand side that need scrolling). The right hand side has the following code:
<div class="col-xs-4">
<div class="row">
<div class="col-xs-10 col-xs-offset-1>
<div class="table-responsive">
<table>
The problem is that the row doesn't seem to expand the full width of the col-xs-4, and I'm not sure why. If I try to add a width:100% style on the row, it seems to go crazy and expand to a normal browser window even though it's nested within a col-xs-4. And the reason this is a problem by the way is that the table needs to be wider than it is because now it's completely illegible.
I've been doing some troubleshooting but am stuck. It looks like the problem is that the col-xs-4 is not even "registering" on the page. If you do an inspect element, the col-xs-8 of the left hand side is visible, but the col-xs-4 is not, which indicates that the col-xs-8 isn't closed, but I've looked everywhere and it is....
Anyways, would love help, here's the working staging environment link since this is a little hard to explain: https://hidden-tundra-8656.herokuapp.com/request
I am currently working on a OpenCart project, and one of the pages requires a structure involving multiple images, being positioned closely together (see below).
All of the images that will be used are likely to be different sizes, but will need to be resized to a similar size (not the exact same size, but around the same). OpenCart's resize function is being used to resize these images, however the result leaves unwanted white space! (see below)
Is there any way to re-factor the code so the resized images have no white space around them?
Any help or guidance would be greatly appreciated
EDIT:
<div class="tbl">
<div class="tbl-row">
<div class="tbl-col">
<div class="frame">
<img class="imageFeatured" src="images/my-image.png" />
</div>
</div>
</div>
</div>
I have used Bootstrap 3 for a couple of projects recently and love the way how simple it can work. Nevertheless I now have some questions where I don't really know how to use it. If I'm having a few divs which are tiled, I'm wondering how the best way would be to change the order, or the position within the grid on different breakpoints. I made a simple visualisation to explain my problem:
On the left hand side, you see the state on large desktops, and on the right hand side how it should look like on the next smaller breakpoint. The problems I currently have are: How would I handle the blue div on .row1, to have the red div on .row2 next to it on the right in a new row.
And on the breakpoints, would it be possible for the red div, to move to another row?
I'm searching for a Bootstrap/CSS only way, but if it is definitely not working without JS/jQuery, I would appreciate those suggestions too.
Hope you get my point. Thanks!
Edit: Related image to my other question in #Danko 's answer, which was how to switch tiles on different breakpoints.
You will need to manage the same logic but don't slice your desgin in two rows, just one:
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-6 B"></div>
<div class="col-md-4 col-lg-3 G"></div>
<div class="col-md-4 col-lg-3 G"></div>
<div class="col-md-12 col-lg-6 O"></div>
</div>
</div>
Check this DemoBootply