I am trying to create a ribbon around a div using Bootstrap 4.
I can't clean the right border; on mobile, when the page is shrinked, my ribbon overflows to the right, out of parent div: https://jsfiddle.net/auj4q3a2/
Html:
<div class="container-fluid">
<div class="card profile-card">
<div class="container-fluid">
<div class="row user-social-detail">
<div class="col-lg-12 col-sm-12 col-12">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
CSS:
.profile-card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 475px;
margin: auto;
text-align: center;
}
.user-social-detail{
margin: 0 -30px;
padding: 15px 0px;
background-color: #ffd280;
border-radius: 4px;
}
.user-social-detail a i{
color:#fff;
font-size:23px;
padding: 0px 5px;
}
.user-social-detail::before,
.user-social-detail::after {
content: '';
position: absolute;
z-index: -1;
left: -45px;
top: -28px;
display: block;
width: 40px;
height: 0px;
border: 30px solid transparent;
border-right: 20px solid #e5bd73;
border-bottom-color: transparent;
border-left-color: transparent;
}
.user-social-detail::after {
left: auto;
right: -45px;
border-left: 20px solid #e5bd73;
border-right: 30px solid transparent;
}
How can I fit the ribbon into the container on mobile, as on the left side?
Any suggestion or feedback will be welcomed and greatly appreciated.
Got it!
You have to add
overflow-x: hidden !important; to .container-fluid
EDIT:
Actually, only in 1st .container-fluid this is necessary, so you can add the following to your CSS file:
.container-fluid:first-of-type {
overflow-x: hidden !important;
}
Related
I'm working with a table-like menu but I can't do it. Here is my CSS.
I'm using bootstrap 5. I can't adjust the padding and also the color of the menu when it's active or not.
.top-nav{
margin-left:0px;
}
.top-bar a {
display: block;
text-align: center;
padding: 20px;
text-decoration: none;
}
.top-bar{
border-bottom: 100px solid white;
border-left: 0 solid transparent;
border-right: 80px solid transparent;
border-top: 80px;
height: 0;
width: 200px;
clip-path: inset(0% 0% 0% 0% round 15px 0px 0px 0px)
}
Here is my HTML
<div class="row top-nav">
<div class="col-md-3 top-bar">
<a class="fw-bold text-primary" href="#home">Users</a>
</div>
<div class="col-md-3 top-bar">
<a class="fw-bold text-primary" href="#home">Warehouse Admin</a>
</div>
<div class="col-md-3 top-bar">
<a class="fw-bold text-primary" href="#home">Sales Rep</a>
</div>
<div class="col-md-3 top-bar">
<a class="fw-bold text-primary" href="#home">Senior Sales Rep</a>
</div>
</div>
My work
This the expected Output
run the snippet and change variables as you like
.folders {
background: lightgray;
padding: 10px;
}
.tabs:after {
content: "";
clear: both;
display: block;
}
.tab {
height: 40px;
line-height: 40px;
width: 150px;
float: left;
background: gray;
border-top-left-radius: 16px 16px;
border-top-right-radius: 16px 16px;
position: relative;
margin-right: 17.5px;
}
.tab.active {
z-index: 100;
background: #fff;
}
.tab:after {
content: "";
display: block;
position: absolute;
border-left: 35px solid gray;
left: 145px;
border-top: 35px solid transparent;
bottom: 0;
}
.tab.active:after {
border-left: 35px solid #fff;
}
.content {
height: 200px;
background: #fff;
}
<div class="folders">
<div class="tabs">
<div class="tab"></div>
<div class="tab active"></div>
<div class="tab"></div>
<div class="tab"></div>
</div>
<div class="contents">
<div class="content"></div>
</div>
</div>
I've got a button class="view-more" that I'm trying to center align on the page within my div class="main" but I just cannot get it to move.
I've tried the align-self, content, and items along with justify options but it just stays at the bottom left of the div.
I think my positions might be causing the issue but I'm not sure. I'm still learning and those are throwing me off.
Here is the full main code.
main {
background-color: var(--secondary-color);
height: 1060px;
}
main .videos {
display: grid;
grid-template-columns: 50% 50%;
margin: 5px;
}
main .videos img {
height: 240px;
width: 92%;
margin: 10px 0 0 24px;
box-shadow: 0 4px 8px rgba(0, 0, 0, .4);
z-index: 100;
position: relative;
}
main a {
position: relative;
}
main .videos h4 {
padding: 0;
margin: 15px 0 0 0;
color: var(--light-color);
text-align: center;
font-family: 'Oswald', sans-serif;
font-size: 1.6em;
}
main .videos h4 span {
background-color: rgba(0, 0, 0, 0.1);
padding: 0 10px;
border-radius: 10px;
}
main .videos i {
position: absolute;
color: white;
z-index: 3;
top: 30%;
left: 40%;
box-shadow: 0 4px 8px rgba(0, 0, 0, .8);
border-radius: 100px;
}
main .view-more {
position: absolute;
border-radius: 10px;
background-color: var(--dark-color);
color: var(--hightlight-color);
}
<main>
<h3>Featured Videos</h3>
<div class="videos">
<h4><span>Hands // Tobias Levin</span></h4>
<h4><span>Rise // Virtuoso</span></h4>
<i class="fas fa-play-circle fa-7x"></i><img src="/images/tobias1.jpg" alt="">
<i class="fas fa-play-circle fa-7x"></i><img src="/images/rise.jpg" alt="">
<h4><span>This is Dan and Dave</span></h4>
<h4><span>Super // Chris Webber</span></h4>
<i class="fas fa-play-circle fa-7x"></i><img src="/images/dand.jpg" alt="">
<i class="fas fa-play-circle fa-7x"></i><img src="/images/cwebber.jpg" alt="">
<h4><span>Superhuman // Brian Tudor</span></h4>
<h4><span>Smoke Screen // Jaspas Deck</span></h4>
<i class="fas fa-play-circle fa-7x"></i><img src="/images/bt.jpg" alt="">
<i class="fas fa-play-circle fa-7x"></i><img src="/images/smokescreen.jpg" alt="">
</div>
<button class="view-more">Open The Vault</button>
</main>
Do you mind if the title/everything in the main container is centered? If not, you can simply add text-align center to the container which would center the children. The problem with your code not moving the button is because you added "position absolute" to the button, meaning it will not center relative to its parent, but rather to the window. I removed that position absolute, and the button will now listen to its parent. Does that make sense?
main {
background-color: var(--secondary-color);
height: 1060px;
text-align: center;
}
main .videos {
display: grid;
grid-template-columns: 50% 50%;
margin: 5px;
}
main .videos img {
height: 240px;
width: 92%;
margin: 10px 0 0 24px;
box-shadow: 0 4px 8px rgba(0, 0, 0, .4);
z-index: 100;
position: relative;
}
main a {
position: relative;
}
main .videos h4 {
padding: 0;
margin: 15px 0 0 0;
color: var(--light-color);
text-align: center;
font-family: 'Oswald', sans-serif;
font-size: 1.6em;
}
main .videos h4 span {
background-color: rgba(0, 0, 0, 0.1);
padding: 0 10px;
border-radius: 10px;
}
main .videos i {
position: absolute;
color: white;
z-index: 3;
top: 30%;
left: 40%;
box-shadow: 0 4px 8px rgba(0, 0, 0, .8);
border-radius: 100px;
}
main .view-more {
border-radius: 10px;
background-color: var(--dark-color);
color: var(--hightlight-color);
}
<main>
<h3>Featured Videos</h3>
<div class="videos">
<h4><span>Hands // Tobias Levin</span></h4>
<h4><span>Rise // Virtuoso</span></h4>
<i class="fas fa-play-circle fa-7x"></i><img src="/images/tobias1.jpg" alt="">
<i class="fas fa-play-circle fa-7x"></i><img src="/images/rise.jpg" alt="">
<h4><span>This is Dan and Dave</span></h4>
<h4><span>Super // Chris Webber</span></h4>
<i class="fas fa-play-circle fa-7x"></i><img src="/images/dand.jpg" alt="">
<i class="fas fa-play-circle fa-7x"></i><img src="/images/cwebber.jpg" alt="">
<h4><span>Superhuman // Brian Tudor</span></h4>
<h4><span>Smoke Screen // Jaspas Deck</span></h4>
<i class="fas fa-play-circle fa-7x"></i><img src="/images/bt.jpg" alt="">
<i class="fas fa-play-circle fa-7x"></i><img src="/images/smokescreen.jpg" alt="">
</div>
<button class="view-more">Open The Vault</button>
</main>
I have a problem with a push sidebar menu. When the toggle button is clicked the page goes to the right .The problem is that I want the side bar menu to be next to the page just like the example that is in the picture . Also when i scroll down to the page ,I want the side bar menu to be fixed. I am only using css.
#media (max-width: 575px) {
.navbar-brand {
margin-bottom: 0;
}
.slideout-sidebar {
position: fixed;
top: 0px;
left: -80%;
height: 100%;
background-color: #fff;
transition: all .15s ease-in-out;
-webkit-box-shadow: inset -15px 0px 10px -15px rgba(0, 0, 0, 0.75);
box-shadow: inset -15px 0px 10px -15px rgba(0, 0, 0, 0.75);
}
.slideout-sidebar ul li {
display: block !important;
cursor: pointer;
padding: 10px 10px;
letter-spacing: 1px;
font-weight: 700;
font-size: 15px;
color: #0d6490;
margin: 0;
}
.slideout-sidebar button {
font-size: 1rem !important;
width: 220px;
height: 37px;
}
.navbar-brand {
width: 12rem;
height: 3.2rem;
margin-left: 50px;
}
.container-content {
position: relative;
left: 0px;
}
#menu-toggle {
display: none;
}
.menu-icon {
position: fixed;
top: 5px;
left: 5px;
font-size: 35px;
z-index: 1;
transition: all.15s ease-in-out;
padding: 5px 15px;
background-color: transparent;
}
#menu-toggle:checked ~ .slideout-sidebar {
left: 0;
}
#menu-toggle:checked + .menu-icon {
left: 250px;
}
#menu-toggle:checked ~ .container-content {
-webkit-transform: translateX(80%);
transform: translateX(80%);
transition: all .15s ease-in-out;
}
<input type="checkbox" id="menu-toggle" class="menu-icon" />
<label for="menu-toggle" class="menu-icon"><i class="fa fa-bars mt-2"></i></label>
<div class="container-content">
<header>
<div class="header-container d-flex justify-content-around container-fluid">
<div class="slideout-sidebar order-1">
<ul class="d-md-flex flex-md-column flex-lg-row mt-md-4">
<li class="brd mr-md-2 align-self-center menu">МЕНИ</li>
<li class=" order-lg-last btn-order"> <button class="btn" type="submit">НАРАЧАЈТЕ
ВЕДНАШ</button></li>
<li class="brd border-bottom border-top border-primary d-none ">КОНТАКТИРАЈТЕ НЕ</li>
<li class="brd d-none">УСЛОВИ ЗА КОРИСТЕЊЕ</li>
<li class=" border-bottom border-primary d-none brd">РЕСТОРАНИ</li>
<li class="order-lg-first mr-md-4 text-center brd align-self-center">
<a class="">МК</a>
<div class="d-inline-block
language-line"> | </div>
<a class="">EN</a>
</li>
</ul>
</div>
<div class="mx-auto mx-lg-0 mt-2">
<img src="./images/logo.png" alt="dominoslogo" class="navbar-brand" />
</div>
<div class="cart mt-2">
<img src="images/basket.png" alt="basket" class="d-lg-none">
<span class="header-cart-order d-lg-none">0</span>
</div>
</div>
</header>
I tried to make dropdown bootstrap menu and there is border at the bottom of the dropdown using <hr>
the problem is the dropdown menu jump the
<hr>
line.
here is the html
<div class="container">
<div class="row">
<div class="col-md-8">
<b>Available at :</b>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
List<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
#foreach ($listings as $listing)
<li>Text</li><br>
#endforeach
</ul>
<hr>
</div>
under dropdown styling, there is top : 100% if I untick it, the dropdown list display correctly.
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
Anyone know how to fix this so the dropdown will display exactly at the bottom of Available at :List ?
more like this
You could use top: 20px; left: 15px; instead of top: 100%; left: 0; in your css. this would fix your problem.
Look here: http://www.bootply.com/qyGxdV9m0t#
I fixed this with adding <div class="col-md-12"> before the dropdown. and another <div class="col-md-12"> for <hr>
Semantically, the information I want to display is a series of user selectable stages of a pipeline.
Example:
[Stage1 (4 items) |> Stage2 (10 items) |> Stage3 (4 items)]
I am using bootstrap 3 and jQuery.
Here is the css I attempted to put a triangle on the right of a button.
.btn:not(:last-child)::after {
z-index:2;
position: relative;
left: 19px;
display: inline-block;
/* Triange like this > */
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid grey;
content: '';
}
http://codepen.io/smartnut007/pen/LpLVje
The codepen has both a sample of my desired outcome and also my very unsuccessful attempt at it. I sort of figured how to make the arrow display using CSS. But, am stuck with the rest of it.
Couple of nube questions, if you will indulge me :-)
A) The arrow works on a simple button. But, the positioning of the arrow is off once I put richer html in the button. What is a smarter way to position this ?
B) As a next step, I want the active stage to be highlighted (.btn-primary or some such thing to mark it active). How can I make both the arrow and the selected section/button highlight to the same color ?
C) Is a button and button group the right way to go about it ? I am also open to others such as horizontal list group etc if it will be easier.
Whatever technique, I would prefer it to work for at least IE9+ and other major browsers.
Update:
I was able achieve most of what I wanted here http://jsfiddle.net/rqu7vrnh/2/
I sort of figured how to make the arrow display using CSS. But, am
stuck with the rest of it.
You are on the right track. Just a couple of fixes is what you need.
A) The arrow works on a simple button. But, the positioning of the
arrow is off once I put richer html in the button. What is a smarter
way to position this?
Your buttons should be positioned relative and the arrows as absolute. This will help you precisely position the arrows where you want.
B) As a next step, I want the active stage to be highlighted
(.btn-primary or some such thing to mark it active). How can I make
both the arrow and the selected section/button highlight to the same
color?
Use the :hover on your buttons to change the border-left color. Also, on the .active of your buttons, because Bootstrap way of highlighting the active button is to add the active class. You could also do that for :active and :focus while you are at it.
Example Fiddle: http://jsfiddle.net/abhitalks/onxrj3wt/1/
Example Snippet:
.btn { position: relative; }
.btn:not(:last-child)::after {
content: ''; z-index: 100;
height: 0px; width: 0px;
position: absolute;
right: -8px; top: 50%;
transform: translateY(-50%);
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #ddd;
}
.btn:hover { background-color: #ccc; }
.btn:active { background-color: #7ac7d2 !important; }
.btn:focus { background-color: #7ac7d2 !important; }
.btn:not(:last-child):hover::after {
border-left: 6px solid #ccc;
}
.btn:not(:last-child):active::after,
.btn:not(:last-child):focus::after
{
border-left: 6px solid #7ac7d2;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" style="margin-top:20px; margin-left:40px;">
Attempt 1
<div class="row">
<div class="btn-group" role="group">
<a href="#" class="btn btn-default" role="button">
<h3 class="text-center">767</h3>
<p class="text-muted text-center">Stage1</p>
</a>
<a href="#" class="btn btn-default" role="button">
<h3 class="text-center">17</h3>
<p class="text-muted text-center">Stage2</p>
</a>
<a href="#" class="btn btn-default" role="button">
<h3 class="text-center">7</h3>
<p class="text-muted text-center">Stage3</p>
</a>
</div>
</div>
<div class="row"> <div>
Desired Output
<div class="row">
<img src="https://s3.amazonaws.com/warning-public-resources/pipeliene-example.png" height="100"></img>
</div>
</div>
Note: The above example is a quick demo. Specificity of the elements is not considered. In your production code, you should carefully look at the specificity of the rules which override Bootstrap ones, so that !important is avoided.
Change your CSS to below snipet. Using btn-primary class will activate the button.
.btn {
height: 90px;
width: 100px;
}
.btn:not(:last-child)::after {
position: absolute;
right: -6px;
z-index: 1;
top: 50%;
margin-top: -6px;
display: inline-block;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid grey;
content: '';
}
.btn.btn-primary::after {
border-left: 6px solid #337ab7;
}
.btn.btn-primary::before {
position: absolute;
left: -1px;
z-index: 1;
top: 50%;
margin-top: -6px;
display: inline-block;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid #fff;
content: '';
}
.btn-primary p {
color: #fff;
}
This may help or give you some ideas.
body,
html {
margin-top: 20px;
margin-left: 40px;
}
button.btn.btn-cycle {
height: 150px;
width: 150px;
border-radius: 0;
border: none;
background: white;
border-top: 6px solid #f5f5f5;
border-left: 6px solid #f5f5f5;
border-bottom: 6px solid #f5f5f5;
font-size: 20px;
}
button.btn.btn-cycle:last-child {
border-right: 6px solid #f5f5f5;
}
button.btn.btn-cycle:last-child:before {
content: "";
position: absolute;
top: 33.33%;
left: 100%;
width: 0px;
height 0px;
border-top: 20px solid transparent;
border-left: 20px solid #f5f5f5;
border-bottom: 20px solid transparent;
}
button.btn.btn-cycle:not(:first-child):after {
content: "";
position: absolute;
top: 33.33%;
left: 0;
width: 0px;
height 0px;
border-top: 20px solid transparent;
border-left: 20px solid #f5f5f5;
border-bottom: 20px solid transparent;
}
button.btn.btn-cycle:first-child {
border-left: 6px solid #f5f5f5;
}
button.btn .btn-span {
font-weight: 800;
font-size: 10px;
display: block;
}
button.btn.btn-cycle:hover {
background: teal;
color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-cycle">187 <span class="btn-span">ACTIVE</span>
</button>
<button type="button" class="btn btn-cycle">112 <span class="btn-span">UNACKNOWLEDGED</span>
</button>
<button type="button" class="btn btn-cycle">11 <span class="btn-span">ACKNOWLEDGED</span>
</button>
</div>
</div>
You need to understand the structure first. As per image in codepen, it shows that you want dives in row having borders with different gauge. You need to understand the placing of border as per image.
Anyways I tried answering your question But checkout Abhitalks answer and understand the things.
CodePen: http://codepen.io/anon/pen/LpLpxM
Try out below,
.wrapper {
margin-top:20px;
border-top: 9px solid #F0F0F2;
border-bottom: 9px solid #F0F0F2;
height:108px;
width:334px;
}
.box{
background-color: #fff;
float: left;
height: 90px;
padding-top: 22px;
width: 100px;
text-align:center;
border-right: 2px solid #F0F0F2;
font-size:20px;
}
.box.first {
border-left: 9px solid #F0F0F2;
width:110px;
}
.box.active {
background-color: #82C8D2;
}
.box::after {
z-index: 2;
position: relative;
left: 53px;
bottom:34px;
display: inline-block;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid #F0F0F2;
content: '';
}
.box.active::after {
border-left: 6px solid #82C8D2;
left: 52px;
}
.text-small {
display: block;
font-size: 8px;
font-weight: bold;
text-transform: uppercase;
}
<div class="wrapper">
<div id="div1" class="box first grid-box1">187
<span class="text-small">Active</span>
</div>
<div id="div2" class="box grid-box2">112
<span class="text-small">Unacknowledge</span>
</div>
<div id="div3" class="box grid-box3 active">11
<span class="text-small">Acknowledge</span>
</div>
</div>