Is it possible to have button always at bottom right in bootstrap 3 tab?
Here is example of my code in tabs
<div class="wizard tab-content">
<!--Step 1 -->
<div id="step-1" class="tab-pane fade in active">
<div class="row">
<div class="col-md-12">
<h2>First step</h2>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
BACK
</div>
<div class="col-md-6 col-sm-6 col-xs-6 text-right">
NEXT
</div>
</div>
</div>
<!--/Step 1 -->
</div>
CSS
.wizard{
min-height:400px;
background-color:red;
}
What i need is that BACk and NEXT to be always at bottom of wizard element?
Please take a look at this working fiddle
http://jsfiddle.net/52VtD/9126/
See: try: http://jsfiddle.net/52VtD/9127
In fact this solution does not differ much from that by #Izzy:
CSS:
.wizard {
min-height:200px;
background-color:red;
position: relative;
}
.wizard .tab-pane > div:last-child {
position: absolute;
bottom: 0;
width: 100%;
margin:0;
}
Firstly add position:relative to .wizard div and then you can use position:absolute for the BACK and NEXT. So something like
.wizard {
min-height:400px;
background-color:red;
position: relative;
}
.col-md-6 {
position: absolute;
bottom: 0;
}
Related
Using Bootstrap 5, how I can extend a row to either be outside a container or appear to be outside the container and stretch to the viewport edge without a horizontal scrollbar.
Reviewing the questions related to this, I see the use of pseudo-elements. When I try to use a pseudo-element, a horizontal scrollbar appears, which is not the behavior I want. As stated in an answer below, I could use an overflow hidden on the body, but that isn't preferred since I feel that could cause styling issues elsewhere. Note that the example pen below is a very watered-down example.
CodePen showing an example of what I'm trying.
.full-width {
position: absolute;
}
.full-width:before {
left: -999em;
background: purple;
content: "";
display: block;
position: absolute;
width: 999em;
top: 0;
bottom: 0;
}
.full-width::after {
right: -999em;
background: purple;
content: "";
display: block;
position: absolute;
width: 999em;
top: 0;
bottom: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container bg-dark vh-100">
<div class="row bg-light p-5">
<p class="text-dark">Hello World</p>
</div>
<div class="row full-width bg-info p-2">
<p>Just trying to extend to full width without horizonal scroll</p>
</div>
</div>
Edit:
I can accomplish what I'm looking for by separating the page at certain points with three containers. See this codepen for an example. This may be the approach I take, in my given situation. There are styling issues I'll need to take into account in the middle container, but could be accomplished fairly easily. If there's thoughts on a better way, please let me know.
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row bg-light p-5">
<div class="col">
<p class="text-dark">Hello World</p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row bg-info p-2">
<div class="col">
<p>Just trying to extend to full width without horizonal scroll</p>
</div>
</div>
</div>
<div class="container">
<div class="row bg-light p-5">
<div class="col">
<p>More content here</p>
</div>
</div>
</div>
First of all you need overflow:hidden on the body. Secondly, content doesn't go directly in the row. Instead content should be placed inside a column (col) inside the row. Then make the col full-width...
https://codeply.com/p/krYOqrcJlR
<div class="container bg-dark vh-100">
<div class="row bg-light">
<div class="col">
<p class="text-dark">Hello World</p>
</div>
</div>
<div class="row bg-info">
<div class="col full-width">
<p>Just trying to extend to full width without horizonal scroll</p>
</div>
</div>
</div>
body {
overflow:hidden;
}
.full-width {
position: relative;
}
.full-width:before {
left: -999em;
background: purple;
content: "";
display: block;
position: absolute;
width: 999em;
top: 0;
bottom: 0;
}
.full-width::after {
right: -999em;
background: purple;
content: "";
display: block;
position: absolute;
width: 999em;
top: 0;
bottom: 0;
}
My site uses wordpress and toolset, basically, the below code returns a flexbox that has three items within it. Each of those items background colour needs to be different.
I'm unsure on the approach, but research points to something like using, but localizing it to just the flex box, not site wide. Could I request some direction ideas?
div:nth-child(1) {
background: gray;
}
div:nth-child(2) {
background: red;
}
div:nth-child(3) {
background: cyan;
}
CODE BLOCK
[wpv-layout-start]
[wpv-items-found]
<div class="row flexbox-wrap">
<!-- wpv-loop-start -->
<wpv-loop>
<div class="col-md-4 flexbox-equalise">
<article class="well well-equal">
<h4>[wpv-post-title]</h4>
<p>[wpv-post-excerpt output="raw"]</p>
<p class="lead">[wpv-woo-product-price]</p>
<div class="well-actions">
[wpv-woo-buy-or-select add_to_cart_text="Join now!" class="btn-block"]
</div>
</article>
</div>
</wpv-loop>
<!-- wpv-loop-end -->
</div>
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]
CSS
.flexbox-equalise .well { position: relative; padding-bottom: 76px; }
.flexbox-equalise .well .well-actions { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px; }
Based on the assumption that the loop creates 3 <div class="col-md-4 flexbox-equalise"> siblings, you can use the nth-child selector like this:
.flexbox-equalise:nth-child(1) { background: red; }
.flexbox-equalise:nth-child(2) { background: yellow; }
.flexbox-equalise:nth-child(3) { background: green; }
This selector will target any element having the class flexbox-equalise and being sibling nr 1-3
You can narrow this down further by e.g. adding .flexbox-wrap class to the selector, like this:
.flexbox-wrap > .flexbox-equalise:nth-child(n) { ... }
This selector will target any element having the class flexbox-equalise, being a child of flexbox-wrap and sibling nr 1-3.
Stack snippet
.flexbox-equalise:nth-child(1) {
background: red;
}
.flexbox-equalise:nth-child(2) {
background: yellow;
}
.flexbox-equalise:nth-child(3) {
background: green;
}
<div class="row flexbox-wrap">
<div class="col-md-4 flexbox-equalise">
<article class="well well-equal">
<h4>[wpv-post-title]</h4>
<p>[wpv-post-excerpt output="raw"]</p>
<p class="lead">[wpv-woo-product-price]</p>
<div class="well-actions">
"Join now!"
</div>
</article>
</div>
<div class="col-md-4 flexbox-equalise">
<article class="well well-equal">
<h4>[wpv-post-title]</h4>
<p>[wpv-post-excerpt output="raw"]</p>
<p class="lead">[wpv-woo-product-price]</p>
<div class="well-actions">
"Join now!"
</div>
</article>
</div>
<div class="col-md-4 flexbox-equalise">
<article class="well well-equal">
<h4>[wpv-post-title]</h4>
<p>[wpv-post-excerpt output="raw"]</p>
<p class="lead">[wpv-woo-product-price]</p>
<div class="well-actions">
"Join now!"
</div>
</article>
</div>
</div>
I'm trying to put my 2 paginations at the same vertical distance of my table.
This works for the bottom part but the top part appears to be in my table-container for some reason.
CSS:
.table {
width: 100%;
max-width: none;
clear: both;
}
.table-container {
margin-top: 20px;
margin-bottom: 20px;
}
section {
margin-top: 20px;
margin-bottom: 20px;
}
.pagination {
display: inline;
}
To fix the spacing issue, change
.pagination {
display:inline-block;
}
to
.pagination {
display:inline; //or block
}
You should also wrap your .pagination in a .col-xs-12 .col-md-12 div like this. Always include the xs classes as Bootstrap is mobile first.
<div class="row>
<div class="col-xs-12 col-md-12">
<ul class="pagination">
//code
</ul>
//rest of code
</div>
</div>
Also, this
<section>
<div class="col-xs-2 col-md-2"></div>
<div class="col-xs-8 col-md-8">
//code
</div>
</section>
should be
<section>
<div class="row>
<div class="col-xs-2 col-md-2"></div>
<div class="col-xs-8 col-md-8">
//code
</div>
</div>
</section>
As the docs state
Content should be placed within columns, and only columns may be
immediate children of rows.
You have no margins on your rows. Other things are affecting it that are inside the rows. For example, you have a <div class="pagination"> is display:inline-block. If you remove that, the bottom 5px margin goes away.
I'm trying to slice an box with rounded corners. The image is sliced horizontal in 3parts (top-middle-bottom). The problem in IE7 is that the top div is larger than the actual size I set.
Here is the HTML & CSS code
<!-- FIRST PICTURE -->
<div class='recent-box'>
<div class='recent-box-top'></div>
<div class='recent-box-middle' >
</div>
<div class='recent-box-bottom'></div>
</div>
<!-- FIRST PICTURE -->
<div class='recent-box'>
<div class='recent-box-top'></div>
<div class='recent-box-middle'>
</div>
<div class='recent-box-bottom'></div>
</div>
<!-- FIRST PICTURE -->
<div class='recent-box'>
<div class='recent-box-top'></div>
<div class='recent-box-middle'>
dsqd
</div>
<div class='recent-box-bottom'></div>
</div>
<!-- FIRST PICTURE -->
<div class='recent-box'>
<div class='recent-box-top'></div>
<div class='recent-box-middle'>
dsqd
</div>
<div class='recent-box-bottom'></div>
</div>
.recent-box {
width: 127px;
float:left;
display:block;
}
.recent-box-top {
float:left;
background-image: url('images/recent-foto-top.png');
background-repeat:no-repeat;
width: 100%;
}
.recent-box-middle {
float:left;
background-image: url('images/recent-foto-middle.png');
background-repeat:repeat-y;
width: 100%;
}
.recent-box-bottom {
float:left;
background-image: url('images/recent-foto-bottom.png');
background-repeat:no-repeat;
width: 100%;
}
Thanks for helping me out!
Ward
The font-size and line-height properties might be the offensive ones. If you are not placing any text in the top box, use something like
.recent-box-top {
font-size: 0;
line-height: 0;
}
Found the solution!
Just put in the div and it works like a charm!
found on http://archivist.incutio.com/viewlist/css-discuss/39150
So, i have some block, and this block must contains two divs, first div must be at left(attached to block), second at right(attached to block), and this two divs must coverage all block size.
<div id="block" style="width:800px">
<div id="left" style="float:left;width:50%;"> left </div>
<div id="right" style="float:right;width:50%;"> right</div>
</div>
Both divs have a width half of the parent's div.
But you have to be careful with borders as the width defines the width of the content (i.e. without borders). So if you use borders, the right box will be shown below the left, but still on the right side.
You would do it like this.
<div id="block">
<div id="left"></div>
<div id="right"></div>
</div>
The css would be
#block {
width:800px;
display:block //not sure if this line is required or not
}
#left {
width:400px;
float:left;
}
#right {
width:400px;
float:left;
}
There are many ways this could be done.... here's one:
<div style="position: relative; width: 100%; ">
<div style="position: absolute; left: 0; width: 50%; ">
<p>Content</p>
</div>
<div style="position: absolute; right: 0; width: 50%; ">
<p>Content</p>
</div>
</div>
Would something like this do what you want?
<div id="container">
<div id="leftside" style="width:100px; float:left">
Left Side
</div>
<div id="rightside" style="margin-left: 100px;">
Right Side
</div>
</div>
You may need to tweak the margin-left depending on the padding (and widths obviously). This is an easy way to get the two column approach (even if the two columns is a small box) :)
Or in the interests of separating the HTML and CSS, the same code represented again in two parts :) :
HTML
<div id="container">
<div id="leftside"></div>
<div id="rightside"></div>
</div>
CSS
#container:
{
/* insert any requires styles here :) */
}
#leftside:
{
width: 100px;
float: left;
}
#rightside:
{
margin-left: 100px;
}
Try this:
<div id="container">
<div id="left">
Some Content
</div>
<div id="right">
Some Content
</div>
</div>
CSS:
<style type="text/css">
#container
{
width:500px;
height:500px;
position:relative;
}
#left
{
width:250px;
height:250px;
position:absolute;
float:left;
}
#right
{
width:250px;
height:250px;
position:absolute;
float:right;
}
</style>
Adjust margin and width and you're done.
<div id="main">
<div id="left" style="float:left">
Content Left
</div>
<div id="right" style="float:right">
Content Right
</div>
</div>