I'm wondering what is the best way to stack a div? Would I be best off using the div class table? Here is my code
<div class="row">
<div class="col-md-5 content1">
[rotatingtweets screen_name='lauterbachgroup']
</div>
<div class="col-md-4 content2">
<p>Gallery</p>
</div>
<div class="col-md-3 content3">
<p>content3</p>
</div>
<div class="col-md-5 content4">
<p>content4</p>
</div>
</div>
I am trying to get the last content box to flow underneath the first box. I think I may be overthinking it but I have a couple more things I would like to try but, any advice would be great.
Related
I am making a project based on the grid. I am using bootstrap, CSS, and HTML for making the grid. I need to display a grid like this Image. But the row span is not working properly. I am using fully div structure, not the table. My code is:
`
<div>
<div class="row">
<div class="col-md-4">
</div>
</div>
<div class="col-md-4">
</div>
<div rowspan="2" class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
<div class="col-md-4">
</div>
</div>
</div>
`
First I would suggest using indenting to make it more readable.
You would just create 3 columns next to each other and in the middle one start a new row.
In the code example I create 1 row and 2 columns that are full width, you could also just create 2 rows.
<div class='container'>
<div class='row'>
<div class='col-4 col1'>1</div>
<div class='col-4'>
<div class='row'>
<div class='col-12 col2'>2</div>
<div class='col-12 col3'>3</div>
</div>
</div>
<div class='col-4 col4'>4</div>
</div>
</div>
https://codepen.io/anon/pen/XOYZRG?editors=1100
Use class="short-div" at col-md-6 in both the div. Remove col-md-6 from both the div, also remove rowspan.
I am working on my personal website and i'm trying to make a new row with Bootstrap 4. The row has an H1 above it. Whatever I'm trying, the row won't move to the next line. I tried different solutions, inline, br, different rows, nothing works. Can somebody help me out?
This is my current HTML code:
<h1>Projecten</h1><br>
<div class="row">
<div class="col-sm">col</div>
<div class="col-sm">col</div>
<div class="col-sm">col</div>
</div>
I didn't change anything on the CSS code, just the default bootstrap code.
Click here for a screenshot
With bootstrap is
<div class="row">
<div class="col">
<h1>Text</h1>
</div>
</div>
<div class="row">
<div class="col-md-4">
<p>col</p>
</div>
<div class="col-md-4">
<p>col</p>
</div>
<div class="col-md-4">
<p>col</p>
</div>
</div>
I am trying to adapt a layout on Bootstrap that I got from the designer. Two columns in the content has a small spacing, that I couldn't achieve with direct column-spacing (as it gives too much gap). Thus, I tried wrapping everything into a row and adding sub-columns inside my main columns. Here in the code, it's more clear:
<div class="container">
<div class="col-md-12 banner"></div>
<div class="row">
<div class="col-md-8">
<div class="col-md-12 leftSide">
</div>
<div class="col-md-12 leftSide">
</div>
</div>
<div class="col-md-4 rightSide">
<div class="col-md-12">
</div>
</div>
</div>
</div>
Now the spacing seems good but as I wrapped it in a row (I think), the right panel overflowed more then the banner.
It can be seen more clear on the fiddle: http://www.bootply.com/gMBrLvaK5C
The problem is the 'rightSide' panel.
How can I keep that spacing between 'leftSide' and 'rightSide', and fix the overflowing of the right column (because the spacing gets too much if I try achieving spacing with columns)? Or what is the best way to achieve that?
this is my personal solution, instead of add a class on the columns, create a div inside of a column, then you can place a div.banner and div.block like my example:
http://www.bootply.com/PEIiDnp9VD
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="banner"></div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="block"></div>
</div>
<div class="col-md-4">
<div class="block"></div>
</div>
</div>
</div>
if you want less space between the columns you can simply override Bootstrap col-md-* class by adding a class on the columns changing the padding left and right.
First of all, you need to follow proper wrapping of rows and columns. If you want consistency you need to make sure all columns are wrapped into a row.
<div class="row">
<div class="col-md-8 leftSide">
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
<div class="col-md-4 rightSide">
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
</div>
Then apply custom margins and styling to elements inside of the columns, not columns themselves.
http://www.bootply.com/g6eLHRd1tH
i have a problem with my website: screenshot.
How do I make what I circled be in the middle, parallel with the navbar?
This is my code :
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12 text-center">
<div class="thumbnail">
<img src="" alt="">
<div class="caption">
<h4>label</h4>
<p>adadasdasd</p>
add to chart
</div>
</div>
</div>
</div>
</div>
I would recommend using the .col-md-offset-* class. So in your case when it has a width of 4 units, offset it 4 units with col-md-offset-4 so that it will have 4 units on each side and be centered.
First, maybe you can read this:
http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp
With the grid basic, you know col-12 is the whole width.
If you want to make it in the middle try this:
(This might not be the best code here, but should work).
<div class="col-md-4"></div>
<div class="col-md-4">
<YOUR BOX GO HERE>
</div>
<div class="col-md-4"></div>
Let me know if it was helpful.
Thanks
I'd have two "sections" in which I am using the bootstrap 3 scaffolding to style. I am having a hard time figuring out how I might have these maintain their column spacing while still be centered on the middle of the page. For example right now it is
<content><content> ---<space>---
and i want
---<space>--- <content><content> ---<space>---
Here is what i've got.
<div class=".container-fluid" id="aboutContent">
<div class="col-md-3">
<img src="../imgs/pic.jpg" alt="Joe Brunett" id="aboutPicture"/>
</div>
<div class="well col-md-4" id="desc">
<p> text<p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3"></div>
</div>
</div>
Offsets can be used to center a div but remember that it'll work only for even columns
<div class="col-md-8 col-md-offset-2"></div>
You can even change the break-point by replacing
<div class="col-md-6 col-md-offset-3"></div>
with
<div class="col-sm-6 col-sm-offset-3"></div>