I want to align 'Header' label with the others span labels on the same work. I tried display: inline-block but it didn't work. How can i make it? Thanks.
<div class="panel panel-default">
<div class="panel-heading">
Title
</div>
<div class="panel-body">
<div class="row" >
<div class="col-sm-3">
<label>Header</label>
</div>
<div class="col-sm-9">
<h4><span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span></h4>
</div>
</div>
</div>
</div>
http://plnkr.co/edit/uct0S6PDIXpNbDCd1p1K?p=preview
Cut the header label from col-sm-3 div and paste in col-sm-9 with other span label. Then all will align in same order.
use below css.
.logo-head {
line-height: 39px;
margin: 0 !important;
}
add class to label
<label class="logo-head">Header</label>
Add this piece of CSS with your code it works fine
.col-sm-3 { display: table; float:left; height:40px;}
.col-sm-9 { display: table; float:left; }
.col-sm-3 > label , h4 > span { display: table-cell; vertical-align: middle; }
Demo
It seems you are using Bootstrap, then make sure you are not overriding bootstrap.css or bootstrap.min.css, for reference working code is given below, in case if you are looking for Mobile Browsers, you need to edit the Standard Bootstrap CSS file bootstrap.css or add the following line to your HTML code inside head(style) tags, Working example given below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"/>
<style>
.row
{
display:flex;
}
}
</style>
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">
Title
</div>
<div class="panel-body">
<div class="row" style="dispay: block;" >
<div class="col-sm-3">
<label style="padding-top:10px;">Header</label>
</div>
<div class="col-sm-9">
<h4><span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span></h4>
</div>
</div>
</div>
</div>
</body>
</html>
Like this? http://plnkr.co/edit/q2hxlWnTP9BLSnhIKd6M?p=preview
Since I couldn't edit your CSS file, I added the following inline CSS:
<div class="col-sm-3" style="float:left ; padding-top:12px">
Cheers!
Cynthia
Related
I'm trying to override the .container class in bootstrap. I'm using Drupal 7 and I have a css file for my theme which is working perfectly until I want to override the .container
my HTML
<div class="main-container <?php print $container_class; ?>">
<div class="top-div" style=" width:100%;background-color: #676767; font-weight:bold; color:white;">
<div class="row" style="text-align:center;">
<div class="col-md-4"> text </div>
<div class="col-md-4"> text </div>
<div class="col-md-4"> text</div>
</div>
</div>
that PHP code will insert the class .container
I need to give the div with class .top-diva 100% size without any padding from the .container I've tried the child > selector and descendant selector and the :not(.top-div) methods nothing works. When I use the :not(.top-div) it applies changes on each and every page and element on the website AND the div which contains the .top-div which is really weird. Suggestions?
In bootstrap, the padding is applied on the container, not the inner divs. To override this on one element you need to give it negative horizontal margins.
Something like:
.container .top-div {
margin-left:-10px;
margin-right:-10px;
}
Where 10px should be replaced by the padding on .main-container.
If this doesn't work right away you may need greater specificity
Bootstrap's built-in .row class uses this method
Why don't you try:
.main-container {
position:relative;
}
.top-div {
position:absolute;
left:0;
top:0;
}
<div class="main-container <?php print $container_class; ?>">
<div class="top-div" style=" width:100%;background-color: #676767; font-weight:bold; color:white;">
<div class="row" style="text-align:center;">
<div class="col-md-4"> text </div>
<div class="col-md-4"> text </div>
<div class="col-md-4"> text</div>
</div>
</div>
If you are using bootstrap css than you don't need to give any custom css
You try to just add row class in your top-div class
it's a in built in bootstrap.css So no need for any extra custom css.
.row {
margin-left: -10px;
margin-right: -10px;
}
Example
<div class="main-container <?php print $container_class; ?>">
<div class="top-div row" style=" width:100%;background-color: #676767; font-weight:bold; color:white;">
<div class="row" style="text-align:center;">
<div class="col-md-4"> text </div>
<div class="col-md-4"> text </div>
<div class="col-md-4"> text</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="main-container <?php print $container_class; ?>">
<div class="top-div row" style=" width:100%;background-color: #676767; font-weight:bold; color:white;">
<div class="row" style="text-align:center;">
<div class="col-md-4"> text </div>
<div class="col-md-4"> text </div>
<div class="col-md-4"> text</div>
</div>
</div>
Hope this will helps you.
Here is the jsfiddle
fiddle
code:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="col-xs-12">
<div class="col-xs-5" style="padding-right:0px;">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMjI4NzA5OTg1OF5BMl5BanBnXkFtZTgwNzc0MjU5OTE#._V1_SY1000_CR0,0,675,1000_AL_.jpg" class="img-responsive"/></div>
<div class="col-xs-7" style="background-color:#CBD4C2; padding-left:0;">
<p>asjkfnaskjdnkasdnkasnsdkjasndkjansdkjnasjdbaskjsdnbjhbdskajad</p>
kjadsbnjkasndkjasndkjasndkjasndkjasndkjnaskdjnaskjdnsakjdnaskjdnkjasdn
</div>
</div>
</div>
You can use some css to fix this:
.wrap-text {
word-wrap: break-word;
}
And then:
<p class="wrap-text">asjkfnaskjdnkasdnkasnsdkjasndkjansdkjnasjdbaskjsdnbjhbdskajad
kjadsbnjkasndkjasndkjasndkjasndkjasndkjnaskdjnaskjdnsakjdnaskjdnkjasdn</p>
jsfiddle
add word-break:break-word to its container
see below snippet or fiddle > jsFiddle
.col-xs-7{
word-break:break-word;
}
<div class="container-fluid">
<div class="col-xs-12">
<div class="col-xs-5" style="padding-right:0px;">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMjI4NzA5OTg1OF5BMl5BanBnXkFtZTgwNzc0MjU5OTE#._V1_SY1000_CR0,0,675,1000_AL_.jpg" class="img-responsive"/></div>
<div class="col-xs-7" style="background-color:#CBD4C2; padding-left:0;">
<p>asjkfnaskjdnkasdnkasnsdkjasndkjansdkjnasjdbaskjsdnbjhbdskajad</p>
kjadsbnjkasndkjasndkjasndkjasndkjasndkjnaskdjnaskjdnsakjdnaskjdnkjasdn
</div>
</div>
</div>
but i suggest you don't use plain text. instead wrap all the text inside a tag, for example a <p> like so :
<p>asjkfnaskjdnkasdnkasnsdkjasndkjansdkjnasjdbaskjsdnbjhbdskajad
kjadsbnjkasndkjasndkjasndkjasndkjasndkjnaskdjnaskjdnsakjdnaskjdnkjasdn</p>
( also use break-word )
i'm using bootstrap 2 and I need to have 3 span, but the one in the middle should be really small to handle an image to show/hide the span on the left.
The problem is that I can't put all three span on the same line. Looks like the span with the image is taking the all place and not just 10px
Here is my code:
<style>
.myspan {
width:10px;
}
<div class="container-fluid">
<div class="row-fluid">
<div class="span3" style="background-color: red">this is fluid</div>
<div class="myspan"><img src="~/Images/bullet.png" /></div>
<div class="span9" style="background-color: blue">yeah!</div>
</div>
</div>
You can use span3, span1 and span8 to occupy the 12 column grid and line them up. Use a custom class to specify a width and remove the margin. But use the custom CSS in a higher priority order i.e. new file, loading it after all the CSS so that you need not use !important. Try to avoid inline styles as well.
$('.span1').on('click', function() {
$('.span3').toggle('slow');
});
.small-span img {
margin-left: -15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row-fluid">
<div class="span3" style="background-color: tomato">this is fluid</div>
<div class="span1 small-span">
<img src="http://placehold.it/25x25" />
</div>
<div class="span8" style="background-color: lightblue">yeah!</div>
</div>
</div>
I have a div with this markup:
<div class="col-sm-12">
<p class="bg-info">Basic Information</p>
</div>
which looks like:
I need a link 'Add /Edit' at the right end of the div so that it looks like:
Tried adding a paragraph tag to the existing one with a link but it pushes the new content below.
I am new to CSS so any help is greatly appreciated.
Thanks in advance.
Regards.
<div class="col-sm-12">
<p class="bg-info pull-left">Basic Information</p>
<a class="pull-right">Add/Edit</a>
<div class="clearfix"></div>
</div>
<div class="col-sm-12">
<p class="bg-info">Basic Information Add /Edit</p>
</div>
Bootstrap Quick floats
I assume you're using Bootstrap because of the classes you're using.
Try this:
<div id="container">
<div style="width:80%;float:left">
Basic Information
</div>
<div style="width:20%;float:right">
Add/Edit Rule
</div>
</div>
<html>
<head>
<style>
.bg-info {display: inline; float: left;}
.bg-info2 {display: inline; float: right; color: red;}
</style>
</head>
<body>
<div class="col-sm-12">
<p class="bg-info" style="float:left">Basic Information</p><p style="float:right" class="bg-info2">Basic Information</p>
</div>
</body>
<html>
This question has actually came from my experiments with GWT framework but I decided to simplify the question.
I'm trying to replace table tag with divs. How can I horizontally align two DIV tags that contain two vertically aligned DIV tags ?
Here is what I have:
<!doctype html>
<html>
<body>
<div style="display: block; ">
<div style="display: inline; ">
<div class="gwt-Label" >Name:</div>
<div class="gwt-Label" >Address:</div>
</div>
<div style="display: inline; ">
<div class="gwt-Label" >test1</div>
<div class="gwt-Label" >test2</div>
</div>
</div>
</body>
</html>
It's rendered in my Chrome 15.0.874.106 m as:
Name:
Address:
test1
test2
where I expected it to be:
Name: test1
Address: test2
Could you please help me ?
HTML tables are appropriate for representing tabular data. Just don't use tables for general layout. Tables are still better for tabular data though.
UPDATE: Going forward, you may want to consult the CSS3 Grid Layout specification: http://www.w3.org/TR/css3-grid-layout/
But as is, if you reeeeeeally want to make it work for whatever reason, I'd set all columns as fixed width, float left and clear on the first column. If you want different widths for different columns, you can make specific classes for those columns and set a specific width. But, if there's user data in your table, you have to make sure overflow:hidden is on, or it'll break your table.
I've pasted the code in here, but I've also created a jsfiddle link.
Here's the html:
<div class="table">
<div class="column first">Name:</div>
<div class="column">test1</div>
<div class="column first">Address:</div>
<div class="column">test2</div>
</div>
And the styles:
.table .column{
width: 100px;
float: left;
}
.table .column.first{
clear: left;
}
However, you're going to run into problems as the text inside the table changes. It's not going to act like a table. For example, when a cell's text wraps to the next line, it's not going to adjust the height of all the cells in that row, as you would expect a cell to do. Hence the overflow: hidden or just use an HTML table.
Hope that helps...
I think for the example you have an actual table would be more appropriate, however; you could also do something like this:
<body>
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell;">Name:</div>
<div style="display: table-cell;">test1</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell;">Address:</div>
<div style="display: table-cell;">test2</div>
</div>
</div>
</body>
CSS3 has just the ticket:
.tabl {width:400px;border:1px solid blue;display:table}
.row {height:40px;display:table-row}
.cell {border:1px solid black;display:table-cell}
<div class="tabl">
<div class="row">
<div class="cell"> CELL one</div>
<div class="cell"> CELL two</div>
<div class="cell"> CELL three</div></div>
<div class="row">
<div class="cell"> CELL four
</div><div class="cell"> CELL five</div>
<div class="cell">
<div class="tabl">
<div class="row">
<div class="cell">CELL 6A</div>
<div class="cell">CELL6B</div>
</div>
</div>
</div>
</div>
</div>
That can then be allied to a structure that looks like a table In this case I've included a nested table:
If you want you can probably leave out the outside wrapper, unlike a real table the rows and cells seem not to need it. Unfortunately this only works in modern browsers that support CSS3 that leaves out IE including IE9.
<div style="display: block; ">
<div style="float:left">
<div class="gwt-Label" >Name:</div>
<div class="gwt-Label" >Address:</div>
</div>
<div style="float:left">
<div class="gwt-Label" >test1</div>
<div class="gwt-Label" >test2</div>
</div>
<div style="clear:both"></div>
</div>
your solution is as follow :-
PLease check it
<style type="text/css">
.Table
{
display: table;
}
.Row
{
display: table-row;
}
.Cell
{
display: table-cell;
}
</style>
<!doctypehtml>
<html>
<body>
<div class="Row">
<div class="Cell">
<p>Name:</p>
</div>
<div class="Cell">
<p>Test1</p>
</div>
</div>
<div class="Row">
<div class="Cell">
<p>Address:</p>
</div>
<div class="Cell">
<p>Test2</p>
</div>
</div>
</body>
</html>
If you are looking to generate dynamic tabular structure, try using jqGrid (demo)
Or if your purpose is different and still wanna go with div? Try this..
use float:left; instead display:inline. Float shrinks the div to its content size, letting space for other elements. This makes other elements accommodate beside floated element.
Corrected code:
<!doctype html>
<html>
<body>
<div style="display: block; ">
<div style="float:left; ">
<div class="gwt-Label" >Name:</div>
<div class="gwt-Label" >Address:</div>
</div>
<div style="float:left;">
<div class="gwt-Label" >test1</div>
<div class="gwt-Label" >test2</div>
</div>
</div>
</body>
</html>
Moe's way is pretty cool but it's not standard.
This is the best way.
Use CSS command "float" just like this:
HTML Code:
.gwt-Label
{
float: left;
width: 50%
}
<!doctype html>
<html>
<head>
<link href="Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div style="display: block; ">
<div style="display: inline; ">
<div class="gwt-Label" >Name:</div>
<div class="gwt-Label" >test1</div>
</div>
<div style="display: inline; ">
<div class="gwt-Label" >Address:</div>
<div class="gwt-Label" >test2</div>
</div>
</div>
</body>
</html>
Or you can have it all in one place:
<!doctype html>
<html>
<head>
<style type="text/css">
.gwt-Label{
float: left;
width: 50%
}
</style>
</head>
<body>
<div style="display: block; ">
<div style="display: inline; ">
<div class="gwt-Label" >Name:</div>
<div class="gwt-Label" >test1</div>
</div>
<div style="display: inline; ">
<div class="gwt-Label" >Address:</div>
<div class="gwt-Label" >test2</div>
</div>
</div>
</body>
</html>