I am trying to create a percentage circle image with text underneath. I am not sure where to place the text so that it goes underneath. Right now it goes to the right side of the image. Thanks!
<div class="col-sm-3 wow fadeInDown text-center">
<div class="c100 p39 medium orange">
<span>39%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</div>
<p class="lead"> example placeholder text </p>
You can simply put a p tag that automatically breaks like that :
<img id="myImage" src="...">
<p>My percentage</p>
I tried to run your code but the output is:
39%
example placeholder text
i didn't get what you said...
but if you want to put your text underneath your image
executing/coding the image first will do, if not
then use CSS instead. :D
<img src="">
<p>Example placeholder text</p>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-3 wow fadeInDown text-center">
<div class="c100 p39 medium orange">
<span>39%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
<p class="lead"> example placeholder text </p>
</div>
The reason for why it does that is because you are using bootstrap and putting the text outside the col-sm-3 div which will tell the code to put the next part in the overflowing columns. If you put it inside it will end up under it. See snippet.
This worked:
CSS:
.col-sm-3 {
display: flex;
flex-wrap: wrap;
}
Related
I tried to align several items by using two columns and positioning the text, icon, and line within the left column and the other text on the right column, but they don't align properly. It currently looks like this but it should look like the picture attached. How can I fix this?
<div class="col-12">
<h1 class="orange">LET'S RUB IT IN</h1>
<h2>How Much?</h2>
</div>
<div class="col-6"> <!--left column-->
<div class="circle side">
<img src="./chemical#2x.png" alt="chemical" class="icon">
</div>
<h5 class="side">1 Shot Glass<br>or 1 oz.</h5>
<div class="line v side"></div> <!--vertical line-->
</div>
<div class="col-6"> <!--right[enter image description here][1] column-->
<p>To fully cover your body, you'll need about 1 ounce of sunscreen or just enough to fill a shot glass.</p>
</div>
It looks like the issue is you aren't using the .container > .row > .col convention. You've skipped the .container, and are sometimes skipping the .row. Additionally, you are not using the grid for the section shown in your screenshot.
Refer to the Bootrap documentation when there are Bootstrap issues.
https://getbootstrap.com/docs/5.0/layout/grid/
The first thing is you should wrap all/most of your <body> content in a <div class="container-fluid">.
Then add any missing .rows.
This is what you have:
This is what you should have:
Write the contents of that next section to match your design.
ex.
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-6" style="border-right: 2px solid orange;">
<div class="circle side" data-sr-id="9" style="visibility: visible; opacity: 1; transition: opacity 2s cubic-bezier(0.5, 0, 0, 1) 0s;">
<img src="./chemical#2x.png" alt="chemical" class="icon">
</div>
</div>
<div class="col-6">
<h5 class="side">1 Shot Glass<br>or 1 oz.</h5>
<div class="line v side"></div>
</div>
</div>
</div>
<div class="col-sm-6">
<p>To fully cover your body, you'll need about 1 ounce of sunscreen or just enough to fill a shot glass. </p>
</div>
</div>
You can Refere Bootstrap Grid System
Here:https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
It will fix your problem
I have a page that shows text retrieved from a mysql database.
I can't figure out why I cannot get the text to display as a block of text within the div. Instead it overflows the div. (I'm using bootstrap 3) Here is a fiddle
<div class="container">
<div class="row">
<!---MAIN COLUMN------>
<div class="col-xs-12 col-md-6 col-sm-8 col-lg-6 col-centered">
<h2>
How to keep the text inside the div?
</h2>
<div class="mytext">
fdsnkfhskghkgskghsdkghdskghdsklhgkdlsghds
khgkdshgdksghdsklghdskg hkdslhgkdshgkdshgkdshgkd
shgksdlhgksdhgkdslhgkdshgkdshgkdshgksd hgkldshgkd
shgkldshgkhdsgkhdskghdskhgkdlshgkdshgkldsh
gkdshgklhds kghdskghdskl
<small>
</small>
</div>
</div>
</div>
</div>
Used word-break:break-all; to break the word
.mytext{
word-break:break-all;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<!---MAIN COLUMN------>
<div class="col-xs-12 col-md-6 col-sm-8 col-lg-6 col-centered">
<h2>
How to keep the text inside the div?
</h2>
<div class="mytext">
fdsnkfhskghkgskghsdkghdskghdsklhgkdlsghds
khgkdshgdksghdsklghdskg hkdslhgkdshgkdshgkdshgkd
shgksdlhgksdhgkdslhgkdshgkdshgkdshgksd hgkldshgkd
shgkldshgkhdsgkhdskghdskhgkdlshgkdshgkldsh
gkdshgklhds kghdskghdskl
<small>
</small>
</div>
</div>
</div>
</div>
give CSS to
.mytext{
width:200px;
word-wrap:break-word;
border:thin black solid;
}
Here is updated JSFiddle
This is a purely hypothetical question - on a real website you will have real Text consisting of real words which are much shorter than your example phantasy word/s, and they will fit nicely into that div since the text will be broken at word ends, i.e. spaces. Just use Same real text and you'll see.
I have this:
<div class='container'>
<div class='row'>
<div class="col-md-5 col-sm-4 col-xs-12">
text goes here
</div>
</div>
<!--//col-->
<div class='col-md- col-sm-6 col-xs-12'>
<div class='text-center'>
image goes here
</div>
</div>
</div>
Pictures will tell what I'm trying to do better. Here is what it looks like right now:
bad-pupper.png
It's lined up properly but it doesnt look good. I want to match the center of the image to the text instead.
good-pupper.png
How should I do this?
You could wrap the two content divs inside a new div. The new div you'll give a height, line-height. That way you can use vertical-align which will center the image the way you wanted
just add padding-top:somepixel to your text div
like below
.text-center {
padding-top:15px;
}
Yes You can do that,
Check this fiddle here
Sample HTML
<div class="container">
<div class="row">
<div style="display:table;">
<div style="display:table-cell;vertical-align:middle;">
<div style="margin-left:auto;margin-right:auto;">
<p>This is heading</p>
<img src="https://unsplash.it/200" alt="">
</div>
</div>
</div>
</div>
</div>
Respective CSS
p,img {
margin:20px;
display:inline-block
}
For your reference : Checkout this link
Hello so I have a simple html code and this is the output:
While the code is
<img class="img-responsive" style="float:left;width:400px;height:700px;" src="../assets/images/san_jacinto.jpg">
<h3>Founding of the town</h3>
<p>Some text here/p>
Now I've managed to do it using bootstrap 2.3.1 media and now I got another problem:
What I need to fix now is the text should continue below the image. Is that possible in bootstrap also? Or if not, what else can I do?
you can use bootstrap Media object :
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
The solution is pleasingly easy, try placing your P and h3 tags inside a parent dive,assign a css class to it, and add paddings to that css class. check it out here:
padding
You can add some right-margin to image or
Left-padding to paragraph or
text-indent to paragraph.
Why don't you put the image inside a col-md-4 and the text inside col-md-8?
<div class="container">
<div class="col-md-4">
<img class="img-responsive" src="../assets/images/san_jacinto.jpg">
</div>
<div class="col-md-8">
<h3>Founding of the town</h3>
<p>Some text here/p>
</div>
</div>
I'm trying to make a simple page header with bootstrap 3. Here's the code:
<div class="page-header">
<h1>Text on the left</h1>
<h3 class="text-right">This to the right but on the same line</h3>
</div>
Here's a jsfiddle to try: http://jsfiddle.net/DTcHh/2450/
Basically I just want to have text on the left and right inside the page-header, but on the same line.
The usual tricks of using float:left and float:right as with normal html "break" the page-header, meaning the text is properly aligned but is displayed outside (under) the page-header, which remains empty.
Any clues?
you can use "pull-right" and "pull-left" classes, with "clearfix" class after.
(Bootstrap 3)
<div class="page-header">
<div class="pull-left">
<h1>Text on the left</h1>
</div>
<div class="pull-right">
<h3 class="text-right">This to the right but on the same line</h3>
</div>
<div class="clearfix"></div>
</div>
also you can adjust line height on the h3 tag in the right, if you want to match with h1
Fiddle for Bootstrap 3: https://jsfiddle.net/darkosss/dy9wjk2q/
(as of Bootstrap 4.1)
use float-left and float-right instead. You still need the clearfix.
<div class="page-header">
<div class="float-left">
<h1>Text on the left</h1>
</div>
<div class="float-right">
<h3 class="text-right">This to the right but on the same line</h3>
</div>
<div class="clearfix"></div>
</div>
Fiddle for Bootstrap 4: https://jsfiddle.net/darkosss/eozs65qb/
if you are using Bootstrap, you should do something like
<div class="page-header">
<div class="row">
<div class="col-md-6">
<h1>Text on the left</h1>
</div>
<div class="col-md-6">
<h3 class="text-right">This to the right but on the same line</h3>
</div>
</div>
</div>
if you want to "stylize" the h1, h2, etc, change it to "display:block" and you'll have to add a "width" attribute anyway
use the following structure to position with bootstrap:
<div class= 'container'>
<div class='row'>
<div class ='md-col-4'>
<h1>Text on the left</h1>
</div>
<div class = 'md-col-4.col-md-offset-4'>
<h3 class='text-right'>This to the right but on the same line</h3>
</div>
</div>
Think of the row as a grid across of 12. So fist 4 left 3rd. 2nd div is the 3rd third with a 4 grid offset or gap.
http://getbootstrap.com/css/