I'm using Bootstrap 4 to create a row of 2 items within a column where the first item stays all the way to the left in the row and the second item is always centered in the row. I am able to do this with my own CSS. Is there a way to do this only using Bootstrap with no extra CSS?
Here is my CSS:
.float_left {
float:left;
}
.float_center {
float: right;
position: relative;
left: -50%;
text-align: left;
}
.float_center > .child {
position: relative;
left: 50%;
}
My HTML:
<div class="row" >
<div class="col-12" style="z-index:5000;">
<span class="float_left">Left</span>
<div class="float_center">
<span class="child">Center</span>
</div>
</div>
</div>
display:flex; will make the data to sit in single row.
When you assign width of equal size ie 50% and move the text to left, that will sit in the center without extra code.
Flex is good for layout design, so don't worry about responsiveness it will take care of that as well.
.align {
display: flex;
border: 1px solid red;
width: 100%;
}
.float_left,
.float_center {
width: 50%;
text-align: left;
}
<div class="row">
<div class="col-12 align" style="z-index:5000;">
<span class="float_left">Left</span>
<div class="float_center">
<span class="child">Center</span>
</div>
</div>
</div>
why don't you use col? I think this will work.
<div class="row" >
<div class="col-12" style="z-index:5000;">
<div class="row">
<span class="col">Left</span>
<div class="col">
<span class="child">Center</span>
</div>
</div>
</div.
</div>
if you want fixed width for left side custom width
Related
guys, I'm trying to achieve a layout, where I have a container with 2 cols, however, the right col needs to be positioned to the right of the screen, and not to the right of the container... if that makes sense?
<div class="container">
<div class="row">
<div class="col-lg-6">
this content is inside the container normally
</div>
<div class="col-lg-6">
image will go here, but needs to be positioned to the right of the screen, not to the right of the container
</div>
</div>
</div>
Try putting text in div and then add class mr-0 to it.
This is how you can do it.
Working Example
<div class=".parent">
<div class="child">
image will go here, but needs to be positioned to the right of the screen, not to the right of the container
</div>
<div class="abs">
<div class="container">
<div class="row">
<div class="col-sm-6">
this content is inside the container normallythis content is inside the container normally
</div>
</div>
</div>
</div>
</div>
.parent {
position: relative;
}
.child {
float: right;
width: 50%;
background: red;
}
.abs {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.container {
border: 1px solid green;
}
I want to align the image to left, then its title then the text below it.
Here is the screenshot of what I want to make.
I have made DIV for each content. I dont know if its okay to do that.
I made it, because I ll have more control for individual content.
But I havent ben able to do so.
.howtocontainer {
height: 1985px;
width: 1121px;
background-image: url("//azlily.bex.jp/eccube_1/html/template/default/img/howto/background.png");
}
.firstsection {
/*background: rgb(255,255,255,0.3);*/
background: grey;
height: 200px;
position: relative;
top: 300px;
margin: 0 40px 0 40px ;
}
.firstpic {
padding-top: 20px;
}
.firstsecbanner {
float: right;
margin-right: 500px;
margin-top: -15px;
}
<div class ="howtocontainer">
<div class="firstsection">
<div class="firstpic">
<img src="https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg?auto=compress&cs=tinysrgb&h=350">
</div>
<div class="firstsecbanner">
<img src="https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg?auto=compress&cs=tinysrgb&h=350">
</div>
<div class="firstsectext">
お好みの量（目安はピンポン玉大です）を手に取って、パートナーの性感帯を指の腹や手のひらで優しくマッサージ<br>
してください。<br>
最初は背中や首筋、そして胸などと、段々と敏感な部分へ伸ばしていくと、ヌルヌルと滑る感覚が気持ちよく、エロ<br>
ティックな気分を高めることができます。<br><br>
性感帯は塗った部分が敏感になり、ただ触れるだけでも極上の気持ち良さ。<br>
シュチュエーションに合わせてラブローションの香りを変えたりしながら楽しみ方を<br>
見つけてください。
</div>
</div>
<div class="secondsection"></div>
<div class="thirdsection"></div>
</div>
All I did was Included image and text in one DIV
But gave a class to image by <img class="class" src"path" >
Then I did float:left to .img class.
There are 2 key points that you should notice about using float:
Float container should be set a specific width (absolute or relative width)
clear all floating items
You should change your HTML structure a little bit, and add some CSS styles:
.firstpic {
float: left;
width: 300px; /*this width is equal with its image's width */
}
.description {
float: left;
width: calc(100% - 300px);
}
/* Clear floating item */
.firstsection::after {
display: table;
content: "";
clear: both;
}
<div class="firstsection">
<div class="firstpic">
<img src="the-image-on-left-side">
</div>
<div class="description">
<div class="firstsecbanner">
<img src="the-title-image-on-top">
</div>
<div class="firstsectext">
お好みの量（目安はピンポン玉大です）を手に取って、パートナーの性感帯を指の腹や手のひらで優しくマッサージ<br>
してください。<br>
最初は背中や首筋、そして胸などと、段々と敏感な部分へ伸ばしていくと、ヌルヌルと滑る感覚が気持ちよく、エロ<br>
ティックな気分を高めることができます。<br><br>
性感帯は塗った部分が敏感になり、ただ触れるだけでも極上の気持ち良さ。<br>
シュチュエーションに合わせてラブローションの香りを変えたりしながら楽しみ方を<br>
見つけてください。
</div>
</div>
</div>
Please add absolute URL instead of relative URL to see your pictures.
Hope this helps.
A disadvantage of using floats is that it disturbs the natural document flow. You may want to consider an alternative using flexbox.
.firstsection {
display: flex;
}
.firstpic {
width: 300px;
/*this width is equal with its image's width */
}
.description {
width: calc(100% - 300px);
}
<div class="howtocontainer">
<div class="firstsection">
<div class="firstpic">
<img src="//azlily.bex.jp/eccube_1/html/template/default/img/howto/01.jpg">
</div>
<div class="description">
<div class="firstsecbanner">
<img src="//azlily.bex.jp/eccube_1/html/template/default/img/howto/firstsecbanner.png">
</div>
<div class="firstsectext">
お好みの量（目安はピンポン玉大です）を手に取って、パートナーの性感帯を指の腹や手のひらで優しくマッサージ<br> してください。
<br> 最初は背中や首筋、そして胸などと、段々と敏感な部分へ伸ばしていくと、ヌルヌルと滑る感覚が気持ちよく、エロ
<br> ティックな気分を高めることができます。
<br><br> 性感帯は塗った部分が敏感になり、ただ触れるだけでも極上の気持ち良さ。
<br> シュチュエーションに合わせてラブローションの香りを変えたりしながら楽しみ方を
<br> 見つけてください。
</div>
</div>
</div>
<div class="secondsection"></div>
<div class="thirdsection"></div>
</div>
How can I align div element at the bottom of parent element while using bootstrap col?
.wrapper {
background-color: green;
height: 200px;
}
.bottom {
position: relative;
}
.bottom-div {
height: 200px;
position: absolute;
bottom: 0;
}
<div class="wrapper">
<div class="col-md-3 bottom">
<div class="bottom-div"> TEST1 </div>
</div>
<div class="col-md-6">
TEST2
</div>
<div class="col-md-3">
TEST3
</div>
</div>
bottom div element does not align at bottom. What is correct way of doing this? Thanks.
UPDATE: Div element runs out of wrapper (it basically moves up)
Not sure exactly what you're trying to do, as #CBroe said flexbox would be the best way but try this:-
/* CSS used here will be applied after bootstrap.css */
.wrapper{
background-color:green;
height: 200px;
position: relative;
}
.bottom-div{
height: 50px;
width: 50px;
position: absolute;
bottom:0;
left: 0;
background-color: red;
}
.testclass {
height: 100%;
}
<div class="wrapper">
<div class="col-md-3 testclass">
<div class="bottom-div"> TEST1 </div>
</div>
<div class="col-md-6">
TEST2
</div>
<div class="col-md-3">
TEST3
</div>
</div>
I am having an issue aligning two different elements to where they are parallel horizontally. I am wanting the second grid right_service_wrap to appear on the right side of the page just like the left_service_wrap. I am not sure what I am doing wrong that the float right is appearing below the left_service_wrap.
Anyone have any ideas??
.left_service_wrap {
}
.right_service_wrap {
float: right;
display: inline;
}
.title_left {
margin-left: 20%;
}
.title_right {
}
.service_wrapper {
border: 1px solid black;
margin: 15px;
width: 20%;
}
.service_list {
margin-left: 20%;
}
<div class="left_service_wrap">
<div class="title_left">A LIST OF OUR SERVICES</div>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title">Flooring</div>
<div class="service_description">The best floors!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Roofing</div>
<div class="service_description">Your roof will be perfect!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Siding</div>
<div class="service_description">mmmm siding.</div>
</div>
<div class="service_wrapper">
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Kitchen Remodels</div>
<div class="service_description">Pretty kitchen.</div>
</div>
</div>
</div>
<div class="right_service_wrap">
<div class="title_right">A LIST OF OUR SERVICES</div>
</div>
Set the width of both to 50% and do:
.left_service_wrap {
float:left;
width:50%;
}
.right_service_wrap {
float: left;
width:50%;
}
Working demo here: https://jsfiddle.net/usrce45v/
Consider that your requirement of an extra left margin to be applied to the left container requires you to rearrange the width of both left and right containers. So, for a left-margin of 20% the equation becomes:
whole parent width (100%) minus margin (20%), half the result (40%).
I am not sure if I fully understand your question, but if it is what I think, you have to add float: left to the .left_service_wrap class rule. (and define a width for it that allows the elements in it to be displayed as desired)
How i can center div elements horizontally, so when i change the width of the browser, the last div go down with css?
So:
---||||-||||-||||---
--------||||--------
When i write:
<div style="float: left; position: relative; left: 50%;">
<div style="float: left; position: relative; left: -50%;">
<div style="width:315px; height:340px; float: left; margin-top: 10px; margin-bottom: 10px;">Text</div>
<div style="width:315px; height:340px; float: left; margin-top: 10px; margin-bottom: 10px;">Text</div>
...
</div>
</div>
Then after a element go down, all div elements go to the left side.
I would recommend using display: inline-block on the elements and then using text-align: center on the container to handle the centering you want:
I cleaned up your HTML but here is the basic HTML formatting with a container class and multiple (as many as you want) block class DIVs:
<div class="container">
<div class="block">Text</div>
<div class="block">Text</div>
<div class="block">Text</div>
</div>
The CSS modifies the display settings of the blocks and the text-alignment of the container:
div.block {
display: inline-block; /* this changes the elements to behave more like inline elements (think <span>s) */
width: 315px;
margin: 10px 0;
height: 340px;
}
div.container {
width: 100%;
text-align: center; /* this is the magic that centers the elements */
}
I put together a small demo that should help demonstrate this method: JSFIDDLE
Be Aware: a small 'quirk' exists with the display: inline-block CSS. it causes a small amount of space to occur between the elements. This can be removed multiple ways, my preferred methods being either using comments or wrapping the closing tags of the DIVs. (the issue is caused by the return/spaces between the elements in the HTML):
<div class="container">
<div class="block">Text</div><!--
--><div class="block">Text</div><!--
--><div class="block">Text</div>
</div>
<div class="container">
<div class="block">Text</div
><div class="block">Text</div
><div class="block">Text</div>
</div>
reference for the quirk behavior
Create a container <div> that is 100% of a given area. Then set each <div>'s width inside the container to be a % and float: left;. They'll stack next to each other until they do not fit and will break to the next line.
.container {
width: 100%;
}
.three {
width: 33%;
min-width: 225px;
float: left;
border: 1px solid black;
}
<div class="container">
<div class="three">
<p>Something</p>
</div>
<div class="three">
<p>Something</p>
</div>
<div class="three">
<p>Something</p>
</div>
</div>
Run the snippet.
You could use media queries to write different css code for different sizes:
Media Queries