I'm trying to position some elements within a div.
Bootstrap fiddle (upon click red icon)
Desired end result
You may see some of the things I have attempted in the Bootply link. Normally for this situation I would split the image and text elements into seperate Div's and try to set them as display:inline-block.
This doesn't seem to be working, possibly because I'm using bootstrap, which has some default styling which applies to all Div's. Alternatively it may not be working because I'm a rank amateur in CSS.
You can check my solution Bootstrap fiddle
Just added the class pull-left by the Image from Bootstrap and changed the css from .notification_msg.
<img class="notification_img pull-left" src="http://placehold.it/60x60">
.notification_msg {
padding-bottom: 30px;
border-bottom: 1px solid #D3D3D3;
}.
Related
I am trying to include an image and some text inside a button element. My code is as follows:
<button class="testButton1"><img src="Car Blue.png" alt="">Car</button>
The CSS is:
.testButton1
{
font-size:100%;
height:10%;
width: 25%
}
.testButton1 img
{
height:80%;
vertical-align:middle;
}
What I would like to do is to position the image to the left edge of the button, and position the text either in the center or to the right. Using   works, but is perhaps a bit crude. I have tried to surround the image and text with spans or divs and then positioning those, but that seems to mess things up.
What appears to be happening is that anything inside the button tag (unless formatted) is positioned as one unit in the center of a wider button (not noticeable if button width is left to auto adjust as both items are side-by-side.
Any help, as always, is appreciated. Thank you.
Background Image Approach
You can use a background image and have full control over the image positioning.
Working example: http://jsfiddle.net/EFsU8/
BUTTON {
padding: 8px 8px 8px 32px;
font-family: Arial, Verdana;
background: #f0f0f0 url([url or base 64 data]);
background-position: 8px 8px;
background-repeat: no-repeat;
}
A slightly "prettier" example: http://jsfiddle.net/kLXaj/1/
And another example showing adjustments to the button based on the :hover and :active states.
Child Element Approach
The previous example would work with an INPUT[type="button"] as well as BUTTON. The BUTTON tag is allowed to contain markup and is intended for situations which require greater flexibility. After re-reading the original question, here are several more examples: http://jsfiddle.net/kLXaj/5/
This approach automatically repositions image/text based on the size of the button and provides more control over the internal layout of the button.
Change button display style to inline-block, img float to left. Add margin to img as necessary.
<button style="display:inline-block">
<img src="url" style="float:left;margin-right:0.5em">Caption
</button>
If you want to use image inside the button not in the CSS I think this help you:
http://jsfiddle.net/FaNpG/1/
Adding float left to the image works to an extent. A judicious use of padding and image sizing fixes the issue with having the text stuck to the top of the button. See this jsFiddle.
I have repeating rows/columns setup with Bootstrap's grid system. I want to create padding between these elements, but have their border and background reside inside of that padding. I have tried using margin but that jacks with Bootstrap's grid layout on the column level.
The below is a very trimmed down version of what I'm working with, which illustrates the point. I would like to modify this so that the blue border hugs the white inner box, and you don't see any red (in my case it would show up behind text). I need to achieve this without modifying the essential html layout of what's there already, so relying just on CSS.
To clarify what I'm going after... I want to add padding between the rows & columns. If I just straight add padding to the outer div (as exists below) the border and background color extend outside of that padding. I want the border and the background color to exist within the boundaries of the padding I add.
I have tried using a variety of box-sizing settings to no avail, as well as all manner of padding/margin I could think of.
JSFiddle: https://jsfiddle.net/2v94yg2s/
HTML
<div class="container-fluid">
<div class="grid-data row">
<div class="col-md-4"><div></div></div>
<div class="col-md-4"><div></div></div>
<div class="col-md-4"><div></div></div>
<div class="col-md-4"><div></div></div>
<div class="col-md-4"><div></div></div>
<div class="col-md-4"><div></div></div>
<div class="col-md-4"><div></div></div>
</div>
</div>
CSS
.grid-data {
padding: 15px;
}
.grid-data > div {
padding: 15px;
height: 50px;
border: 1px solid blue;
background-color: red;
}
.grid-data > div > div {
background-color: white;
height: 100%;
width: 100%;
}
What you basically want is change the grid's "gutter".
If you want this to change globally in your website, the easy solution is to change the #grid-gutter-width variable in Bootstrap's "variables.less" file and rebuild your CSS.
If you want this for one specific feature, I'd recommend not using your grid for this. Generating an alternate grid with increased gutter is probably a bit of overkill, so you could roll your own CSS. Flexbox can be very useful and successful if you're not trying to mix it in the Bootstrap grid.
Ended up wrapping the repeat's contents inside another div, and only keeping the padding on the outer.
I'm trying to stick to the Bootstrap design paradigm of container > row > column, but I'm admittedly new to this and curious about something.
If I'm only putting content in the columns, as I believe I'm supposed to do, then Bootstrap's CSS puts a 15px gutter at the left and right edges of the page (I know it also puts them between disparate columns.) For design aesthetics I'd like to put a border above my content, and I'd like to do so without having it run into the gutter space.
Plunk included. As you can see, When I try to style the same element containing the content, it results in the border-top attribute (blue and green colored in my example) running into both gutters. When I create a new element above the content and attribute it with margin-left, margin-right values, that seems to work for the left edge of the border but not for the right one (orange color in my example). I just want the border to line up with my text.
What is the best way to accomplish this? I could change the margins or padding for the element itself but then I feel like I'm messing with Bootstrap's plumbing.
Please check this plunk. I've wrapped the content inside <div class="col-xs-8 opportunity-results"> with a <p> tag and then applied a border-top to that <p> tag. Moreover, I've assigned the property of display: block to the <a> tag inside <div class="col-xs-4 new-search clear-all"> and then applied a border-top to that <a> tag.
If you want to have the border-top only above the text then please check this plunk.
UPDATE:
To make both the blue and the green border-top to touch, you can use the :after psuedo selector on .opportunity-results like this:
.opportunity-results:after {
position: absolute;
content: '';
border-top: 1px solid blue;
width: 100%;
height: 2px;
left: 15px;
top: 0px;
}
Here's the plunk for it.
We've got an odd request from a client. They want a particular <ul>'s content to be centered with the icons. Centering isn't a problem in and of itself, neither are the icons.
The issue is that I can't find a way to center the <li>s at a variable width without the icon being left aligned.
So we're trying to achieve something like you see in http://jsfiddle.net/MBEKW/, with the exception that the icons should float normally to the left of the <li>, as it would if it were left-aligned.
Any ideas on how to achieve this? FWIW, we are using TWBS 2.1.1, but this seems so vanilla that bootstrap shouldn't even be a factor.
You should add this
li {
border: 1px dotted green;
list-style-position: inside;
}
jsfiddle
OR you can do the image icon like this
http://jsfiddle.net/MBEKW/3/
I am trying to include an image and some text inside a button element. My code is as follows:
<button class="testButton1"><img src="Car Blue.png" alt="">Car</button>
The CSS is:
.testButton1
{
font-size:100%;
height:10%;
width: 25%
}
.testButton1 img
{
height:80%;
vertical-align:middle;
}
What I would like to do is to position the image to the left edge of the button, and position the text either in the center or to the right. Using   works, but is perhaps a bit crude. I have tried to surround the image and text with spans or divs and then positioning those, but that seems to mess things up.
What appears to be happening is that anything inside the button tag (unless formatted) is positioned as one unit in the center of a wider button (not noticeable if button width is left to auto adjust as both items are side-by-side.
Any help, as always, is appreciated. Thank you.
Background Image Approach
You can use a background image and have full control over the image positioning.
Working example: http://jsfiddle.net/EFsU8/
BUTTON {
padding: 8px 8px 8px 32px;
font-family: Arial, Verdana;
background: #f0f0f0 url([url or base 64 data]);
background-position: 8px 8px;
background-repeat: no-repeat;
}
A slightly "prettier" example: http://jsfiddle.net/kLXaj/1/
And another example showing adjustments to the button based on the :hover and :active states.
Child Element Approach
The previous example would work with an INPUT[type="button"] as well as BUTTON. The BUTTON tag is allowed to contain markup and is intended for situations which require greater flexibility. After re-reading the original question, here are several more examples: http://jsfiddle.net/kLXaj/5/
This approach automatically repositions image/text based on the size of the button and provides more control over the internal layout of the button.
Change button display style to inline-block, img float to left. Add margin to img as necessary.
<button style="display:inline-block">
<img src="url" style="float:left;margin-right:0.5em">Caption
</button>
If you want to use image inside the button not in the CSS I think this help you:
http://jsfiddle.net/FaNpG/1/
Adding float left to the image works to an extent. A judicious use of padding and image sizing fixes the issue with having the text stuck to the top of the button. See this jsFiddle.