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
Related
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.
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
<section class="container">
<div class="row">
<div class="col-md-8">
<h4>Het Parool</h4>
<h2>Help users choose the best online experience</h2>
</div>
<div class="col-md-4 float-md-right">
<img class="preview" src="img/parool-half.png" />
</div>
<div class="col-md-6 float-md-left">
<a class="btn btn-default" href="parool.html" role="button">Link</a>
</div>
</div>
</section>
I'm new to bootstrap and I am not totally getting the grid system.
I made a design here for desktop Desktop version
And I want it to become this on mobile Mobile version
Can someone explain to me how I can do this?
Thanks a lot!
I want create a layout like this:
I want use a responsive layout and the square above must be a metro tile. Which class I should use for do this, I'm not an expert of Bootrstrap, someone could help me to make a rude example? thanks
You might want to use this...
<div class="container">
<div class="row">
<div class="col-md-6">Half</div>
<div class="col-md-6">Half</div>
</div>
<div class="row">
<div class="col-md-12">Full</div>
</div>
<div class="row">
<div class="col-md-6">Half</div>
<div class="col-md-6">Half</div>
</div>
</div>
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.