I'm looking for styled or colored horizontal lines, preferably with success, primary, warning classes.
A similar concept to colored links.
I couldn't find this topic on Bootstrap's website.
I found a few working solutions referring to Bootstrap v4.
In my case:
<div class="divider py-1 bg-success"></div>
It works, but I guess it's not the best practice...
Yes it does. Part of the Reboot, and is present in both Bootstrap-reboot.css & Bootstrap.css. It defines the <hr> as:
hr {
margin: 1rem 0;
color: inherit;
background-color: currentColor;
border: 0;
opacity: 0.25;
}
Also, Bootstrap 5 has moved a lot of its UI control over to utility classes... that gives you a far richer control of your UI. For example, if you wanted a "danger" / red colour <hr> you could use:
<hr class="bg-danger border-2 border-top border-danger">
Have a look at the Utility classes in their docs.
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-1 border-bottom"></div>
This should work
Using hr with the spacers helped me. Example horizontal rule that has a bit of space on top and bottom:
<hr class="mt-1 mb-1"/>
Related
How can I make one div to take certain percent of parent space verically?See the code below:
<div layout="column">
<div id="div1" flex="70%"></div>
<div id="div2" flex="30%"></div>
</div>
I want to make div1 70% height and div2 30% height of parent div. But it does not work. Div 1 and div 2 collapsed. But if the parent layout is row, it works fine---div1 takes 70% percent space horizontally.
I think you need to make the following modifications:
Specify a "height" to your outside div. This could be a percentage or pixels.
Do not use the % sign with the flex attribute
See this codepen: http://codepen.io/sebastiengiroux/pen/jPovxG
<div layout="column" style="height: 100%;">
<div id="div1" flex="70" style="background-color:red;"></div>
<div id="div2" flex="30" style="background-color:blue;"></div>
</div>
If you look into Layout docs https://material.angularjs.org/latest/layout/introduction
there is this statement that I think is relevant to your problem.
The flex attribute value is restricted to 33, 66, and multiples of five.
For example: flex="5", flex="20", flex="33", flex="50", flex="66", flex="75", ....
So I guess if you use allowed values, you can achieve results that you need. For example using 66 and 33.
My site coded using the 960gs framework works fine on the PC, whereas it has a problem when viewed on a mobile device.
The problem is with font-size, I have two grids with divs having similar properties,
<div class="grid_4">
<h2>About Us</h2>
<div class="pBody">
<p>Morbi feugiat pharetra faucibus.</p>
</div>
</div>
<div class="grid_8">
<h2>Blog Updates</h2>
<div class="preBody">
<p>Morbi feugiat pharetra faucibus.</p>
</div>
</div>
The css is similar for both the text divs, I'll list them below,
.pBody {
text-align: justify;
color: #858585;
font-size: 13px;
}
.preBody {
text-align: justify;
color: #858585;
font-size: 13px;
}
The text in the smaller grid i.e. grid_4 appears normally when viewed on the phone whereas the text in the other div i.e. grid_8 appears bigger. I've removed a few styling divs to keep it short.
I'll attach a screen shot to make things clear,
I'll be grateful to anyone who could help me out with this.
Regards,
Vinith
Recent upgrade to Bootstrap 3 on a Rails app. SimpleForm text box and also other form inputs are too large - they are erroneously full-page in length. The app does have responsive design, and the form input boxes do resize.
I'd like to limit the form input size to 50% instead of full page.
I did add this initializer gist https://gist.github.com/tokenvolt/6599141 but it did not seem to have an effect.
I am unfamiliar with the Bootstrap3/Simpleform2.1.1 conflicts.
I adjusted the width to 50% in the application.css.scss, but that did not make a clean change
/* forms */
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
padding: 10px;
margin-bottom: 15px;
#include box_sizing;
}
By length do you mean width? If you don't want the form to be too wide you could divide the page into columns and then put the form into a smaller column.
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<%= simple_form-for...
</div>
</div>
Bootstrap uses a gridsystem that divides the page into 12 columns. if you just put the form on, it will take up all 12 columns (the whole page) so you need to specify how many columns you want the form to take up. Here's a post that really helped me understand the new gridsystem: http://blog.jetstrap.com/2013/08/bootstrap-3-grids-explained/
EDIT:
How do i bring the bottom graph to the right of the top chart and align them as if they look like one chart
http://jsfiddle.net/dP93u/
<div><div id="container1" style="width: 300px; height: 400px;"></div><div id="container" style="width: 300px; height: 400px; margin: 0 auto"></div></div>
New EDIT:
The only way i can change the answer is if someone can develop the same chart in just one container div instead of 2.
I will suggest you to build two barcharts, set their offset such that they get aligned, take care that only one will have the xAxis.
Hope this will be useful for you.
If you would't mind including bootstrap.css library, the solution is pretty simple. Check this fiddle.
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
Do you intend: how can I have value labels between the two bar series?
You can done it via css:
<div style="font-family:verdana">
<p style="text-align:center">Population pyramid for Germany, midyear 2010</p>
<p style="font-size:small;text-align:center">Source: www.census.gov</p>
<div id="container1" style="width: 50%; height: 400px;float:left"></div>
<div id="container" style="width: 50%; height: 400px;float:left;position:relative;left:-55px"></div>
</div>
<div style="clear:both"></div>
and some refinements of HighCharts code. See jfiddle.
ULTIMATE GOAL: Make a formed transparency where images can show through but are shaped by the form itself. The images are rollover buttons and turn from grayscale to color with hover
So the picture below (link) shows what I want to happen in Dreamweaver CS6. I used PS to create this image. I simply took the "person portion" and deleted it so the picture turned out as a white box with a transparent inside. My plan was to simply plant this image into DW and then place the rest of the color images beneath it by placement of the IMG tag.
I figured it would turn out like what you see below but it has not. I simply get a full white page (tested offline, not uploaded to the server). If I add a picture, there is no hint that the PNG with the transparency is even existent.
So now, what would be your suggestions? Would it be easier to just use FW and make slices of the work as seen below? In that case I would just have to match all the pieces of the body up like Tetris when working in DW. It just seems there is a MUCH easier way of doing this and somehow I am making it extremely hard.
Please ask if you need further information. Thank you so much.
http://i1195.photobucket.com/albums/aa400/SteffaneTimm/MeFirstSuccess_zps146c6716.jpg
You could save the outline as a .PNG with alpha transparency as you have. To get the seperate images with the rollover effect you could try something like the below. (not using any canvas trickery). Create an image thats double the height of the strip you want, put the black and white version in the top half, and the colour version of the same image in the bottom half.
If you are having difficulty seeing the white outline you could try setting the page background to black temporarily.
To double check you have linked to your image files correctly you could also try pressing f12 in chrome and looking at the Resources tab in Frames > Images.
.container {
width: 500px; height: 800px;
}
.image-strip {
height: 200px; width: 500px; float: left;
overflow: hidden;
}
.image-strip img:hover {
margin-top: -200px;
}
.woman-outline {
position: relative; top: 0px; left: 0px;
height: 800px; width: 500px;
background: url('woman.png') no-repeat;
z-index: 1000;
}
<div id="container">
<div class="image-strip"><img src="1.jpg" /></div>
<div class="image-strip"><img src="2.jpg" /></div>
<div class="image-strip"><img src="3.jpg" /></div>
<div class="image-strip"><img src="4.jpg" /></div>
<div id="woman-outline"></div>
</div>