I have bootstrap container (div class="container") and there are two rows (div class="row").
But between those rows I need one full width horizontal line. Full width - I mean that it should be full width - outside container. This line is just for design issues, it would have background color and that is it. I do not know how to create it.
Divide your content into 2:
<div class="container">
<div class="row">
stuff here
</div>
</div>
<div class="line"></div>
<div class="container">
<div class="row">
stuff here
</div>
</div>
Related
I would like to have 2 columns, with the left column being a video (with aspect ratio 16x9) and the right column being a sidebar (with min-width). When the width of the window changes, the video should resize accordingly and the sidebar should maintain it's width.
However, I can't understand why there is a padding top for .ratio::before.
https://imgur.com/a/OtavqX3
Codepen: https://codepen.io/yewzy/pen/PoOxLyO
Here is my code:
<div class="container" id="main">
<div class="d-flex" id="row-main">
<div class="col-sm-9 col-12">
<div class="flex-grow-1" id="content">
<div class="ratio ratio-16x9">
<video id="vid"></video>
</div>
</div>
</div>
<div class="col-sm-3 col-12" id="sidebar">
<iframe class="chat"></iframe>
</div>
You should put the ratio class on the element you want to have the 16x9 aspect ratio. This just leaves the ratio-16x9 class on the parent div, and the ratio itself on the video.
Check out the CodePen ~ A Pen for Yew AMP & Ratio-16x9
I'm learning Bootstrap and I want to create simple div which is centered on the page.
I really like that auto-margin of container class, but it seems to be jump-changing based on breakpoints when resizing window width.
I want to make margins getting smaller smoothly until they become 0 when window is small enough.
I have tried to explicitly set one column layout like this:
<div class="container border">
<div class="row">
<div class="col-12">
<p>container with some content</p>
</div>
</div>
</div>
but the results are just the same and breakpoints all still used.
For that you shouldn't use bootstrap containers, because they have fixed width on breakpoints. For smooth transition you should manually set width to you container in % or vw and margin in same units.
There are two types of Bootstrap 4 Container: Fixed and Fluid.
Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it’s 100% wide all the time).
If you don't want the breakpoints, use the container-fluid class:
Use .container-fluid for a full width container, spanning the entire width of the viewport.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid border">
<div class="row">
<div class="col-12">
<p>container with some content</p>
</div>
</div>
</div>
If you must, you can manually override Bootstrap's responsive max-width settings.
.container.nobreakpoints {
max-width:100%;
width:800px; /* maximum width before margins appear */
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container border nobreakpoints">
<div class="row">
<div class="col-12">
<p>container with some content</p>
</div>
</div>
</div>
I need to build a pyramid of content blocks using the Foundation grid.
The problem is that for rows that are not divisible by 12, I cannot stack the next row in the pyramid so that it is centered under the row above it.
It is like I need a half column offset or something equivalent.
I thought about using .centered on a nested row, but that seems to have the same problem of dividing half columns.
<div class='row'>
<div class='small-1 small-centered columns'>1</div>
</div>
<div class="row">
<div class='small-5 columns'></div>
<div class='small-1 columns'>1</div>
<div class='small-1 columns'>2</div>
<div class='small-5 columns'></div>
</div>
<!--- This row with 3 content blocks is not centered below the previous row --->
<div class="row">
<div class='small-4 columns'></div>
<div class='small-1 columns'>1</div>
<div class='small-1 columns'>2</div>
<div class='small-1 columns'>3</div>
<div class='small-3 columns'></div>
</div>
Fiddle:
http://jsfiddle.net/1cq1gqtq/
I would use block grid instead. The block grid utility will fill up whatever available space is created by the row above.
See the Foundation docs for examples of how to use it: http://foundation.zurb.com/docs/components/block_grid.html
I use this a lot when I need no padding on the left/right sides of the outer columns.
I have a row divided into 3 columns using col-sm-4. Now i expect this row to be divided horizontally into three parts. But it's divided vertically.
See on Jsfillde
Here's my code
<div class="container">
<div class="row" style="padding:13px 15px;">
<div class="pull-left span4">
<img src="themes/custom/img/logo.png" width="120" alt="logo"/>
</div>
<div class="pull-right span4">
<div class="row">
<div class="col-sm-4">One</div>
<div class="col-sm-4">Two</div>
<div class="col-sm-4">Three</div>
</div>
</div>
</div>
</div>
I have kept a logo on the left side and on the right side there is a row that i want to divide horizontally in 3 parts.
What am i doing wrong?
Your code works just fine. The .col-sm-* classes are applied for width 768px and above. If you want make this three divs always horizontally, you have to use classes .col-xs-4 in your case. Updated jsfiddle
Futher reading - http://getbootstrap.com/css/#grid-options
I was having the same problem and was at my wits end. Then I refreshed the browser and it worked.
<div class="row">
<div class="span4"></div>
<div class="span4"></div>
</div>
I understand that you need 12 spans in total. Is there a way to still center align the two spans I have horizontally? The above will just float to the left.
I've tried putting a wrapper around them and margin auto'ng it but nothing happens.
I can go and remove the span class and just add a specified width but I need span class for fluid layout.
If you want to center two columns of span4 you can use offset param like this:
<div class="row">
<div class="span4 offset2"></div>
<div class="span4"></div>
</div>
Remember this may crash in lower resolutions. To prevent that think about using fluid grid layout. This is done by changing
<div class="row">
into
<div class="row-fluid">
Hope that helps!