Twitter Bootstrap: Divide container into two colours - twitter-bootstrap-3
I'm not sure how to accomplish this in Bootstrap:
I that would be one colour than I would know how to do this.
I only know how to do colours inside container which max width is col-md-12:
<div class="container">
<div class="row">
<div class="col-md-3 blue"></div>
<div class="col-md-9 red"></div>
</div>
</div>
You could set the background color using css, say for the body:
background: rgba(52,247,75,1);
background: -moz-linear-gradient(left, rgba(52,247,75,1) 0%, rgba(52,247,75,1) 38%, rgba(246,41,12,1) 38%, rgba(231,56,39,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(52,247,75,1)), color-stop(38%, rgba(52,247,75,1)), color-stop(38%, rgba(246,41,12,1)), color-stop(100%, rgba(231,56,39,1)));
background: -webkit-linear-gradient(left, rgba(52,247,75,1) 0%, rgba(52,247,75,1) 38%, rgba(246,41,12,1) 38%, rgba(231,56,39,1) 100%);
background: -o-linear-gradient(left, rgba(52,247,75,1) 0%, rgba(52,247,75,1) 38%, rgba(246,41,12,1) 38%, rgba(231,56,39,1) 100%);
background: -ms-linear-gradient(left, rgba(52,247,75,1) 0%, rgba(52,247,75,1) 38%, rgba(246,41,12,1) 38%, rgba(231,56,39,1) 100%);
background: linear-gradient(to right, rgba(52,247,75,1) 0%, rgba(52,247,75,1) 38%, rgba(246,41,12,1) 38%, rgba(231,56,39,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#34f74b', endColorstr='#e73827', GradientType=1 );
Related
How to stretch product's rows to maximum?
I work on Nuxt.js (Vue.js) application that uses BootstrapVue (Bootstrap based) package.
The current situation is as following:
The code looks as following:
<template lang="pug">
b-container
b-row
b-col(:cols="8")
b-container
b-row
b-list-group
b-list-group-item.flex-column.align-items-start(
v-for="(item, index) in 7" :key="index"
href='#'
)
b-container
b-row
b-col(:cols="1").d-flex.align-items-center.justify-content-center
b-form-checkbox {{ index + 1 }}
b-col(:cols="11")
basket-item(:itemNumber="index + 1" :checkStatus="accepted")
b-row.style-row-middle
b-button.close(type='button' aria-label='Close' #click="onClose()")
span(aria-hidden='true') ×
u Удалить выбранное
b-button(type='button' #click="onContinue()").btn.btn-lg.buy__button Продолжить покупки
b-row
div
hr
| * доставка будет осуществлена из Санкт-Петербурга;
br
| * наш менеджер свяжется с вами сразу после обработки заказа;
b-col(:cols="4" class="col2")
form(ref='form' #submit.stop.prevent='handleSubmit').set-padding
div
strong
label ЗАКАЗ
div
strong
label Всего товаров: 1
div
strong
label На суму: 100 000 р
b-form-group(label='')
b-form-group(label='Телефон' label-for='type-tel' invalid-feedback='Phone is required')
b-form-input(id="type-tel" type="tel" v-model='phone' required)
b-form-group(label='E-mail' label-for='type-email' invalid-feedback='E-mail is required')
b-form-input(id="type-email" type="email" v-model='email' required)
b-form-group(label='Ваше имя' label-for='name-input' invalid-feedback='Name is required' :state='nameState')
b-form-input(:id="name-input" v-model='name' :state='nameState')
div.d-flex.align-items-center.justify-content-center
b-button(type='submit' variant='primary' size="lg") Оформить заказ
</template>
<style lang="sass">
.list-group
margin-bottom: 10px
max-height: 400px
-webkit-overflow-scrolling: touch
overflow-y: auto
.list-group-item
border-style: none
.set-padding
padding-bottom: 7px
padding-top: 7px
.style-row
border: solid 1px black
display: flex
justify-content: space-between
.style-row-middle
display: flex
justify-content: space-between
padding: 4px
.col1
border: 1px solid red
.col2
border: 10px solid rgb(0, 70, 140)
.buy__button
background-color: #eee
background-image: -webkit-linear-gradient(bottom, #ccc 0%, #eee 100%)
border: 1px solid #cccccc
color: black
font-size: 16px
text-shadow: 0.5px 0.866px 0 white
.set-border
border: 1px solid gray
border-radius: 3px
margin-bottom: 2px
margin-top: 2px
</style>
I need to stretch product's rows to maximum, but I'm not sure how to do it.
The screenshot shows padding in .list-group-item that could be reduced to 2px: .list-group-item padding: 2px Also, .list-group should take the full width available in the row: .list-group width: 100% demo
Bootstrap div in div with different sizes
I have (in bootstrap) div in div. The div in "bottom" is a background (gradient, and smaller height than foreground DIV) and in foreground is an image + tekst. div in div with image and gradien behind
The LOGO is an image, SOME TEXT will be in same div with LOGO, and the gradient DIV is behind...
I hope You undertand what I mean... Thnks in advanced
.container-color-nospace {
background-color: #fff;
}
.preporucujemo {
background: #ffffff;
background: -moz-linear-gradient(left, #ffffff 12%, #27aae2 100%);
background: -webkit-linear-gradient(left, #ffffff 12%,#27aae2 100%);
background: linear-gradient(to right, #ffffff 12%,#27aae2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#27aae2',GradientType=1 );
}
<section class="container container-color-nospace">
<article class="preporucujemo">
<article>
<img src="img/logo_plavi.png" class="img-responsive center-block" alt="logo"> SOME TEXT
</article>
</article>
</section>
css border-radius and background color
Here is my code:
HTML:
<div class="main">
<img class="in" alt="" src="https://lh6.googleusercontent.com/---lrEvAvGGs/U2i572OasiI/AAAAAAAACVw/zKSuueH1n5Q/s720/1024x1024.jpg">
</div>
CSS:
.main{
height:240px;
width: 240px;
background: #F00;
border: 1px solid #CCC;
border-radius: 30px;
position: relative;
overflow: hidden;
}
.in {
width: 240px;
height: 240px;
}
Live example: Jsfiddle
As you see in the example, there is a little background color (red) around at the corners of the image.
How to remove these but keeping border-radius attribute?
Just remove the styles background: #F00; border: 1px solid #CCC; from the class main.
http://jsfiddle.net/3Nzp3/3/ see this fiddle Remove both line background: #F00; border: 0px solid #CCC;
just remove background: #F00; and border: 1px solid #CCC; from your class main. You will get your output
like
.main{
height:240px;
width: 240px;
border: 0px;
border-radius: 30px;
position: relative;
overflow: hidden;
//you can use border: 0px;
}
just remove the code below from the main class background: #F00; border: 1px solid #CCC; i think this will help you .
create a border-radius for div
I've created a div, where in I've to write css for creating border-radius to that div. So I wanted the border-radius should be like the following image.
The CSS code what I've written is as follows.
{
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 6% 60%;
border-bottom-right-radius: 6% 60%;
margin: 10px 0;
color: #FFFFFF;
background: -moz-linear-gradient(top, #2ea2f5 0%, #2ea2f5 50%, #0089f3 50%, #0089f3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2ea2f5), color-stop(50%,#2ea2f5), color-stop(50%,#0089f3), color-stop(100%,#0089f3));
background: -webkit-linear-gradient(top, #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%);
background: -o-linear-gradient(top, #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%);
background: -ms-linear-gradient(top, #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%);
background: linear-gradient(to bottom, #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ea2f5', endColorstr='#0089f3',GradientType=0 );
}
And even you can go through it jsfiddle.net
So please help me I've stuck with this from 2 days.
Well, I managed to do something similar, and it should be cross-browser supported ( after small edits ) :
http://jsbin.com/elubek/1/edit
CSS:
div.wrapper {
position: relative;
width: 450px;
}
div.tag {
width: 400px;
padding: 3px 10px;
height: 74px;
background: -webkit-linear-gradient(top, #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%);
border-radius: 5px;
position: absolute;
top: 0;
z-index: 120;
}
div.box1 {
height: 62px;
width: 62px;
right: 0px;
top: 9px;
border-radius: 10px;
z-index: -1;
position: absolute;
-webkit-transform: rotate(-45deg);
background: -webkit-linear-gradient(top right, #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%);
float: right;
}
div.circle {
width: 10px;
height: 10px;
position: absolute;
z-index: 5;
border-radius: 100px;
background: white;
right: 10;
top: 35px;
}
p {
font-family: 'Verdana';
color: white;
margin: 0;
}
p.prgress-info {
font-size: 25px;
letter-spacing: -1px;
padding-top: 10px;
}
p.deadline {
padding-bottom: 19px;
font-size: 12px;
font-weight: normal;
}
p.deadline span { font-size: 14px; }
HTML:
<div class='wrapper'>
<div class='tag'>
<p class="prgress-info">003. In progress</p>
<p class="deadline"><span>7</span>/ Deadline: 30 July 2013</p>
</div>
<div class='box1'></div>
<div class='circle'></div>
</div>
You can play with the height/width of div.box1, to achieve the radius you want ;)
border-radius does allow some complex shapes, using it's extended syntax. For example: border-radius:15px 25px 25px 15px / 15px 45px 45px 15px; See http://jsfiddle.net/tDCaA/1/ for this in action. It's heading in the direction you're looking for, but doesn't quite achieve it. The trouble is that further tweaking doesn't get much closer -- with the straight lines you've got on the sample image, you're really not looking at a border-radius effect at all; it's a more complex shape than border-radius is designed to do. So my advice would be to stop focusing on border-radius as the answer here, and look for alternatives. So what alternatives are there? Here are a few you could try: An SVG image. This example is a good case for an SVG image, as you've got a few little design elements in there like the white hole at the end of the tag which aren't easy to achieve in CSS. A CSS triangle. Draw the end part of the tag using the old triangle hack with a CSS border. You may have trouble getting the corners rounded on this though. Rotation. Create a second element (possibly using the CSS :after selector), that will act as the end piece of the tag. Then use CSS to rotate it 45 degrees to give it the required shape. To be honest though, I would consider using rotation for this to be overkill, and not great for browser performance. It should work though. And since we're already rotation, you could also use other transform effects to tweak it to the desired shape. CSS border-image. CSS also has a border-image property that can be used to do complex borders. Combined with SVG, this can be very powerful and can give you all the variable shaped borders you want. Most modern browsers support it now (http://caniuse.com/#search=border-image). An old-school background image. Don't be afraid of just using a plain png background image for this kind of thing. All the techniques above have their place, but background images work well and have compatibility with old browser versions. There's nothing wrong with using them for this kind of thing if the other solutions don't work for you.
how to apply CSS3 properties (i.e. -moz , -webkit border radius) to asp.net button & texbox control and to html fieldset & legend?
I have applied rounded corners styles to my ASP.Net button & text box controls and also to fieldset and legend.
Here is my CSS-
fieldset
{
width:605px;
margin-bottom:20px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
fieldset legend
{
background: #606060 url(images/bluelines.gif) repeat-x center left;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
margin: 7px;
padding: 10px 10px 0px 5px;
}
fieldset legend:hover{
background: #606060 url(images/blue-lines.gif) repeat-x center left;
}
fieldset legend img
{
padding: 0px 6px 0px 0px;
position: relative;
bottom: 5px;
}
.txtBox
{
border: 1px solid #DDDDDD;
height:15px;
width: 200px;
padding: 5px;
background: #ffffff;
-moz-border-radius: 5px;
border-radius:5px;
-webkit-border-radius: 5px;
}
.txtBox:focus{
border: 2px solid #50cff1;
box-shadow: 5px 1px 1px 5px #000;
}
.buton{
background: #50cff1 url(images/nav-act.gif) repeat-x center left;
border: none;
color: #ffffff;
border-radius:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.buton:hover
{color: #000000;}
Here is skin code-
<asp:TextBox runat="server" CssClass="txtBox" SkinID="textBox" />
<asp:Button runat="server" CssClass="buton" SkinID="button" />
But these styles aren't working in Internet Explorer(8,7,6). Please let me know any solution so that all of these styles will apply on these elements(asp.net button & textbox, fieldset & legend) in IE too!
Regards,
nzahra
IE8 and below don't support CSS3, only IE9 does. To mimic CSS3, you'll need to use filters, .htc files (behaviors), images, or some combination thereof for any CSS3. You can use conditional comments to hide the IE stuff from other browsers. Here's some info on filters, and one way of rounding corners in IE..