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>
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
I have 4 cols as follows on desktop, and I would like them to reorder in such a way that it appears as depicted below on mobile.
Do I need custom css for this?
(I Cannot post images yet, so here is the link to the image:)
https://imgur.com/a/sasLETe
I have tried keeping them in parent cols of two in each, but to no-avail.
I am a backend guy, so I am not too familiar with frontend stuff.
Current HTML:
<div class="row">
<div class="col-md-6 col-sm-12">
<div>A</div>
<div>C</div>
</div>
<div class="col-md-6 col-sm-12">
<div>B</div>
<div>D</div>
</div>
</div>
I would like it to behave as I have depicted in the image.
How do I go about doing this? I do not want to resort to JavaScript. Any help is appreciated.
Thanks.
If you play with your html structure then no need to have custom css.
Just update classes and content in your code as follows:
<div>
<div class="row">
<div class="col-md-6 col-sm-12">A</div>
<div class="col-md-6 col-sm-12">B</div>
</div>
<div class="row" >
<div class="col-md-6 col-sm-12">C</div>
<div class="col-md-6 col-sm-12">D</div>
</div>
</div>
```
You can use this code , bootstrap only
<section>
<div class="container my-5">
<div class="row">
<div class="col-md-6">A</div>
<div class="col-md-6">B</div>
</div>
<div class="row">
<div class="col-md-6">c</div>
<div class="col-md-6">d</div>
</div>
</div>
</section>
I want to make a layout like this, above picture for wide screen and below for small screen. Please suggest me how to do this.
You can something like this is you are using bootstrap,
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
green space...give height as required
</div>
</div>
<div class="row">
<div class="col-md-6">
button
</div>
<div class="col-md-6">
button
</div>
</div>
</div>
</body>
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.