how to design the col in boostrap 3.3.6? - html

How can I design this image below using Bootstrap 3.3.6, those are div CSS? I am just a new programmer, hope you can help me.


Here's what you can do using divs.
<html>
<head>
<body>
<div style="border:3px solid black; width:auto; padding:10px;">
<div style="border:3px solid blue; width:auto; padding:10px; text-align:center;">
<div style="width:100px; display:inline-block; border:3px solid pink; margin:10px; height:10px; padding:10px;">
</div>
<div style="width:100px; display:inline-block; border:3px solid green; margin:10px; height:10px; padding:10px;">
</div>
</div>
</div>
</body>
</head>
<html>
To get the two inner-most divs floating side-by-side, we use display:inline-block; property.


use this. this is a bootstrap code.
<div class="container">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>


Your structure should look like that :
<div class="container">
<div class="row">
<div class="div-1 col-md-12">
<div class="div-2 col-md-12">
<div class="div-3 col-md-6">
</div>
<div class="div-4 col-md-6">
</div>
</div>
</div>
</div>
</div>
After that the css will do the trick

Related

How is the padding of display:table-cell determined

I'm trying to come out with a table-like layout, with medicine names appearing on the left and the data occupy the rest of the table. Simply put:
+-------------+------------+
medicine 1 | some data | some data |
+-------------+------------+
medicine 2 | some data | some data |
+-------------+------------+
Since I want to keep the data grid dynamic, I use two <div>'s with the style display:table-cell as two containers, the left one for all the medicine names, and the right one for the data grid. There are several inner <div>'s inside these two table-cell <div>'s, but I'm not sure why the left one has a big padding area on the top when I use Chrome inspect interface to investigate it (please see the image below):
I'm not quite sure which part went wrong, and the inspect interface didn't give me information that seems relevant. I want to learn how to approach this situation. Here is the html code for your reference:
<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell">
<div style="height:85px; width:170px; text-align:right; font-size:13px; margin-right:5px">
Dexedrine Spansules (Dextroamphetamine, ER) <br/><span style="font-style:italic">(20mg)</span>
</div>
<div style="height:85px; width:170px; text-align:right; font-size:13px; margin-right:5px">
Methamphetamine (Desoxyn, IR) <br/><span style="font-style:italic">(15mg)</span>
</div>
</div>
<div style="display:table-cell; overflow:hidden; max-width:800px">
<div id="medicine_table_container_2" class="medicine-table-container" style="position:relative; left:0">
<div style="white-space:nowrap; font-size:0px">
<div style="display:inline-block; background-color:yellow; width:130px; height:85px; border:1px solid #999; font-size: 12px; white-space:normal">
<div>
<div style="display:inline-block; width:70px; height:45px">
Morning<br/>-
</div>
<div style="display:inline-block; width:50px; height:45px">
Noon<br/>5mg
</div>
</div>
<div>
<div style="display:inline-block; width:70px; height:35px">
Afternoon<br/>12mg
</div>
<div style="display:inline-block; width:50px; height:35px">
Evening<br/>-
</div>
</div>
</div>
</div>
<div style="white-space:nowrap; font-size:0px">
<div style="display:inline-block; background-color:yellow; width:130px; height:85px; border:1px solid #999; font-size: 12px; white-space:normal">
<div>
<div style="display:inline-block; width:70px; height:45px">
Morning<br/>-
</div>
<div style="display:inline-block; width:50px; height:45px">
Noon<br/>5mg
</div>
</div>
<div>
<div style="display:inline-block; width:70px; height:35px">
Afternoon<br/>12mg
</div>
<div style="display:inline-block; width:50px; height:35px">
Evening<br/>-
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

This is about vertical alignment. The default one is set to baseline and produce this output. Simply change the alignment to top on the table-cell and you won't have this issue:
<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell;
vertical-align: top;">
<div style="height:85px; width:170px; text-align:right; font-size:13px; margin-right:5px">
Dexedrine Spansules (Dextroamphetamine, ER) <br/><span style="font-style:italic">(20mg)</span>
</div>
<div style="height:85px; width:170px; text-align:right; font-size:13px; margin-right:5px">
Methamphetamine (Desoxyn, IR) <br/><span style="font-style:italic">(15mg)</span>
</div>
</div>
<div style="display:table-cell;
vertical-align: top; overflow:hidden; max-width:800px">
<div id="medicine_table_container_2" class="medicine-table-container" style="position:relative; left:0">
<div style="white-space:nowrap; font-size:0px">
<div style="display:inline-block; background-color:yellow; width:130px; height:85px; border:1px solid #999; font-size: 12px; white-space:normal">
<div>
<div style="display:inline-block; width:70px; height:45px">
Morning<br/>-
</div>
<div style="display:inline-block; width:50px; height:45px">
Noon<br/>5mg
</div>
</div>
<div>
<div style="display:inline-block; width:70px; height:35px">
Afternoon<br/>12mg
</div>
<div style="display:inline-block; width:50px; height:35px">
Evening<br/>-
</div>
</div>
</div>
</div>
<div style="white-space:nowrap; font-size:0px">
<div style="display:inline-block; background-color:yellow; width:130px; height:85px; border:1px solid #999; font-size: 12px; white-space:normal">
<div>
<div style="display:inline-block; width:70px; height:45px">
Morning<br/>-
</div>
<div style="display:inline-block; width:50px; height:45px">
Noon<br/>5mg
</div>
</div>
<div>
<div style="display:inline-block; width:70px; height:35px">
Afternoon<br/>12mg
</div>
<div style="display:inline-block; width:50px; height:35px">
Evening<br/>-
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Since your code is a bit complex, here is a basic one to reproduce the issue and better understand what's happening:
.table {
display: table;
border: 1px solid;
margin: 5px;
}
.table>div {
display: table-row;
}
.table>div>span {
display: table-cell;
padding: 0 5px;
}
.table>div>span span {
display: inline-block;
}
baseline
<div class="table">
<div>
<span>one line</span>
<span><span>two <br> line (inline-block)</span></span>
</div>
</div>
baseline
<div class="table">
<div>
<span>two<br> line</span>
<span><span>two <br> line (inline-block)</span></span>
</div>
</div>
baseline (with overflow:hidden)
<div class="table">
<div>
<span>one line</span>
<span><span style="overflow:hidden;">two <br> line</span></span>
</div>
</div>
baseline (with overflow:hidden)
<div class="table">
<div>
<span>one line</span>
<span><span style="overflow:hidden;">another line</span></span>
</div>
</div>
top will fix all the cases
<div class="table">
<div>
<span style="vertical-align:top;">one line</span>
<span><span>two <br> line</span></span>
</div>
</div>
<div class="table">
<div>
<span style="vertical-align:top;">one line</span>
<span><span style="overflow:hidden;">two <br> line</span></span>
</div>
</div>
<div class="table">
<div>
<span style="vertical-align:top;">one line</span>
<span><span style="overflow:hidden;">another line</span></span>
</div>
</div>
<div class="table">
<div>
<span style="vertical-align:top;">two<br> line</span>
<span><span>two <br> line (inline-block)</span></span>
</div>
</div>
You can clearly see how the use of inline-block (and overflow:hidden) is the culprit here as it make the calculation of the baseline counter intuitive and unexpected.

I see that Temani Afif has already provided solution to your original problem. But in case if it helps you in anyway or anyone else, here is the basic structure of a table with sub-tables
Styles
<style>
.table {
display:table; border:1px solid #ccc; border-collapse:collapse
}
.table .row {
display:table-row; border:1px solid #ccc; border-collapse:collapse
}
.table .row .headercell {
display:table-cell; border:1px solid #ccc; height: 80px; width: 150px; border-collapse:collapse
}
.table .row .cell {
display:table-cell; border:1px solid #ccc; height: 80px; Width: 300px; border-collapse:collapse
}
</style>
Table structure
<div class="table">
<div class="row">
<div class="headercell">
Row1
</div>
<div class="cell">
<div class="table">
<div class="row">
<div class="cell">
Cell1
</div>
<div class="cell">
Cell2
</div>
</div>
<div class="row">
<div class="cell">
Cell3
</div>
<div class="cell">
Cell4
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="headercell">
Row2
</div>
<div class="cell">
<div class="table">
<div class="row">
<div class="cell">
Cell1
</div>
<div class="cell">
Cell2
</div>
</div>
<div class="row">
<div class="cell">
Cell3
</div>
<div class="cell">
Cell4
</div>
</div>
</div>
</div>
</div>
</div>

Using materialize css .col divs to create (should not follow row line) to make something like in the following picture

I am using Materialize css to make blog . And finding difficult to create something with the materialize grid columns.
See the desc below...
My html code is like this.
<div class="row">
<div class="col l6 m12 s12">
<div class="my-content">
-----FIRST-content-goes-here-----
</div>
</div>
<div class="col l6 m12 s12">
<div class="my-content">
-----SECOND-content-goes-here-----
</div>
</div>
</div> <!--row -->
Ignoring the css part , the image below denotes how this worked:
But i want the (.l6) columns to be created like as in the this picture:
I think the CSS plays a role for those divs positions and any help will be appreciated.

use can do that easily using CSS3 flexbox .
I'm added an snippet below.
.col{
display:flex;
flex-direction:column;
}
.box{
width:100px;
height:100px;
background:gray;
border:1px solid #000;
}
.parent{
display:flex;
flex-direction:row;
}
.diff{
height:200px;
}
.one{
height:70px;
}
.three{
height:30px;
}
<div class="parent">
<div class="col">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
<div class="col dif">
<div class="box one">
</div>
<div class="box diff">
</div>
<div class="box three">
</div>
</div>
</div>

Double background

I am trying to achieve the similar display for the highlighted part in the picture with yellow and black background. The three boxes displaying half in the yellow and half in the black bg.
Can anybody help me deal with it in CSS BOOTSTRAP.
Thanks in advance.
http://i.stack.imgur.com/yPj0w.png

The 3 boxes are simply positioned absolutely over a background image.
See this-
#bgbox {
background-color: black;
border-left: 50px solid yellow;
width:50px;
height:100px;
}
#top {
position:absolute;
top:40px;
left:40px;
width:30px;
height:30px;
background-color:blue;
}
<div id="bgbox">
</div>
<div id="top">
</div>

use position for doing this.Demo
<div class="top">
<div class="inner"></div>
</div>
<div class="buttom">
</div>
.top{
position:relative;
width:100%;
height:300px;
background-color:yellow;
}
.inner{
position:absolute;
width:300px;
height:300px;
top:50px;
left:100px;
background-color:red;
z-index:3;
}
.buttom
{
position:relative;
width:100%;
height:300px;
background-color:black;
}

Use the Bootstrap class and arrange the boxes by margin top value . look the code below. run it on full screen
.yellowbg { background-color: #beb333; height: 300px; }
.blackbg { background-color: #000; height: 300px; }
.yellowboxes { height: 182px; margin-top: -118px; background-color: #e3cf00; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="yellowbg">
</div>
<div class="blackbg">
<div class="row">
<div class="col-lg-2 col-lg-offset-3 col-md-2 col-md-offset-3 col-sm-offset-3 col-sm-2">
<div class="yellowboxes">
Box 1
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<div class="yellowboxes">
Box 2
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<div class="yellowboxes">
Box 3
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Background image not spanning the entire container-fluid

I am new to this bootstrap. I have a background image which i want to put in the container fluid. How to do it.
This is my code:
<div class="image_outer">
<div class="container-fluid">
<div class="row-fluid">
<div class="span5">
<div class="fl navi"> One TwoP </div>
</div>
<div class="span2"">
<div id="image1"><img src="/Something/something.jpg" alt="" /></div>
</div>
<div class="span5">
<div class="fr navi"> Three Four </div>
</div>
</div>
</div>
</div>
The corresponding classes are
.image_outer{width:100%;margin:0 auto; background:url(Something/something_bg.jpg) repeat-x; height:128px;}
.fl{float:left;}
.fr{float:right;}
.mr30{margin-right:100px; font-family: ee_nobblee,arial;}
.navi a{ font-size:22px; color:#6D6E70; margin-top:50px; float:left; font-weight:normal; font-family:ee_nobblee,arial;}
.navi a:hover { text-decoration:none; color:#858687;}

Try This CSS:
.image_outer {
width:100%;
margin:0 auto;
background:url(Something/something_bg.jpg) repeat-x;
height:128px;
background-position:cover;
}

Use your code like this and I hope this will work for image
.image_outer{width:100%;margin:0 auto;
background:url(../Something/something_bg.jpg) repeat-x;
height:128px;}

I might be wrong, you are floating children. you need to clear the float so that the background takes up the height specified.
<div class="row-fluid">
<div class="span5">
<div class="fl navi"> One TwoP </div>
</div>
<div class="span2"">
<div id="image1"><img src="/Something/something.jpg" alt="" /></div>
</div>
<div class="span5">
<div class="fr navi"> Three Four </div>
</div>
<div style="clear:both"></div>
</div>

Horizontally Center elements inside the div

So i need to create layout with 3 or 4 squares centered in it. As now many different screens are (i at the moment have 21 philips, macbook 13 and ipad) and on all of them the squares are different.
So i need it centered in any screens. Here some of my code:
Some CSS:
#main{
border: 1px solid red;
margin: auto;
}
#block{
display: inline-block;
padding: 110px;
border: 1px solid red;
margin: 10px 10px;
overflow:hidden;
}
Some HTML:
<div id="wrapper">
<div id="header">
header
</div>
<div id="main">
<div id="block">main</div>
<div id="block">main</div>
<div id="block">main</div>
<div id="block">main</div>
<div id="block">main</div>
<div id="block">main</div>
<div style="clear:both"></div>
</div>
</div>
I tried different ways with some extra div...
So i need that this squares would automatically centered in any screens

Since you're just using inline-block, you can center the text of the container.
Also, use classes for non-unique elements.
Fiddle: http://jsfiddle.net/LWTNB/3/
Updated HTML:
<div id="wrapper">
<div id="header">
header
</div>
<div id="main">
<div class="block">main</div>
<div class="block">main</div>
<div class="block">main</div>
<div class="block">main</div>
<div class="block">main</div>
<div class="block">main</div>
<div class="block">main</div>
<div class="block">main</div>
<div class="block">main</div>
<div class="block">main</div>
<div class="block">main</div>
</div>
</div>
Updated CSS:
#main{
border:1px solid red;
text-align:center; /* solution */
}
.block{
display:inline-block;
padding:110px;
border:1px solid red;
margin:10px 10px;
overflow:hidden;
}