I've coded a small page using Bootstrap 4 as a framework, but it's not responsive.
Here is my html:
<div class="container h-100 d-flex flex-column" id="container">
<div class="row align-items-start" id="header">
<div class="col">
header
</div>
</div>
<div class="row h-100" id="main">
<div class="col">
<p></p>
</div>
</div>
<div class="row align-items-end" id="footer">
<div class="col">
footer
</div>
</div>
</div>
And here is my css
html, body {
height: 100%;
}
#container {
background-color: rgb(255, 219, 164);
}
#header, #footer {
background-color: rgb(33, 202, 202);
}
When I type a long paragraph inside the <p> element it goes it a bad way and I can't solve that. How can I make it full responsive?
Normally, if it's not responsive you've not imported the required JavaScript. Follow the Quick Start page on the official documentation and that it has been put in the correct place of your project (the </body>). Use a template to start with for better understanting
I can't yet comment because of my rep but adding more code (such as your </body> and <head> information will give the the community more understanding on what you're doing.
Better use min-vh-100 instead of h-100 (or vh-100) so that you define a min-height and in case you have a lot of content you will get a scroll.
#container {
background-color: rgb(255, 219, 164);
}
#header,
#footer {
background-color: rgb(33, 202, 202);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="container min-vh-100 d-flex flex-column" id="container">
<div class="row align-items-start" id="header">
<div class="col">
header
</div>
</div>
<div class="row flex-grow-1" id="main">
<div class="col">
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
</div>
</div>
<div class="row align-items-end" id="footer">
<div class="col">
footer
</div>
</div>
</div>
I tried to replicate the issue that you did mention above. I couldn't replicate it. Also take a look at the files included in tag. Please take a look at this codepen attached Codepen.
`
</div>
<div class="row h-100" id="main">
<div class="col">
<p>Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.</p>
</div>
</div>
<div class="row align-items-end" id="footer">
<div class="col">
footer
</div>
</div>
`
Related
I have a standard Bootstrap grid layout that's been vertically centered.
However, upon window resize, the div content overflows the window, obscuring the top div content. How can I prevent this?
Please see minimal example here: http://jsfiddle.net/8pkubef7/
<div style="width:50%;position:absolute;top:50%;left:25%; transform: translateY(-50%);">
<div class="container">
<div class="row">
<div class="col">
<h1> Header 1 </h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
<p> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
</div>
</div> <!-- end row -->
</div> <!-- end container -->
</div> <!-- end vertical center div -->
Try this:
<div class="container">
<div class="floating">
<div class="row">
<div class="col">
<h1>
Header 1
</h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
<p> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
</div>
</div>
css:
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
word-break: break-all;
}
.container {
position:relative;
}
.floating {
float: left;
position: absolute;
left:25%;
right:25%;
top: 50%;
}
http://jsfiddle.net/c6eyq2rn/
I am currently trying to set up an html email template for my ASP.net application. Emailing part is working but my image link inside the template does not. Following is the body of the email template. I am sure its an issue with Godaddy server where it does not allow the image to be shared publically.
<body>
<div class="container">
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-8">
<img src="www.mocking.com/Images/Public/welcome.jpg" width="100%" alt="">
<br>
<br>
<div class="text-center">
<h1>Welcome to Mocking.com</h1>
<br>
</div>
<i>Please click on "Confirm Activation"</i>
<p > Some Text Some text Some Text Some Text ##PARAM1 text Some Text Some Text Some text Some Text Some Text Some text Some Text Some Text Some text Some Text Some Text Some text Some Text Some Text Some text Some Text Some Text Some text Some Text Some Text Some text Some Text Some Text Some text Some Text </p>
<div class="cls_btn">Activate User</div>
<div > Some Text Some text Some ##PARAM2 Some Text Some text Some Text Some Text Some text Some Text Some Text Some text Some Text Some Text Some text Some Text Some Text Some text Some Text Some Text Some text Some Text Some Text Some text Some Text Some Text Some text Some Text Some Text Some text Some Text <span class="cls_link">Mocking.com </div>
</div>
<div class="col-sm-2">
</div>
</div>
</body>
</html>
Could someone help me how to setup the images public so that email link works fine?
This is my image folder setup at Godaddy.
Thanks,
PG
File permission is set here but there is nothing specific. Everything has read.
Full folder structure
This seems so simple, but I can't seem to get it to work. All I want is to apply spacing between the right side of the screen and the four wide column I have created. I have tried adding:
.spacer{
margin-right: 2%;
}
onto a containing div unsuccessfully. I have it working on my eight wide column but I can't seem to replicate it. Jfiddle: https://jsfiddle.net/fru2yv1f/
<div class="col-lg-12">
<div class="row row-top">
<div class="col-lg-8">
<div class="horizontal-spacer text-center border-green">
<div class="vert-center">
<h1 id="page-two-heading">Page two Heading</h1>
<p id="page-two-sub-heading">Information that is useful, hopefully!</p>
</div>
</div>
</div>
<div id="side-text" class="col-lg-4 hidden-md hidden-sm hidden-xs border-green">
<div class="vert-center">
<h3>This Area Will Disappear on Screen Resize</h3>
<p>text text text text text text text texttext text text text text text text texttext text text text text text text texttext text text text text text text texttext text text text text text text texttext text text text text text text texttext text text text text text text texttext text text text text text text text</p>
</div>
</div>
</div>
The solution was to add a class to the div with class col-lg-12 and then style the div with padding-right: 2%;
Ex.
<div class="col-lg-12 spacer">
.spacer{
padding-right: 2%;
}
Give the margin to the vert-center. Actually you are using all the 12 columns of the bootstrap grid and when you are adding margin-right to the div having col-lg-4 it is exceeding the total width of the 12 columns and hence not working properly.
example snippet
.vert-center {
margin-right: 2%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-lg-12">
<div class="row row-top">
<div class="col-lg-8">
<div class="horizontal-spacer text-center border-green">
<div class="vert-center">
<h1 id="page-two-heading">Page two Heading</h1>
<p id="page-two-sub-heading">Information that is useful, hopefully!</p>
</div>
</div>
</div>
<div id="side-text" class="col-lg-4 hidden-md hidden-sm hidden-xs border-green">
<div class="vert-center">
<h3>This Area Will Disappear on Screen Resize</h3>
<p>text text text text text text text texttext text text text text text text texttext text text text text text text texttext text text text text text text texttext text text text text text text texttext text text text text text text texttext text text text text text text texttext text text text text text text text</p>
</div>
</div>
</div>
I would like my text to remain centered by I would like to move it to the right side of the div. My div is covered with an image background.
I tried changing:
<div class="col-sm-12">
to:
<div class="col-sm-12" style="float:right;">
but it didn't have any effect. Is there a way for me to do this within bootstrap or do I have to use my custom css? And how can this be done?
HTML:
<div id="box" class="vcenter">
<div class="container">
<div class="row center">
<div class="col-md-12">
<div class="row">
<div class="col-sm-12">
<p>Text text text text text text text text text ext text text text text text text text/p>
<p>Text text text text text text text text text ext text text text text text text text/p>
<p>Text text text text text text text text text ext text text text text text text text/p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.vcenter {
display: flex;
align-items: center;
}
#box {
background: url("url here") no-repeat center;
height: 500px;
}
.center {
text-align: center;
}
JSFiddle Demo
You can use bootstrap's grid system
For example like this if your left and right side (column) should be same width
<div class="col-xs-6">
<p>Something left</p>
</div>
<div class="col-xs-6 center">
<p>Something right</p>
</div>
Full example is here: https://jsfiddle.net/woeote07/3/
If you don't need left column you can use offset. Just use latest bootstrap version for this because some older ones doesn't support offset for all column types.
<div class="col-xs-6 col-xs-offset-6 center">
Example here: https://jsfiddle.net/woeote07/5/
Your text is centered right now. If you want it to be on the right side of the page, you can't do the 'col-sm-12', as that takes up the entire row.
Instead, do something like this:
<div class="col-sm-6"><p>the left side</p></div>
<div class="col-sm-6"><p>Text text text text text text text text</p></div>
Then if you want it centered inside the columns, just assign text-align: center; to them.
Weave: http://kodeweave.sourceforge.net/editor/#0b6cf679309a05c75de936bc691576ca
Forked Fiddle: https://jsfiddle.net/woeote07/4/
I would like my text to remain centered by I would like to move it to the right side of the div.
First off .col-sm-12 has a width 100% by default (being the same width as it's parent). Thus you can change it to 50% and then you can use float to have your text on the right side.
.col-sm-12 {
float: right;
width: 50%;
}
Here's a simple snippet!
.vcenter {
display: flex;
align-items: center;
}
#box {
background: url("http://2.bp.blogspot.com/-WEArLbKazLg/Ujg2PL6NG7I/AAAAAAAABSo/UZE_Z-UwPVQ/s1600/Simple-white-light-web-vector-design-image-wallpaper.jpg") no-repeat center;
height: 500px;
}
.center {
text-align: center;
}
.col-sm-12 {
float: right;
width: 50%;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div id="box" class="vcenter">
<div class="container">
<div class="row center">
<div class="col-md-12">
<div class="row">
<div class="col-sm-12">
<p>Text text text text text text text text text ext text text text text text text text</p>
<p>Text text text text text text text text text ext text text text text text text text</p>
<p>Text text text text text text text text text ext text text text text text text text</p>
</div>
</div>
</div>
</div>
</div>
</div>
One way to accomplish this with bootstrap would be to add a separate div that maybe only had a span of 2. This would essentially push your current div to the right side of the screen.
<div class="row">
<div class="col-sm-2">
<p>First Text Area</p>
<p>First Text Area</p>
<p>First Text Area</p>
</div>
<div class="col-sm-10">
<p>Text text text text text text text text text ext text text text text text text text</p>
<p>Text text text text text text text text text ext text text text text text text text</p>
<p>Text text text text text text text text text ext text text text text text text text</p>
</div>
</div>
Plunker Example
Otherwise an easy solution would be to add a margin-left attribute to the style of the div like so.
<div class="col-sm-12" style="margin-left: 60px;">
<p>Text text text text text text text text text ext text text text text text text text</p>
<p>Text text text text text text text text text ext text text text text text text text</p>
<p>Text text text text text text text text text ext text text text text text text text</p>
</div>
Plunker Example 2
col-sm-12 can't float if it has the same width as its parent. Specify a width (absolute or percentage), and it can float.
Like this: new Fiddle
.vcenter {
display: flex;
align-items: center;
}
#box {
background: url("http://2.bp.blogspot.com/-WEArLbKazLg/Ujg2PL6NG7I/AAAAAAAABSo/UZE_Z-UwPVQ/s1600/Simple-white-light-web-vector-design-image-wallpaper.jpg") no-repeat center;
height: 500px;
}
.center {
text-align: center;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div id="box" class="vcenter">
<div class="container">
<div class="row center">
<div class="col-md-12">
<div class="row">
<div class="col-sm-12" style="float:right; width:50%">
<p>Text text text text text text text text text ext text text text text text text text</p>
<p>Text text text text text text text text text ext text text text text text text text</p>
<p>Text text text text text text text text text ext text text text text text text text</p>
</div>
</div>
</div>
</div>
</div>
</div>
Here is the link to the problem. http://garethjweaver.com/portfolio/gjw/index.php?page=gjw
Trying to create a container without having to use overflow. I have my main container for all of the content like so.
.container {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
So far so good, I test it by placing a border around it and it shows it covers all of the content.
Now when I try and do another container for another section it doesn't work. Like so.
http://jsfiddle.net/4wN8q/
This is the other container I'm trying to create..
.portfolio-container {
width: 980px;
margin-left:auto;
margin-right:auto;
}
But when I add a border around it it doesn't cover all of the content, it just stays at the top covering nothing. overflow:auto can fix this although when I'm trying to make my images responsive the scroll bar shows up down the bottom and it doesn't scale and it will work if I take overflow out.
Thanks in advance.
EDIT: Updated to include the code for it
<div class="portfolio-container">
<div class="content-container">
<div class="content">
Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text
</div>
<div class="arrows">
<a class="portfolio-button" href="#">Visit Website</a>
<i class="float-left fa fa-arrow-circle-o-left fa-3x"></i>
<i class="float-right fa fa-arrow-circle-o-right fa-3x"></i>
</div>
</div>
<div class="portfolio-images">
<img class="image-padding"src="./images/cz1-chrome.png">
<img src="./images/cz-chrome.png">
</div>
Had to change the image stylings instead of removing overflow