Above snippet is a result of the following code-(i have used bootstrap for the css)
<div class="container" >
<div id=" row" style="margin-top: 140px;">
<div class="panel col-md-6" style="background-color: yellow">
<div class="panel-heading" style="background-color: gray">
</div>
</div>
<div class="panel col-md-6" style="background-color: greenyellow">
<div class="panel-heading" style="background-color: sienna;width:fit-content;"></div>
</div>
</div>
</div>
Here Green and yellow are panels; Sienna and grey are panel headers. Why does panel header leave padding on both ends? how to fit header here to panel width?
You shouldn't use col-md-* with other classes. It's part of the grid system and the "cells" are padded to the left and right.
This should be your code, although it doesn't fix your problem:
You shouldn't use col-md-* with other classes. It's part of the grid system.
You need to use some more div elements like so:
<div class="container" >
<div id=" row" style="margin-top: 140px;">
<div class="col-md-6" style="background-color: yellow">
<div class="pannel">
<div class="panel-heading" style="background-color: gray">
</div>
</div>
</div>
<div class="col-md-6" style="background-color: greenyellow">
<div class="pannel">
<div class="panel-heading" style="background-color: sienna">
</div>
</div>
</div>
</div>
</div>
.row class add a negative padding of 15px.
.col-xx-xx class add a positive padding of 15px.
To don't have this padding, just remove it in your specific class.
Here :
.panel{
padding: 0px;
}
Related
In my angular application I have created the bootstrap card to display some information.
But it is not reaching the design as what I am expecting ,I have tried many ways.
component.html
<div class="bs-example">
<div class="card" id="dd" style="max-width: 800px;">
<div class="row no-gutters">
<div class="col-sm-3" >
heading-1
</div>
<div class="col-sm-3">
<div>heading-1</div>
<div class="col-sm-3">
<div>heading-3</div>
<div class="card-body">
<h5>info-1</h5>
<h5>info-1</h5>
</div>
</div>
</div>
</div>
component.css
body{
background-color: #2d3436;
background-image: linear-gradient(315deg, #2d3436 0%, #000000 74%);
color:white;
}
.bs-example{
margin: 20px;
}
#dd{
background-color: #2d3436;
background-image: linear-gradient(315deg, #2d3436 0%, #000000 74%);
color:white;
font-weight: bold;
border-bottom: 1px solid grey;
}
I want to show the data as with in the row place the 4 headings(heading-1,heading-2..) in the single row
and under each heading place the info and one line under that with the border and also in next row place the other info under each heading.
Can anyone please help me regarding this I am new to using the bootstrap.
<div class="bs-example">
<div class="card" id="dd" style="max-width: 800px;">
<div class="row no-gutters">
<div class="col-sm-3" >
<h5>Heading 1</h5>
<div class="card-body">
//have some info here
</div>
</div>
<div class="col-sm-3" >
<h5>Heading 2</h5>
<div class="card-body">
//have some info here
</div>
</div>
<div class="col-sm-3" >
<h5>Heading 3</h5>
<div class="card-body">
//have some info here
</div>
</div>
<div class="col-sm-3" >
<h5>Heading 4</h5>
<div class="card-body">
//have some info here
</div>
</div>
</div>
</div>
Do you import the bootstrap CSS somewhere? You need to do this in order for the styling to go through. For example you can import it in your HTML file. Like so:
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
Or import it in your CSS file like so:
#import "~bootstrap/dist/css/bootstrap.css"
Okay so you want to close your div tags and have your heading included within. You are very close.
<div class="bs-example">
<div class="card" id="dd" style="max-width: 800px;">
<div class="row no-gutters">
<div class="col-sm-4" >
heading-1
</div>
<div class="col-sm-4">
<div>heading-1</div>
</div>
<div class="col-sm-4">
<div>heading-3</div>
</div>
<div class="card-body">
<h5>info-1</h5>
<h5>info-1</h5>
</div>
</div>
</div>
</div>
That html seemed to work for me. So the diff here is that i put a closing tag after the divs with the col class. Then I also put col-4 instead of 3 since you only have 3 items in the header.
here's my markup:
<div class="row">
<div class="col-md-3">
<div class="row">
<a href="#">
<div class="col-md-6 col-xs-6">
<img class="img-responsive" src="/images/foo.jpg">
</div>
<div class="col-md-6 col-xs-6 vorteil">
text
</div>
</a>
</div>
</div>
<! -- plus 3 more items -->
</div>
which will look like this:
the problem however is - when reducing the browser width it will turn out like this:
the image will overflow its container although it should be responsive ..
any ideas what's wrong?
thanks
Wrap the red and grey divs in a DIV tag, not a link. Give the following style to your containing div:
.containing-div {display:block; overflow:auto;}
you are missing the parent class .container form bootstrap. look at bootstrap docs
.container {
border: 1px grey solid
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="row">
<a href="#">
<div class="col-md-6 col-xs-6">
<img class="img-responsive" src="///dummyimage.com/300x600">
</div>
<div class="col-md-6 col-xs-6 vorteil">
text
</div>
</a>
</div>
</div>
<! -- plus 3 more items -->
</div>
</div>
My CSS isn't picking up my different columns. They are stacked on top of each other. I want each of them each to span 4 columns of the same row.
<div class="container">
<div class="row">
<div class="col-md-4" id="directionsPanel1">
<h3 class="directions-discription" id="directions-info1"></h3>
</div>
<div class="col-md-4" id="directionsPanel2">
<h3 class="directions-discription" id="directions-info2"></h3>
</div>
<div class="col-md-4" id="directionsPanel3">
<h3 class="directions-discription" id="directions-info3"></h3>
</div>
How about this using floats. You can apply the float which is the pull-left helper class to the div.col-md-4 and then they won't stack upon each other.
Updated JS fiddle but you shouldn't need to float left in the CSS, couldn't get JS fiddle to pull bootstrap stuff. http://jsfiddle.net/4xEPr/7/
<div class="container">
<div class="row">
<div class="col-md-4 pull-left" id="directionsPanel1">
<h3 class="directions-discription" id="directions-info1"></h3>
</div>
<div class="col-md-4 pull-left" id="directionsPanel2">
<h3 class="directions-discription" id="directions-info2"></h3>
</div>
<div class="col-md-4 pull-left" id="directionsPanel3">
<h3 class="directions-discription" id="directions-info3"></h3>
</div>
AND CSS
div.col-md-4 {
border: 1px solid #333;
width: 200px;
background-color: red;;
}
When I set up my rows and columns like below, the row widths are slightly different. Suggestions?
EDIT: The row widths are not different. The column width does not fill the space. The fiddle has also been update to illustrate the problem.
<div class="container">
<div class="row" style="background: red;">
<div class="col-xs-4" id="logo">
content
</div>
<div class="col-xs-8">
</div>
</div>
<div class="row">
<div class="col-xs-7 col-xs-push-3">
</div>
<div class="col-xs-3 col-xs-pull-7">
</div>
<div class="col-xs-2" style="background: #000">
content
</div>
</div>
link to fiddle: http://jsfiddle.net/PRP89/4/
How would you put all of these <div>s in a row?
<div style="background-color: aquamarine; margin:50px">
<div style="background-color: azure;width:25%;">
1
</div>
<div style="background-color: darkolivegreen;width:25%;">
2
</div>
<div style="background-color: darkorange;width:25%;">
3
</div>
<div style="background-color: bisque;width:25%;">
4
</div>
</div>
Use the awesome display:table.
<div style="background-color: aquamarine; margin:50px; display:table">
<div style="background-color: azure;width:25%;display:table-cell">
1
</div>
<div style="background-color: darkolivegreen;width:25%;display:table-cell">
2
</div>
<div style="background-color: darkorange;width:25%;display:table-cell">
3
</div>
<div style="background-color: bisque;width:25%;display:table-cell">
4
</div>
</div>
In fact, you don't even need to specify widths for the inner divs. With table-layout:fixed the browser will automatically calculate the widths and lay it out nicely. :)
Be sure to specify a width on the parent div though.
<div style="background-color: aquamarine; margin:50px; width:100%; display:table; table-layout:fixed">
<div style="background-color: azure;display:table-cell">
1
</div>
<div style="background-color: darkolivegreen;display:table-cell">
2
</div>
<div style="background-color: darkorange;display:table-cell">
3
</div>
<div style="background-color: bisque;display:table-cell">
4
</div>
</div>
you need to use floats
give this four inner divs a class and then use css float: left