I have a simple bootstrap 3*2 grid and I would like the cell to expand and take all space in the grid when hovered.
Here is the code snippet of the initial position :
<div class="container">
<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>
Examples :
I would like the column 2 to expand only to the left, right and down. And fill the grid space
Or the column 1 to expand only to the right and down. And fill the grid space
Here are visual descriptions of the animation:
Initial state
Final state
Related
According to this link, you can use column wrapping with bootstrap.
Here a part of my code:
<div class="row">
<div class="col-12">
1
</div>
<div class="col-7">
2
</div>
<div class="col-12">
3
</div>
<div class="col-6">
4
</div>
<div class="col-6">
5
</div>
</div>
It works, but is it the best solution? Or is it necessary to create a row each time, which would give:
<div class="row">
<div class="col-12">
1
</div>
</div>
<div class="row">
<div class="col-7">
2
</div>
</div>
<div class="row">
<div class="col-12">
3
</div>
</div>
<div class="row">
<div class="col-6">
4
</div>
<div class="col-6">
5
</div>
</div>
Thanks!
No, you no longer need rows. From the Bootstrap 5.0 documentation:
The .col-* classes can also be used outside a .row to give an element a specific width. Whenever column classes are used as non direct children of a row, the paddings are omitted.
So you can use your first method.
Bootstrap rows are set to wrap by default. So if two columns' width sum up greater than 12, the 2nd one will be wrapped into new line:
<div class="container">
<div class="row">
<div class="col-9">
.col-9
</div>
<div class="col-4">
.col-4
<!-- Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped
onto a new line as one contiguous unit. -->
</div>
<div class="col-6">
.col-6
<!-- Subsequent columns continue along the new line. -->
</div>
</div>
</div>
If the default behavior serves you well, you don't have to put new rows each time.
The only time you would need new rows is when your intend to make them new rows:
<div class="container">
<div class="row">
<div class="col-5">1</div>
</div>
<div class="row">
<div class="col-6">2</div>
<div class="col-3">3</div>
</div>
</div>
If I don't put a new row for column #2 and #3, column #2 will be on the same row of column #1, by default.
To me, I prefer the 2nd way because that shows my intention of wanting columns to be in new rows. Others don't have to guess or know Bootstrap default behavior.
I'm trying to learn bootstraps grid system. From what I understand about the grid system, the code below should produce 2 columns. One column with 3 rows on the left, and one column with 1 row on the right and they should never stack. Unfortunately, this is not the case and rather than never stacking, they are always stacked and no matter what I try, I can't get the result I want. Does anyone see any issues with this code or is it something deeper that I need to look into?
I thought it might be something to do with my display/viewport size, but http://viewportsizes.com/mine/ says my viewport size is 1707 x 961, which from what I understand should not be small enough to force the columns to stack.
<head>
<meta name="viewport" content="width=device-width" />
<title>Overhead</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="col-6">
<div class="row">
Top Left
</div>
<div class="row">
Middle Left
</div>
<div class="row">
Bottom Left
</div>
</div>
<div class="col-6">
Right
</div>
</div>
</body>
You should first define rows before columns. For example the code below will create a row and 2 equal columns.
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</body>
here is the bootply fiddle link
https://www.bootply.com/WtWRhCVl8e
Columns go into rows, you have it the other way around. For instance:
<div class="container">
<div class="row">
<div class="col-md-6">
left column
</div>
<div class="col-md-6">
right column
</div>
</div>
<div class="row">
<div class="col-md-4">
left column
</div>
<div class="col-md-4">
middle column
</div>
<div class="col-md-4">
right column
</div>
</div>
</div>
This will create two rows, the top row with two columns, each 50% of the row, and the bottom row with three columns, each 33.33% of the row.
I hope this helps.
A row has a negative margin of -15px on both side of the element. A column has a positive padding of 15px on both sides to match the negative margins created by the row. So, when you create a row, it should be immediately followed by a column.
I think you are looking for the one below.
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12">
Row 1 on Col 1
</div>
</div>
<div class="row">
<div class="col-xs-12">
Row 2 on Col 2
</div>
</div>
<div class="row">
<div class="col-xs-12">
Row 3 on Col 3
</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12">
Row 1 on Col 2
</div>
</div>
</div>
</div>
</div>
Take a look at this pen that I have created for you.
https://codepen.io/vijayrkumar/pen/JpZROy
<div class="row">
<div class="col-md-6">
Left column
</div>
<div class="col-md-6">
Middle Column
</div>
<div class="col-md-6">
Right Column
</div>
</div>
Consider this code. Why is the last element Item 5 always in a new line / row? It is supposed to be in the same line as the other items.
Note: Plnkr.co preview maybe needs to be resized to untoggle the stackable
class.
<div class="ui container">
<div class="ui centered grid">
<div class="row">
<div class="ui stackable five column grid">
<div class="column">
Item 1
</div>
<div class="column">
Item 2
</div>
<div class="column">
Item 3
</div>
<div class="column">
Item 4
</div>
<div class="column">
Item 5
</div>
</div>
</div>
<div class="row">
New Row
</div>
</div>
Maybe try to use <div class="ui stackable six column grid">?
Remove grid class on <div class="ui centered grid"> (semantic doesn´t play nice when nesting grid class elements).
Working Fiddle
Screenshot:
I am really struggling with twitter bootstrap. I have the following spans, which add up to 12, yet the thrid item appears on a separate line.
<div class="container">
<div class="row">
<div class="span6 offset6">
<div class="span2">Contact</div>
<div class="span2">About Us</div>
<div class="span2">Blog</div>
</div>
</div>
</div>
Here is what I get...
Your typo is span 6, it should be span6
<div class="span 6 offset6">
Should be:
<div class="span6 offset6">
Not doing so will place a small div to the left of your three span3's, thus moving them a bit sideways.
Updated: You will need to place the div's in their seperate row or row-fluid div's to align them properly.
<div class="row">
<div class="span6 offset6"></div>
</div>
<div class="row">
<div class="span3"></div>
<div class="span3"></div>
<div class="span3"></div>
</div>
I'm attempting to correctly vertically align offsetting elements using Twitter Bootstrap with a fluid grid. (Note: Grid is customized to 30 columns)
Considering the red boxes, this is the attempted div placement: http://imgur.com/IkB2G
This is the current actual placement with my code: http://imgur.com/oJ2mG
Here is the code I am using. Unsure how to get the lower red box to move into the empty space above it, per the images.
<div class="container-fluid nomargin">
<div class="row-fluid span30 nomargin"><div style="height:10px"></div></div> <!-- Vertical spacing between menu and content-->
<div class="row-fluid">
<div class="span4"></div>
<div class="span16 white-box">
<!--Body content-->
<div style="height:100px"></div>
</div>
<div class="span6 white-box">
<!--Body content-->
<div style="height:300px"></div>
</div>
<div class="span16 white-box">
<!--Body content-->
<div style="height:100px"></div>
</div>
</div>
You need to think of it as 2 columns, and in the left column you have nested rows. I can't make out the proper sizes from the code you posted. But hopefully this code will give you some inspiration.
<div class="row">
<div class="span18">
<div class="row">
<div class="span18">This is a row on the left side.</div>
</div>
<div class="row">
<div class="span18">This is a row on the left side.</div>
</div>
</div>
<div class="span12">
This is the content on the right side.
</div>
</div>