I am using bootstrap and in my first row i have 2 side one contain picture and other div but image size is larger the left side div so my 2nd row div come after picture. but my requirement is make 2nd row div just below the first row div? Picture here
<div class="container"> // Container for two side contents
<div class ="row"> // single row
<div class ="Row1">
// Your's Row1 code goes here
</div>
<div class="Row2">
// Your's Row2 code goes here
</div>
</div>
</div>
<div class="container"> // Container for main contents(gallery and big image)
...
</div>
You should seperate the blocks like:
<div class="overall-container">
<div class="left-block" style="width: 30%;">
// add your navigation blocks here
</div>
<div class="right-block" style="width: 70%;">
//add page content here
</div>
</div>
Make Another Row in yours first row.
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-12"></div>
</div>
</div>
<div class="col-md-8"></div>
</div>
</div>
Related
This one i want to display. In here i want to display all these in same way same height & width.But in here bottom part height will be larger if the title has many words.
This is my html code block
<div [style.width.%]="105" [style.height.%]="25">
<div matRipple [matRippleColor]="primary" class="m-tile">
<div class="a-tile-graph a-tile-graph--hotel">
<div class="titles">
<div class="head">{{name}}</div>
<div class="sub">{{level}}</div>
</div>
<div id="{{chartId}}" class="graph"></div>
</div>
<div class="o-tile-content" [ngStyle]="{'font-size.px':14}">
<div class="a-tile-btn"><i class="fa fa-signal"></i></div>
<div class="a-tile-title">{{name}}</div>
<div class="a-tile-value"><span class="currency">$</span>{{getFormattedValues(ttv)}}</div>
<div class="a-tile-count">{{getFormattedValues(ttc)}}</div>
</div>
</div>
</div>
how could i fix this?
I created a column structure with bootstrap 4 . It looks something like this it has 1 row with 2 columns:
<div class="left">
<hr class="container hline">
<div id="main" class="container border">
<div class="row">
<div class="col-lg-5 top">
</div>
<div class="col-lg-5 top">
/*Widget with too much margin right*/
</div>
</div>
</div>
</div>
The issue is that the widget on the right has too much empty space. The columns have an equal length (col-lg-5) but there is still a lot of space on the right. How can I remove this and keep the columns the same size?
link to codepen
You should only use columns within your rows, and the columns are based on a 12 column grid. You currently have 10 columns worth of width taken up using 2 .col-5 column and you also have a pixel for the divider that is stuck into the row in the codepen even though your example here doesn't show it.
How about doing two .col-6 columns and having the divider be a left border on the right column?
https://codepen.io/anon/pen/xaeWGB
<div class="left">
<hr class="container hline">
<div id="main" class="container border">
<div class="row">
<div class="col-lg-6 top">
</div>
<div class="col-lg-6 divider top">
</div>
</div>
</div>
</div>
So basically I'm still a begginer when it comes to doing interfaces on the web and trying to allign everything properly. I've decided to use the bootstrap library. I'm trying to make a modal dialog divided into multiple section but i'm really struggling to make some section stack on top of each other and have another section take up the entire space.
What I currently have :
https://i.gyazo.com/adeeb3cca0abb6dea4a5d002d3568afa.png
What I'm trying to achieve :
https://i.gyazo.com/e8513c243424cb71926ac838e8b1166e.png
This is the code I currently have with some sample text to try to delimiter each section :
<div class='container-fluid'>
<div class="row">
<div class="col-md-3" style='border:1px solid black;max-height:5vh;'>
STATUS
</div>
<div class="col-md-9" style='border:1px solid black;min-height:50vh;'>
L
</div>
<div class="col-md-3">
SOME TEXT ASDASDASDJLASDJKLASDJAD
ASDASDLASKD
aASDASDK:ASDKASDK
ASDASJDASDASDKASJDASDJ
</div>
<div class="col-md-9">
L
</div>
</div>
</div>
To match the image you've provided, you want two columns - one three wide with four rows, and one nine wide with one row.
The height of the rows in the left column will be determined by their contents. I've written an example with extra content in one row in the left column:
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="row">
3
</div>
<div class="row">
3<br>
wide<br>
but<br>
taller
</div>
<div class="row">
3
</div>
<div class="row">
3
</div>
</div>
<div class="col-sm-9">
9
</div>
</div>
</div>
JSFiddle for a live example.
You keep two main columns (3/9) and inside the first column you can add more container. You can also add styles or classes to them.
<div class="container-fluid">
<div class="row" >
<div class="col-md-3" style='border:1px solid black;min-height:50vh;'>
<div style="min-height:10vh">10vh</div>
<div style="min-height:20vh">10vh</div>
<div style="min-height:10vh">10vh</div>
<div style="min-height:10vh">10vh</div>
</div>
<div class="col-md-9" style='border:1px solid black;min-height:50vh;'>L</div>
</div>
</div>
I have 4 different divs assigned as: header1, header2, content1 and content2, each one floating to a specific side (left or right) as shown in the image1
So far everything works fine:)! also Added a #media for the responsive result, so if the browser is smaller than 750px then everything become 100% wide.
And here's my problem, I'm trying to show elements like in this second image:
But so far, Header 2 is showing just under header1 and I'm trying to locate first the content 1 before showing the header 2 with his respective content 2, could you help me to solve this? here's my actual jsfiddle and my code:
DEMO
HTML
<div id="container">
<div id="header1">
<h2 class="header1">
Header 1
</h2>
</div>
<div id="header2">
<h2 class="header2">
Header 2
</h2>
</div>
<div id="content1">
content1
</div>
<div id="content2">
content2
</div>
</div>
Thanks for your help!
If it is acceptable for you, you can combine header with content.
See http://jsfiddle.net/pbrzt7er/
<div class='left container'>
<div class='header'>
Header left
</div>
<div class='content'>
Content left
</div>
</div>
<div class='right container'>
<div class='header'>
Header right
</div>
<div class='content'>
Content right
</div>
</div>
I have the following:
<!-- BLUE BOX --!>
<div style="width:100%;position:relative;min-height:100%">
<div style="position:absolute;left:1px;top:15px;">
IMAGE GOES HERE
</div>
<div style="position:absolute;left:20px;top:0;background-color:#2b5797; color:#fff;width:80%;min-height:40px;border-radius:5px;padding:10px;">
messages go here
</div>
</div>
<!-- PINK BOX --!>
<div style="width:100%;position:relative;min-height:100%">
<div style="position:absolute;right:1px;top:15px;">
IMAGE HERE
</div>
<div style="position:absolute;right:20px;top:0;background-color:#b91d47; color:#fff;width:80%;border-radius:5px;padding:10px;min-height:40px">
messages go here
</div>
</div>
here is the image of the HTML output:
Please help me getting those divs in vertical order, I don't want them to float over each other, I want the message div to get the automatic height according to content too.
You should use floats for this. float:left , float:right and a clear:both inbetween :
<div style="width:100%;position:relative;min-height:100%;float:left">
<div style="float:left">img</div>
<div style="float:left;background-color:#2b5797; color:#fff;width:80%;min-height:40px;border-radius:5px;padding:10px;">First messages go here</div>
</div>
<div style="clear:both;width:100%;position:relative;min-height:100%">
<div style="float:right">img</div>
<div style="float:right;background-color:#b91d47; color:#fff;width:80%;border-radius:5px;padding:10px;min-height:40px">messages go here</div>
</div>
You can see it in action here : jsfiddle
Remove absolute position form your message DIV. Write like this:
<div style="position:relative;">
<div style="position:absolute;left:1px;top:15px;">
IMAGE GOES HERE
</div>
<div style="margin-left:20px;margin-right:20%;background-color:#2b5797; color:#fff;min-height:40px;border-radius:5px;padding:10px;">
messages go here
</div>
</div>
<div style="position:relative;">
<div style="position:absolute;right:1px;top:15px;">
IMAGE HERE
</div>
<div style="margin-right:20px;margin-left:20%;background-color:#b91d47; color:#fff;border-radius:5px;padding:10px;min-height:40px">
messages go here
</div>
</div>
Check this http://jsfiddle.net/y44NC/2/