MY CODE IS:
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
<div class="statistic-box statistic-filled-1">
<h1><span class=count-number>5251111111</span>TL</h1>
<span class=slight><i class="fa fa-play fa-rotate-270 text-warning"> </i> 28%</span>
<div class=small>Stok</div>
<div>
</i>
</div>
</div>
</div>
i want to edit the text so that it would fit and not disturb the server image, is there anyway to make this possible?
You could set the image as the divs background image & then set padding on the div.
Without seeing your CSS, it looks like you are probably using a background-image property on one of your div elements. The text appearing over top of it is how it's intended to work.
If you don't want this image to be part of the background, then I'd suggest removing that property and instead inserting a good old fashioned <img> element in the HTML instead.
Related
I am currently trying to put text right of an image using the bootstrap classes. I am fairly new to using bootstrap. I used the float class but the image just gets put under the text. I want to have it so the img tag is under the text tag in the code. I also do not want to use any css in this project. I know it is impractical but I am curious if you can make the text and Images side by side with the img tag under the text tag
Text right of an image using the bootstrap classes, but with the img tag under the text tag in the code
<div class="row">
<div class="col-6 p-0 order-2">Text</div>
<div class="col-6 p-0 order-1">Image</div>
</div>
If you want the img on the left but under the text in the code you have to invert order:
<div class="row">
<div style="padding:0" class="col-6 order-2">Text</div>
<div style="padding:0" class="col-6 order-1">Image</div>
</div>
I want the icon to appear centered horizontally and vertically behind the text.
I have tried numerous combinations of position:absoulute, position:relative, z-index, display:flex, but have not been able to acheive the wanted effect.
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="border rounded p-3 mb-4 overflow-hidden" style="height:200px;">
<span class="fas fa-user-tie fa-3x fa-fw text-secondary"></span>
<strong>Header</strong><br />
Text text text text, etc.<br />
</div>
</div>
You will have to give the parent container a position:relative for the children's position:absolute to work. Then wrap your icon in a different span to your text and make the positions absolute.
Eg; https://jsfiddle.net/L9cb8wao/
My fiddle is extremely rough, so apologies about that, however there should be enough there for you to fix your code accordingly to achieve what you're after.
So basically I need to set icons / labels over the thumbnail picture, how to do it with CSS and HTML? If possible I need it to be responsive. Thanks in advance.
EDIT: Sorry for not posting code, here is what I have tried using Bootstrap 3 and Font Awesome:
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="img/test/test04.png" alt="thumb01">
<div class="col-xs-3 col-md-6">
<div class="delivery alert alert-success">
<i class="fa fa-truck" aria-hidden="true"></i>
</div>
</div>
</a>
</div>
</div>
Delivery class:
.delivery{
position: absolute;
font-size: large;}
Ok. Firstly, if you are using some framework, look for a solution that uses it. Secondly, if you do not use a structure, you can use #media in CSS to make your elements responsives, and for the layout, what you are looking for is a thumbnail or picture card, search for it in internet if you encounter difficulties. You can work using the image and the icons inside a div, then just work with the elements using CSS (display and the float, for example). Have fun :)
I have try to put image in the right side and text in the left side,
but for some reason its the opposite and I don't know why,
By the way how can I shrink it to fit the "Can you see the simplicity behind the logo?" size.
Link to website
The column you want on the left should come first. So in this case the text.
Example
<div class="row">
<div class="col-xs-6">
[text]
</div>
<div class="col-xs-6">
[image]
</div>
</div>
You have the img-responsive class on the logo so it will scale depending on the viewport size. You also have a inline style with "height: 200px". Lowering this number would decrease the size of the logo.
The styles coming from bootstrap are setting your layout. For instance your image <img src="Isaac.png" alt="" id="img_q" class="col-xs-6 text-right"> has a float:left coming from bootstrap. You can override bootstrap styles by putting your styles inline like this <img src="Isaac.png" alt="" id="img_q" class="col-xs-6 text-right" style="float: right;"> or by placing !important; after the styles you want to override other styles. Use the developer tool on the browser to analyze the css and you'll see what is affecting your page and what is not.
I have a div with id=group1port.
Inside this div are multiple divs, one being id group1porteq.
I am using the equal heights to make the div's the same height however, with what I have, it currently changes the heights of all the div's, when I only want it to effect the div group1porteq. I have tried ('#group1port div.group1porteq') but this doesn't work. I have also tried removing the "div" completely and that also doesn't work. Also have tried changing it to ('#group1porteq div') and then that just makes all the div's inside that div equal.
The "div class="portlet light bordered" id="group1porteq"" is the two div's i need to have equal height
I have div's that all have multiple div's inside, and I am trying to just get equal height for 1 div. Here is a sample of the script.
<script>
if($(window).width() > 800){
$('#group1port div').equalHeights();
}
</script>
Here is a sample of the code
<div class="row" id="group1port">
<div class="col-md-4 col-sm-4">
<div class="portlet light bordered" id="group1porteq">
<div class="portlet-title">
<div class="caption">
<i class="icon-bar-chart font-dark hide"></i>
<span class="caption-subject font-dark bold uppercase">Bulletin</span>
</div>
</div>
<div class="portlet-body">
text
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="portlet light bordered" id="group1porteq">
<div class="portlet-title">
<div class="caption">
<i class="icon-bar-chart font-dark hide"></i>
<span class="caption-subject font-dark bold uppercase">Bulletin</span>
</div>
</div>
<div class="portlet-body">
text
</div>
</div>
</div>
</div>
I'm not sure I fully understand what div's you're trying to find, but this find's both 'group1porteq' divs nested within the 'group1port' div.
$('#group1port').find('#group1porteq').each(function() {
// Do equal height stuff
});
I don't know what equalHeights(), but it sounds like your issues are all related to the selectors. You can find a full list of selector options here https://api.jquery.com/category/selectors/
You have a duplicate id: id="group1porteq" on two divs. You cannot have an id be the same on a page. Try changing it to a class as a first step. Can you add some CSS to this bit of code? it would seem that you are trying to break a table apart. Try adding "display: block" to the class: class="group1porteq" once you change that and see if it breaks the table model so you can get individual heights again.