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.
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 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;
}
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
i have the following:
"
<div class="container">
<div class="row">
<div class="col-md-3">
<h3><span class="label label-default">Current Job</span></h3>
</div>
<div class="col-md-offset-10">
<h6 id="dateTime">23/07/2015 12.00</h6>
</div>
</div>
</div>
</div>
<div class="panel-body">
</div>
<div class="panel-footer"></div>
"
Using only bootstrap, is it possible to center the two vertical labels of different dimensions (Current Job and Date) contained in Header panel (that contains a grid) and how to do it?
You need to alter the CSS for the following containers:
<div class="col-md-3"> and <div class="col-md-offset-10">
Giving both containers float: none; and margin: 0 auto will definitely center both. If you want the text to be centered as well, add some text-align: center
That should have you covered.
Sorry, forgot to mention that the container <div class="col-md-offset-10"> needs to match the width of the other container (25%).
You can do this by removing classes from your div tags for labels and giving text-center class to div with class row. This will make both labels appear in the middle of the page and one after another vertically. this is what your code container will look like:
<div class="container">
<div class="row text-center">
<div>
<h3><span class="label label-default">Current Job</span></h3>
</div>
<div>
<h6 id="dateTime">22/07/2015 12:00:00</h6>
</div>
</div>
</div>
I have a question regarding centering row vertically!
I have here a simple html, with use of bootstrap 3:
<div class="container">
<div class="row">
<div class="col-sm-12 text-center" style="padding:5 20 5 20;">
Some text text text text text .....
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="thumbnail">
<img data-src="holder.js/460x308">
</div>
</div>
</div>
</div>
I would like to center this container or row ... doesn't matter.
So imagine i have a window which is 500px x 500px
I would like to pisition it in the middle of it, not on top (what is now the case) or bottom, but in center
PS: http://jsfiddle.net/e89TE/
try this css:
.container{
display:table;
}
.row{
display: table-cell;
vertical-align: middle;
}
should work. ps. post a fiddle next time
First thing you will need to do if you want the type on TOP of the image is make the image a background image:
<div class="col-sm-12 text-center">
<div class="foo">
Some text text text text text …..
</div>
</div>
The css
.foo {
background-image:url("holder.js/460x308");
}