I am creating a website structure with the help of bootstrap.
The problem is while arranging 3 div tags in 1 main div tag, they are not arranging side by side.
They themselves get arranged one below another.
<div class="col-md-12 collapse" style="border:1px solid blue;" id="part1">
<div class="col-md-4" style="border:1px solid green;"><h5>Part 1.1</h5></div>
<div class="col-md-4" style="border:1px solid green;"><h5>Part 1.2</h5></div>
<div class="col-md-4" style="border:1px solid green;"><h5>Part 1.3</h5></div>
</div>
I want to arrange the 3 div tags one beside another.
You need to wrap a row around your columns.
<div class="col-md-12 collapse border-solid border-blue" id="part1">
<div class="row">
<div class="col-md-4 border-solid border-green"><h5>Part 1.1</h5></div>
<div class="col-md-4 border-solid border-green"><h5>Part 1.2</h5></div>
<div class="col-md-4 border-solid border-green"><h5>Part 1.3</h5></div>
</div>
</div>
Please do not use inline css, consider adding classes instead.
.border-solid {
border-style: solid;
border-width: 1px;
}
.border-blue {
border-color: blue;
}
.border-green {
border-color: green;
}
Remove Collapse
<div class="col-md-12" style="border:1px solid blue;" id="part1">
<div class="col-md-4" style="border:1px solid green;"><h5>Part 1.1</h5></div>
<div class="col-md-4" style="border:1px solid green;"><h5>Part 1.2</h5></div>
<div class="col-md-4" style="border:1px solid green;"><h5>Part 1.3</h5></div>
</div>
.col-md-4 {
display: inline-block;
}
jsfiddle
<div style="width: 100%;">
<div style="float:left; width: 20%">left<hr width="1" size="500">
</div>
<div style="float:none;">middle<hr width="1" size="500">
</div>
<div style="float:right;">right
</div>
Related
I have 3 div s inside a another div, I want two of them starts at the same top position and the other one be in center of the other. this is the code
<div class="col-lg-8 col-md-8 col-xs-12 ">
<div class="col-1 div-container-product-images showbordergreen ">
<div class="div-product-images-list">
#foreach(var item in Model.Images)
{
<div class="mt-2 d-block"><img src="~/#item" width="70" height="70" /></div>
}
</div>
</div>
<div class="col-6 text-center d-inline-flex showborderred">
<img src="~/#Model.Images.FirstOrDefault()" width="200" height="300" style="padding: 10px;" />
</div>
<div class="col-4 d-inline-flex showborderblue">
Title
</div>
</div>
and this is css
.div-container-product-images {
display: inline-flex;
vertical-align: middle;
}
.div-product-images-list{
margin: auto;
}
.showborderred {
border: 2px solid red;
}
.showborderblue {
border: 2px solid blue;
}
.showbordergreen {
border: 2px solid green;
}
but it become like this:
I want the blue box and red box starts at same top position and the green box in middle height of red box
how can I do that?
Enable flex on your parent container. Then add align-items-start class to it and align-self-center to the green box.
I hope below code helps you.
I have wrapped columns in one row and added class .align-items-start for align column to top. and added .align-self-center class on last column which you want to align center.
.div-container-product-images {
display: inline-flex;
vertical-align: middle;
}
.div-product-images-list{
margin: auto;
}
.showborderred {
border: 2px solid red;
}
.showborderblue {
border: 2px solid blue;
}
.showbordergreen {
border: 2px solid green;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row align-items-start">
<div class="col-4 ">
<div class="div-container-product-images w-100 showbordergreen ">
<div class="div-product-images-list ">
<img src="~/#Model.Images.FirstOrDefault()" width="200" height="300" />
</div>
</div>
</div>
<div class="col-4 text-center d-inline-flex showborderred">
<img src="~/#Model.Images.FirstOrDefault()" width="200" height="300" />
</div>
<div class="col-4 align-self-center">
<div class="showborderblue">
Title
</div>
</div>
</div>
Sorry if the title is confusing. I have included a screenshot of my issue to make it more clear.
Essentially, I want the green-bordered div to be directly underneath the red-bordered div without the blue-bordered div interfering.
Here is my HTML code (I am using Bootstrap v3.3.7)
<div class="container appParent">
<div class="row">
<div class="col-md-6" id="song-view">
<app-selected-song-view></app-selected-song-view>
</div>
<div class="col-md-6" id="songs-added">
<app-songs-added></app-songs-added>
</div>
</div>
<div class="row">
<div class="col-md-6" id="playlist-form">
<app-playlist-form></app-playlist-form>
</div>
</div>
</div>
My CSS is only putting the borders around the div. Everything else is bootstrap.
#song-view{
border: 2px solid red;
}
#songs-added{
border: 2px solid blue;
}
#playlist-form{
border: 2px solid green;
}
In this case, use pull-right, and keep all of the col- in a single row.
<div class="container appParent">
<div class="row">
<div class="col-md-6" id="song-view">
<app-selected-song-view></app-selected-song-view>
</div>
<div class="col-md-6 pull-right col-xs-12" id="songs-added">
<app-songs-added></app-songs-added>
</div>
<div class="col-md-6" id="playlist-form">
<app-playlist-form></app-playlist-form>
</div>
</div>
</div>
http://www.codeply.com/go/189ofQG5Sj
You can re-arrange your HTML.
#song-view {
border: 2px solid red;
height: 100px;
margin-bottom: 30px;
}
#songs-added {
border: 2px solid blue;
height: 150px;
}
#playlist-form {
border: 2px solid green;
height: 100px;
margin-bottom: 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container appParent">
<div class="row">
<div class="col-md-6">
<div id="song-view">
<app-selected-song-view></app-selected-song-view>
</div>
<div id="playlist-form">
<app-playlist-form></app-playlist-form>
</div>
</div>
<div class="col-md-6">
<div id="songs-added">
<app-songs-added></app-songs-added>
</div>
</div>
</div>
</div>
You can simple use min-heights and surround the containers and rows with a div for extra styling. You can check this example I quickly made: JsFiddle
<div class="song-list">
<div class="row">
<div class="container">
<div class="col-md-6" id="song-view">
Song View
</div>
<div class="col-md-6" id="songs-added">
Songs Added
</div>
</div>
</div>
</div>
<div class="playlist">
<div class="row">
<div class="container">
<div class="col-md-6" id="playlist-form">
Playlist Form
</div>
</div>
</div>
</div>
CSS:
.song-list #song-view {
border:1px solid blue;
min-height:300px;
}
.song-list #songs-added {
border:1px solid red;
min-height:500px;
}
.playlist #playlist-form {
border:1px solid green;
}
I have two bootstrap columns, side by side, but when I add a margin to separate them then the columns stack on top of each other. I am using the Mixed: mobile, tablet, and desktop grid template for my two columns, and I'm not sure whether this is the cause.
#antGame { // container
height: 60%;
position: relative;
background-color: #fff;
border: 1px solid grey;
padding: 0 !important;
}
#stimuliContainer {
height: 40%;
}
#stimuli {
width: 100%;
max-height: 100%;
}
#errorMsg {
height: 20%;
width: 100%;
}
#antInstruct {
height: 60%;
background-color: #fff;
border: 1px solid grey;
}
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-8" id="antGame">
<div id="stimuliContainer">
<img id="stimuli" src="images/ant/cues/blank.png">
</div>
<div class="col-xs-12 col-sm-6 col-lg-8" id="errorMsg">
<span>Error Message</span>
</div>
</div>
<div class="col-xs-6 col-lg-4" id="antInstruct">
<h4>Instructions</h4>
<span>Hi</span>
</div>
</div>
</div>
I don't recommend to override the padding of the Bootstrap columns, because it can break the responsive, but you know, sometimes you are forced to do it.
In that case the most clean way you can do, is add a custom class .padding-2, that overrides the Boostrap padding but don't destroy the responsive.
HTML
<div class="container">
<div class="row">
<div class="col-xs-6 padding-2 ">
<div style="border: 1px black solid; background-color: red;">
1 col
</div>
</div>
<div class="col-xs-6 padding-2 ">
<div style="border: 1px black solid; background-color: blue;">
2 col
</div>
</div>
</div>
</div>
CSS
.padding-2 {
padding-left: 2px;
padding-right: 2px;
}
Demo: http://www.bootply.com/eO033QYCn3
Try to use padding instead of margin, and then, if you want to have for example border, you can add another element inside this one with padding.
Here's an example:
<div class="container">
<div class="col-xs-6" style="padding: 5px">
<div style="border: 1px black solid;">
1 col
</div>
</div>
<div class="col-xs-6" style="padding: 5px">
<div style="border: 1px black solid;">
2 col
</div>
</div>
</div>
And demo:
https://plnkr.co/edit/5fCMTJMJWPALk3W45t1i?p=preview
this is my code :
<!DOCTYPE>
<html>
<body>
<div class="main">
<div id="div1" style="float: left;height: 200px;border:1px solid red; ">1</div>
<div style="clear:both"></div>
<div id="div2" style="border:1px solid red;margin-top:20px;background-color: #FFF; ">2</div>
</div>
</body>
</html>
in Chrome margin-top is enabled , div1 and div2 Apart 20px;
but in IE8 , div1 and div2 are always keep together。
you can float:left in second div too.
and with adding a div in the second div you can disable aspects of floated div check http://jsfiddle.net/SzgGz/3/
HTML:
<div class="main">
<div id="div1" style="float: left;height: 200px;border:1px solid red; ">1</div>
<div style="float:left; clear:both"></div>
<div id="div2" style="margin-top:20px; float:left; width:100%;"><div style="border:1px solid red;background-color: #FFF;">2</div></div>
</div>
a bit vague. I use news system, on left side i want to get news from world, on right i wont to get news from my country. I really don't know how to solve this problem:http://i48.tinypic.com/15rxzkw.jpg
source:
<div style="width:1000px;">
<div style="border:1px solid red;float:left;width:400px;">news from world</div><br/><br/>
<div style="border:1px solid red;float:left;width:400px;">news from world</div><br/><br/>
<div style="border:1px solid red;float:left;width:400px;">news from world</div><br/><br/>
<div style="border:1px solid red;float:left;width:400px;">news from world</div><br/> <br/>
<div style="border:1px solid red;float:left;width:400px;">news from world</div><br/><br/>
<div style="border:1px solid red;float:left;width:400px;">news from world</div><br/><br/>
<div style="border:1px solid blue;width:400px;float:right;">news from my country</div><br/><br/>
<div style="border:1px solid blue;width:400px;float:right;">news from my country</div><br/><br/>
<div style="border:1px solid blue;width:400px;float:right;">news from my country</div><br/><br/>
</div>
You need a to clear your floating divs. Put this :
<div style="clear: both;"></div>
http://www.quirksmode.org/css/clearing.html
For example:
<div style="width:1000px;">
<div style="border:1px solid red;float:left;width:400px;">aaaaaaaa</div>
<div style="border:1px solid blue;width:400px;float:right;">bbbbbbb</div>
<div style="clear: both"></div>
<div style="border:1px solid blue;width:400px;float:left;top:0px;">cccccccc</div>
<div style="border:1px solid blue;width:400px;float:right;">dddddddddd</div>
</div>
Its because of the <br /><br />
Remove them because they push element 2,3 and 4 2 rules down.
Also try to separate styles from your html and never use <br /> for styling. (W3C semantics)
You could try this:
<div style="width:1000px;">
<div style="float:left;">
<div style="border:1px solid red;width:400px;">aaaaaaaa</div><br/><br/>
<div style="border:1px solid blue;width:400px;">bbbbbbb</div>
</div>
<div style="float:left;">
<div style="border:1px solid blue;width:400px;top:0px;">cccccccc</div>
<div style="border:1px solid blue;width:400px;">dddddddddd</div>
</div>
</div>