Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I'm using bootstrap columns which allows a maximum of 12. I need two different divs in one row, one having 12 cols and the other 4. I need the one of 4 cols to appear on the one of 12. Means both of divs will be in the same row. Please how do I achieve this. Thanks.
First of all you can split main container to two columns, for example 50/50 and inside they you can put next columns.
<div class="container">
<div class="col-md-6>
<div class="col-md-3></div>
<div class="col-md-3></div>
<div class="col-md-3></div>
<div class="col-md-3></div>
</div>
<div class="col-md-6>
<div class="col-md-1></div>
<div class="col-md-1></div>
<div class="col-md-1></div>
<div class="col-md-1></div>
<div class="col-md-1></div>
<div class="col-md-1></div>
<div class="col-md-1></div>
<div class="col-md-1></div>
<div class="col-md-1></div>
<div class="col-md-1></div>
<div class="col-md-1></div>
<div class="col-md-1></div>
</div>
</div>
You can make it by following the below mentioned steps:
Go to Customize Bootstrap page.
Increase the value of #grid-columns variable from 12 to 16.
Compile and Download the modified css.
And then you will be able to use 16 columns in a row instead of 12 as shown below.
<div class="row">
<div class="col-xs-12"></div>
<div class="col-xs-4"></div>
</div>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I am new to UI,
creating one blog layout in HTML with Bootstrap4, I am following this layout...'removed', how to create first div fixed and second scroll-able and then one full width banner and so on.
Before posting a question here, you need to try something from your end then if you are stuck, you can post questions here to get an answer.
First Step:
You need to learn the basics of HTML & CSS. (https://www.w3schools.com/html/html_css.asp)
To make a section FIXED, you need to use the POSITION property in CSS. (https://www.w3schools.com/css/css_positioning.asp)
I guess these are enough for you to get started.
Happy learning!
div class="container-fluid">
<div class="w-100 bg-dark" style="height: 50px;">
</div>
<div class="row" >
<div class="col-6 bg-primary" style="height: 50vh;">
<div class="position-fixed bg-danger">
</div>
</div>
<div class="col-6 bg-secondary " style="height: 100vh;">
</div>
</div>
</div>
don't forget to put height and width
///
Other and I think better way :
<div class="container-fluid">
<div class="row">
<aside class="col-2 px-0 fixed-top bg-danger">
</aside>
<main class="col offset-2 h-100">
</main>
</div>
This question already has answers here:
Bootstrap Fluid grid system with different height
(5 answers)
Bootstrap row with columns of different height
(3 answers)
Closed 5 years ago.
What I want to achieve using the grid system of Bootstrap 3 is the following:
Image what I imagine.
However, what I get with the normal row and col is the following:
This is what I get.
Is there a ways how I can make the first element of the second row fit exactly the first element of the first row by keeping the different heights and preferably by keeping the order of the elements.
Something like this?
https://codepen.io/anon/pen/RgBqNr
<div class="row">
<div class="col-xs-6">
<div style="background: red">
Hello<br/><br/><br/>
</div>
<div style="background: blue">
Hello<br/><br/><br/>
Again<br/><br/><br/>
</div>
</div>
<div class="col-xs-6">
<div style="background: cyan">
Hello<br/><br/><br/>
Again<br/><br/><br/>
</div>
<div style="background: red">
Hello<br/><br/><br/>
</div>
<div style="background: blue">
Hello<br/><br/><br/>
Again<br/><br/><br/>
</div>
</div>
</div><!--/row-->
Maybe you are trying to do something like an application named
Trello.
You can try that application first.
And you can do the styling with this reference : Trello CSS Guide
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I have just started to learn bootstrap. And this is the first time I have ever used grids for a layout. Something I don't understand about grids is where I should put my content.
Should I do like this:
<div class="row">
<div class="col-md-12">
<p> My content </p>
</div>
</div>
Or should I use a parent element for my content like this
<div class="row">
<div class="col-md-12">
<div> or <footer> or <aside> or <content> etc
<p> My content </p>
</div> or </footer> or </aside> or </content> etc
</div>
</div>
If the answer is the second. Is there ever a reason where it is okay to put content directly into the column? Or have I misunderstod everything and it should be done in a completly other way?
What is "best practice"?
The best way is like this:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="your-widget-name">
Widget code here…
<div>
</div>
</div>
This way, your widgets can be used across multiple layouts.
Using separate divs for the grid can increase the amount of markup, but make the code easier to maintain.
Content should be put inside your column as stated in bootstrap documentation
Both are correct in your example since grid is just for layout, you can put any block or inline elements in it.
Most important rule to follow - .container is parent,its child's are .row, .col goes inside rows and your content goes in .col.
Eg. You want to put Image on center with paragraphs on side.
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-4">
<p>Lorem ipsum</p>
</div>
<div class="col-xs-4">
<img src="http://placehold.it/150x150" alt="image"/>
</div>
<div class="col-xs-4">
<p>Lorem ipsum summun</p>
</div>
</div>
</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I am always having this issue and I always solved it using webkit-columns. But I wanna know if there is a better way to do it with Bootstrap.
4 boxes inside a grid.
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
</div>
This gives me the 4 boxes but the last box have more margin than the others. I want all of them to have the same margin, but 0 on the corners like the image:
--- EDIT FOR CLARIFY ---
For Clarify my question im gonna add this jsfiddle you see the blue box ? i want to the red boxes start and end with the blue box, can you do that ? not add margin to the blue box, the blue box must be 100% and the other box must be aligned with the first and end of that box
Here i do what i want: Jsfiddle but here im using -webkit-column just for show you, if you can do this with bootstrap that would be nice.
Im gonna share this Demo I created. I hope it gets you somewhere.
HTML
<div class="container">
<div class="row">
<div class="col-sm-3 custom-col">
<div class="child-div">
</div>
</div>
<div class="col-sm-3 custom-col">
<div class="child-div">
</div>
</div>
<div class="col-sm-3 custom-col">
<div class="child-div">
</div>
</div>
<div class="col-sm-3 custom-col">
<div class="child-div">
</div>
</div>
</div>
</div>
CSS
.col-sm-3.custom-col{
height:250px;
/* outline: 1px solid green; */
padding: 5px;
}
.child-div{
height:100%;
width:100%;
background-color:red;
}
UPDATE
I updated the fiddle. HERE
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I want 9 responsive <div> cells that fills the whole page like images below:
http://oi57.tinypic.com/2hf5lrk.jpg
I am using ionic framework. If the framework can help, please provide me an example. If not, the pure css would be great too.
well, see: http://ionicframework.com/docs/components/#grid-even
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div><div class="row">
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
</div><div class="row">
<div class="col">7</div>
<div class="col">8</div>
<div class="col">9</div>
</div>