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.
Related
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>
`
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>
hey i want to make some text in the left side and one picture in the right side it should be responsive
i thought it should look like this
CATEGORY
text text text mid |-----|
text text text mid |img|
text text text mid |-----|
and when it sizes to small pictures i would like it like this:
CATEGORY
text text text ......|sameimage|
text text text ..... |IMAGEimg|
text text text text text text
here is my code for now:
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-6">
<a> </a><a> </a>
<h2>Category Name</h2>
<br>text test some things just for testing his text is unnecesarry
<br>This is random text dont worry his text is unnecesarry
<br>This text is unnecesarry his text is unnecesarry
<br>It really is unnecesarry just decoration his text is unnecesarry
<br>for testing purposes of the website's design his text is unnecesarry
<br>
<br>
<h3>More Templates</h3>
</div>
<div class="col-xs-5 col-md-5">
<img class="img-responsive" src="test.jpeg" id="image">
</div>
</div>
</div>
the problem when I view it on mobiles the text is like
category
text
text ........ |IMAGE|
text ..........|--------|
text
text
text
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>
A portion of a site I am working on has a two-column design. I would like this to be implemented for all screen sizes, except on xs devices. On xs devices, I would like a single column design. I feel like the below approach is incorrect, as the col-span should always add up to 12 in all cases, and it is currently not the case for xs screens. On the other hand, if I change it col-xs-6, it is forcing double column designs on extra small screens, which I am trying to avoid.
What is the correct way to accomplish a single column design on extra smalls screens, while maintaining a double column design on all other screen sizes ?
This is what I tried:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="ac-wrapper">
<div class="ac-h">
Heading 2
</div>
<p class="ac-p">
text here text here text here text here text here text here text here text her text here text here text here text here text here text here text here text here text here text here
</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="ac-wrapper">
<div class="ac-h">
Heading 123
</div>
<p class="ac-p">
text here text here text here text here text here text here text her text here text here text here text here text here text here text here text here text her text here text here text here text here
</p>
</div>
</div>
</div>
</div>
One solution is to toggle content visibility using http://getbootstrap.com/css/#responsive-utilities