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>
Related
I've created following jsfiddle to visualize my issue: https://jsfiddle.net/ch8r1z4q/1/
The image shows a page layout I created. The yellow is a sidebar, the blue is a content wrapper, green mainelement and white subelement. The red is the wrapper for the whole thing, which is shown because the sidebar is cut off.
My issue here is I need to wrap the content in the blue wrapper, so the read section doesn't show, but the content instead has the width of the whole page. This is as to avoid waste of space in a several-page long scenario.
My issue lies in my hierachy structure:
<div class="content">
<div class="wrapper">
<div class="element">
<div class="subelement">
text text texttext text texttext text texttext text text
</div>
<div class="subelement">
text text texttext text texttext text texttext text texttext text text
</div>
</div>
<div class="element">
<div class="subelement">
text text texttext text texttext text texttext text texttext text text
</div>
<div class="subelement">
text text texttext text texttext text texttext text texttext text texttext
</div>
</div>
<div class="element">
<div class="subelement">
text text texttext text texttext text texttext text texttext text texttext text text
</div>
<div class="subelement">
text text texttext text texttext text texttext text texttext text texttext text text
</div>
</div>
</div>
<div class="sidebar">
<!-- Some other info -->
</div>
</div>
If I only had the blue wrapper, I could simply put the sidebar into the wrapper as a float, and text would wrap. But I'm working with this element/subelement functionality, which doesn't provide that kind of freedom. Is there some flex solution, or other work around to achieve the desired result?
Elements and subelements are dynamic, so I'm afraid a hardcoded solution is unavailable.
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>
`
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 have created a row with the following code:
<div class="row justify-content-between row-spacing">
<div class="col-sm-12 col-md-4 bg-orange" >
<h1>Word1<br>Word 2<br>Word 3</h1>
</div>
<div class="col-sm-12 col-md-7 bg-orange">
<p class="content-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>
Which has the blow appearance:
Website screenshot
My question is: How can I make Padding#1 and Padding#2 to have the same value?
Even after having used margin/padding - top:0 I did not solve it.
Thanks in advance.
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>