I have created a group of cards in angular using a for loop like this:
<div class="row">
<div *ngFor="let dev_data of data" class="col-3">
<div class="card shadow">
<div class="card-body">
</div>
</div>
</div>
</div>
Here for one row there will be 4 cards,
In the bigger screen's the data inside the cards are being displayed properly, but when I open my application in mobile or ipad the cards are completely going out:
like this:
Bootstrap has predefined classes that help in displaying contents in responsive way. By using the class "col-3" you are saying bootstrap to display the contents to take 3 columns(Total of 12 Columns in Bootstrap) of the view no matter the display size.
So you can try like below code to instruct bootstrap to display content for 3 columns in md(Medium screen) and lg(Large Screen) and sm(Small Screen) to take the full width.
<div class="row">
<div *ngFor="let dev_data of data" class="col-md-3 col-lg-3 col-sm-12">
<div class="card shadow">
<div class="card-body">
</div>
</div>
</div>
</div>
Bootstrap Grid
Related
I am trying to align the content to the existing container above, however I am unable to successfully commit this as the container is located in a row because I wanted the file directory div on the left which pushes the container to the right of course.
Assigning a position: fixed; to the file directory div would fix the issue however it would not maintain the responsive web design which Bootstrap offers with its superior system.
As you can see the content is not in the right spot.
I have tried numerous things in css however none of these didn't feel right. For now I have tried playing with the col system of Bootstrap for a bearable outcome. Furthermore the image I provided of the website is in fact the result of this piece of code in case one wonders whether the image corresponds to the code.
<div class="container"><h2><i class="fas fa-archive" style="color: darkgoldenrod"></i> Archive Register({{ $files_total }})</h2></div>
<div class="container-fluid">
<div class="row justify-content-between">
<div class="file-list col-lg-2">
<h3 class="ml-5"><i class="fas fa-file-alt" style="color: darkgoldenrod"></i> File list:</h3>
<div class="file-list ml-5">
<p>List</p>
</div>
</div>
<div class="content col-lg-9">
content
</div>
</div>
</div>
<div class="file-list col-lg-2">
change to
<div class="file-list col-lg-3">
your col need 1 more col as it is a 12-grid column.
matching it to the right column
<div class="content col-lg-9">
This would be because you are using a container for the heading, which is based on a fixed with of the screen, and container fluid which is the full width on the screen.
You could change the heading container to something like this to align it with your content column? (Presuming you are using Bootstrap 4)
<div class="container-fluid">
<div class="row">
<div class="col-lg-9 offset-lg-9">
<h2><i class="fas fa-archive" style="color: darkgoldenrod"></i> Archive Register({{ $files_total }})</h2>
</div>
</div>
</div>
guys. I have a little problem here working with bootstrap. I am trying to make a div container with a row containing 3 columns equally proportioned in width :
<div class="row">
<div class="col-md-4" style="background:red;">logo</div>
<div class="col-md-4" style="background:blue;">content</div>
<div class="col-md-4" style="background:yellow;">content+imgs</div>
</div>
</div>
The problem I have is that I want the column with 'logo' to be the second one (after 'content') on xs/sm devices or at resizing the browser window. I tried with push and pull, but I want the columns to be one above each other, not inline, as at the md devices. I have no clue how to do that, any help? :)
Using order classes with bootstrap, you can change the order of the columns responsively.
This example will put the second column first on XS and SM screens.
<!--bootstrap 4-->
<div class="row">
<div class="col-md-4 order-2 order-md-1">first</div>
<div class="col-md-4 order-1 order-md-2">second</div>
<div class="col-md-4 order-3 order-md-3">third</div>
</div>
edit:
For bootstrap 3 (3.3.7) you will need to use push & pull classes. In your case, you would have to make the logo the second column. Mobile counts as the starting point in bootstrap development.
<!-- bootstrap 3 -->
<div class="row">
<div class="col-md-4 col-md-push-4" style="background-color:red;">content</div>
<div class="col-md-4 col-md-pull-4" style="background-color:blue;">logo</div>
<div class="col-md-4" style="background-color:yellow;">content+imgs</div>
</div>
Im making my website responsive for devices but i want to know if i can set a grid or margin/padding property for iphone so i can place it nicely and not 2 paragraphs in eachother.
I already tried to grid some text but it still looks weird in eachother this is my code:
<div class="row">
<div class="col-xs-1 col-lg-12">
Thisismy Test
</div>
</div>
You haven't tagged this as being a Bootstrap grid, but I'm assuming it is because of your grid classes.
You mention that you want to stop the navbar-brand text from wrapping on an iPhone so I'm wondering if there's there a reason why you wouldn't make the navbar-brand parent wider?
It looks to me as if it would need to be minimum col-xs-5
Here's a example showing both your existing HTML and the modification
https://codepen.io/panchroma/pen/OgQxBw
HTML
<div class="row">
<div class="col-xs-5 col-lg-12">
Thisismy Test
</div>
</div>
If you want to show the paragraph in entire row in mobile , use col-xs-12 class which will occupy the entire row space and display everything in one row in all th escreen sizes.
<div class="row">
<div class="col-xs-12">
Thisismy Test
</div>
</div>
If you want to display 2 paragraphs in row side by side use col-xs-6 for each div
<div class="row">
<div class="col-xs-6 col-lg-12">
Thisismy Test
</div>
<div class="col-xs-6 col-lg-12">
Thisismy Test
</div>
</div>
If you want to write your own CSS , you can do that by using media queries to define custom CSS for different screen sizes https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
I am using Bootstrap 3 and on mobile devices I'd like to vertically stack all the div's (sidebar & content) and position the left sidebar below the main container (currently to the right of the left sidebar) on mobile (xs) devices. The HTML, looks like this
<div class="container">
<div class="row">
<div class="col-sm-3 col-xs-push-9"> Sidebar</div>
<div class="col-sm-9 col-xs-pull-3"> Main Container</div>
</div>
The problem with above is that, using col-xs-push-9 on sidebar and col-xs-pull-3 on main container they appear in reverse order on large(lg) medium(md) and (sm) devices. I do not want to reverse the order but only want to have the left sidebar below the main container on extra small mobile devices.
I want a bootstrap solution not a JS / jQuery solution.
Pls help.
Regards,
dk
If you think "mobile-first", layout the columns in the desired mobile order first, then use push/pull to adjust the columns for larger screens..
<div class="container">
<div class="row">
<div class="col-sm-9 col-sm-push-3"> Main Container</div>
<div class="col-sm-3 col-sm-pull-9"> Sidebar</div>
</div>
</div>
http://codeply.com/go/8g4UL0J43K
Bootstrap inherits properties for larger grids from the properties set for smaller grids. Therefore you have to set the pull and push to 0 for grids larger than xs, sm, like this:
<div class="container">
<div class="row">
<div class="col-xs-3 col-xs-push-9 col-sm-push-0"> Sidebar</div>
<div class="col-xs-9 col-xs-pull-3 col-sm-pull-0"> Main Container</div>
</div>
</div>
In Bootstrap 4 you use ".order-*-{n}"
This example has 3 columns. On a large view they are evenly spaced and in the same order as the HTML. On a medium view, HTML columns 1 and 3 are half width and across from each other while the middle HTML column is dropped to the bottom and full width. On small views they are each full width in HTML column order 1,3,2.
<div class="row">
<div class="col col-sm-12 col-md-6 col-lg-4 order-1"></div>
<div class="col col-sm-12 col-md-12 col-lg-4 order-sm-last order-lg-2"></div>
<div class="col col-sm-12 col-md-6 col-lg-4 order-3"></div>
</div>
I have four columns using the Bootstrap column classes
<div class="col-md-3">
#include('schedulizer.classes-panel')
#include('schedulizer.time-span-options-panel')
#include('schedulizer.other-options-panel')
</div>
<div class="col-md-9 col-centered">
#include('schedulizer.schedule-panel')
</div>
They look like this:
In mobile view, the schedule, the main element, is pushed all the way to the bottom like this:
Is there any way to "push" the column to the top when a smaller screen resolution is detected?
Yes. Just rearrange them and use push and pull
<div class="col-md-9 col-centered col-md-push-3">
#include('schedulizer.schedule-panel')
</div>
<div class="col-md-3 col-md-pull-9">
#include('schedulizer.classes-panel')
#include('schedulizer.time-span-options-panel')
#include('schedulizer.other-options-panel')
</div>
demo: http://www.bootply.com/GdWNOo6stu