I'm used to work with Bootstrap and for me the grid system is very clear in my head. Now, I'm trying to use the Angular Flex Layout and, even reading the documentation, I'm not understanding how exactly to use it.
For instance, I have the following code using Bootstrap 4:
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-8 col-lg-4">
Something...
</div>
<div class="col-sm-12 col-md-8 col-lg-4">
Something...
</div>
<div class="col-sm-12 col-md-8 col-lg-4">
Something...
</div>
</div>
</div>
How could I write the same code using Angular Flex Layout??
In angular-flex-layout we don't have a grid so you would have to approach it this way to achieve same result as using bootstrap grid system:
<div fxLayout="row wrap"
fxLayout.sm="column" >
<div fxFlex.lg="33.333%" fxFlex.md="66.667%" fxFlex.lt-sm="100%" style="background-color:red">
first-section
</div>
<div fxFlex.lg="33.333%" fxFlex.md="66.667%" fxFlex.lt-sm="100%" style="background-color:blue">
second-section
</div>
<div fxFlex.lg="33.333%" fxFlex.md="66.667%" fxFlex.lt-sm="100%" style="background-color:yellow">
third-section
</div>
</div>
do mind that responsive break points could be different.
Related
Nowadays, I am developing a simple web app but i have problem about bootstrap row and column.
This is my code.
<div class="row">
<div class="col-md-4">
<p>Col-1</p>
<p>Col-1</p>
<p>Col-1</p>
</div>
<div class="col-md-4">
<p>Col-2</p>
</div>
<div class="col-md-4">
<p>Col-3</p>
</div>
<div class="col-md-4">
<p>Col-4</p>
</div>
<div class="col-md-4">
<p>Col-5</p>
</div>
<div class="col-md-4">
<p>Col-6</p>
</div>
And this is my web app scrennshot
I want to remove white empty area but i don't know what can i do with bootstrap?
I am waiting your advices and ideas.
I find a solution. If you have a same problem please use this library.
Masonry Library
In bootstrap I have used this
<div class="row">
<div class="col-xs-12 col-md-4 col-lg-2">
Item 1
</div>
<div class="col-xs-12 col-md-4 col-lg-2">
Item 2
</div>
<div class="col-xs-12 col-md-4 col-lg-2">
Item 3
</div>
</div>
and thats it. I can create a very responsive 3 column row.
How about in WooCommerce WordPress? all I made is this.
<p class="form-row">
<div class="u-column2 col2-set">
<div class="u-column1 col-1">
</div>
</div>
<div class="u-column2 col2-set">
<div class="u-column1 col-1">
</div>
</div>
</p>
Is there any way to handle this kind of class? Can I make same as in bootstrap? If no what is the bootstrap equivalent in WooCommerce?
Your objective is to use Bootstrap CSS styling functions.
What I would recommend is copying the following lines of code : https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css
to a new .css file,say you name it bootstrap-copy.css. And then finally, use wp_enqueue_style (
https://developer.wordpress.org/reference/functions/wp_enqueue_style/ ) to add bootstrap-copy.css and then use the bootstrap classes with ease.
SO I'm dusting up on bootstrap atm, and decided as a practice to create some grids with offsets.
I have no idea what's going on.
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3
</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
These should make it three rows, first with a space in between the div's, etc
but it's just not working.
Any elucidation as to why would be appreciated. I append codepen link below.
https://codepen.io/anon/pen/QgXPae
Use
<div class="col-md-4 col-md-offset-4">.col-md-4 .offset-md-4</div>
it should be col-md-offset-3
you can see the documentation of grid in this link
[offsets][1]http://getbootstrap.com/css/#grid
i have 3 col in medium view in bootstrap shown in above image ie.
i want to achieve this type of view in small view is col-sm-*
my code is
<div class="col-md-8">
<div class="col-md-12">A</div>
<div class="col-md-12">C</div>
</div>
<div class="col-md-4">
<div class="col-md-12">B</div>
</div>
IN THIS way i can achieve my target in medium view but cant achieve in small view.how can i achieve the both view as well as in medium and small view as shown in image.
I suggest reading bootstrap css doc also this
But try this:
<div class="row">
<div class="all a col-sm-12 col-md-6">A</div>
<div class="all b col-sm-12 col-md-6">B</div>
<div class="clearfix"></div>
<div class="all c col-sm-12 col-md-6">C</div>
</div>
You can remove the <div class="clearfix"></div> if you don't care about the height mismatch
Here's a working jsfiddle
It's a bit of a stretch, but you could try this:-
<div class="col-md-8">
<div class="col-md-12">A</div>
<div class="col-md-12 visible-sm visible-xs">B</div>
<div class="col-md-12">C</div>
</div>
<div class="col-md-4 hidden-sm hidden-xs">
<div class="col-md-12">B</div>
</div>
Frankly, I can't think of any other solution using just HTML and CSS. Although, if scripts were involved, it would be a different case.
First of all, you shouldn't assign columns without rows, so you should have something like:
<div class="row">
<div class="col-md-8 col-xs-12">A</div>
<div class="col-md-4 pull-right col-xs-12">B</div>
<div class="col-md-8 col-xs-12">C</div>
</div>
So you pull right your B Div (therefore not clearing the next div, and spacing it out). And with col-xs-12 you assure that float won't be present in mobile.
Heres a pen
Now, if you want to remain with your code, I guess Shan answer is the best one.
Well, you could have the height of B and work with margins so the positioning go right, but that isn't considered best practices and could cause some bugs.
I'm using Bootstrap to build a Dashboard, but I'm rather new to Bootstrap and I'm having issues getting the final grid layout in the image below. The problem is that when I add the 4th column (Table), which will vertically house more data than the other 3 columns on the left (Widgets), is pushing down the bottom row content (Chart) like in this image. It looks easy, and I guess it has something to do with the 'colspan' or 'rowspan' features, but I can't figure it out.
Why is my chart getting pushed down like this, and how can I fix it?
You have to nest to achieve that.
For example:
<div class="container"
<div class="row">
<div class="col-md-9 not-right-table-content">
<!--nest content here, it's like a new grid-->
<div class="row">
<div class="col-md-4">
widget 1
</div>
<div class="col-md-4">
widget 2
</div>
<div class="col-md-4">
widget 3
</div>
<div class="col-md-12">
chart
</div>
<div class="col-md-12">
other content
</div>
</div>
</div>
<div class="col-md-3">
right table html here
</div>
</div>
</div>
#Nuno - Use below "HTML Code Snippet" or see my JS Fiddle (you might need to scroll boundaries to extend Result pane.)
<div class="container">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-9 not-right-table-content">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">widget 1</div>
<div class="col-lg-4 col-md-4 col-sm-4">widget 2</div>
<div class="col-lg-4 col-md-4 col-sm-4">widget 3</div>
<div class="col-lg-12 col-md-12 col-sm-12">chart</div>
<div class="col-lg-12 col-md-12 col-sm-12">other content</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">right table html here</div>
</div>
You can use below resources to know more about bootstrap:
Bootstrap - Approach to better, faster, stronger web development
Blasting off with Bootstrap