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;;
}
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.
I need to implement a cartesian plane with Bootstrap 4 and Flex. The desired output is something like the following image:
The plane is composed by a 10x10 matrix. Moreover I need a row containing the x labels and a column showing the y labels.
Here you are my code:
<div class="d-flex p-2" style="border: 1px solid black; width: 40%; margin-bottom: 50px;">
<div class="d-flex flex-row">
<div class="p-2 align-items-stretch">1</div>
</div>
<div class="d-flex flex-column">
<div class="p-2">1</div>
<div class="p-2">2</div>
<div class="p-2">3</div>
<div class="p-2">4</div>
<div class="p-2">5</div>
<div class="p-2">6</div>
<div class="p-2">7</div>
<div class="p-2">8</div>
<div class="p-2">9</div>
<div class="p-2">10</div>
<div class="p-2 align-items-stretch">11</div>
</div>
<div class="d-flex flex-column">
<div class="p-2">1</div>
<div class="p-2">2</div>
<div class="p-2">3</div>
<div class="p-2">4</div>
<div class="p-2">5</div>
<div class="p-2">6</div>
<div class="p-2">7</div>
<div class="p-2">8</div>
<div class="p-2">9</div>
<div class="p-2">10</div>
</div>
<!-- the same for the other 8 rows -->
</div>
And the associated css:
.p-2 {
border: 1px solid lightgray;
}
.p-2:before {
content:'';
float:left;
padding-top:100%;
}
The actual result is:
I have two problems:
the row number 11 should be stretched until the last column;
the grid items should adapt their size according to the available space
of the container.
How I can reach these goals? Thank you
You can use the Bootstrap grid like this...
Demo: https://www.codeply.com/go/sQA6tvHiZh
<div class="container text-center">
<div class="row">
<div class="col-md-8 mx-auto">
<div class="row">
<div class="col-1">y</div>
<div class="col-11">
<div class="row">
<div class="col">1
</div>
<div class="col">2
</div>
<div class="col">3
</div>
<div class="col">4
</div>
<div class="col">5
</div>
<div class="col">6
</div>
<div class="col">7
</div>
<div class="col">8
</div>
<div class="col">9
</div>
<div class="col">10
</div>
</div>
<!--/row-->
9 more row ...
<div class="row">
<div class="col">x
</div>
</div>
</div>
</div>
</div>
</div>
<!--container-->
</div>
I am trying to build a bootstrap calculator using the grind system provided by Bootstrap. I have two rows using the class col-md-4 with each row comprising of 4 buttons. I would expect to see the buttons expand the entire width of the div tag. When I put a background color to the div tag the color fills the entire div tag, as I would except. I created a codepen to illustrate my problem.
<div class="container">
<div class="cal-body">
<div class="header">
</div>
<div class="lcd">
</div>
<div class="row">
<div class="col-md-4">
<button>7</button>
<button>8</button>
<button>9</button>
<button>%</button>
</div>
</div>
<div class="row">
<div class="col-md-4" style="margin-bottom: 20px;">
<button>4</button>
<button>5</button>
<button>6</button>
<button>X</button>
</div>
</div>
</div>
</div>
</div>
In other words, I would like my buttons to take of the full length of the column row. As of now, it only takes 1/4 of the column space. I am trying to replicate the look of a calculator.
My code pen:http://codepen.io/louis345/pen/KNoypX
Any help will be greatly appreciated.
Just change the col-md-4 to col-md-12 if you want to span the whole row.
You can also add class text-center into your columns to make buttons centered position.
Sample:
<div class="col-md-12 text-center">
</div
Check this to see if that's what you are looking for
The idea is to wrap each button on a different column
<div class="col col-sm-3">
<button>7</button>
</div>
#claudios your answer is right [ use class (text-center) ] and I am just implement in this snippet.
.line{
box-shadow:inset 0px 0px 2px #ccc;
padding-top: 10px;
padding-bottom: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<br>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center line">
<button class="btn btn-success">Submit</button>
<button class="btn btn-default">Cancel</button>
</div>
</div>
</div>
Each row has 12 columns, you're setting a div to use 4 columns and it will make the div to use 1/3 of the size.
Also, col-md must be used to sizes >= 768px. You should use col-xs because you're limiting the size of cal-body.
I made it, based on your codepen: http://codepen.io/anon/pen/BQMeXQ
Take a look here, 2 rows, each one has 4 divs, each using 3 columns.
<style>
.button-group {
width: 100%;
margin-left: 15px;
}
.button-line {
width: 100%;
}
.button-col {
padding-left: 0px;
padding-right: 0px;
}
.button-col button{
width: 100%;
}
</style>
<div class="button-group">
<div class="row button-line">
<div class="col-xs-3 button-col">
<button>7</button>
</div>
<div class="col-xs-3 button-col">
<button>8</button>
</div>
<div class="col-xs-3 button-col">
<button>9</button>
</div>
<div class="col-xs-3 button-col">
<button>%</button>
</div>
</div>
<div class="row button-line">
<div class="col-xs-3 button-col">
<button>4</button>
</div>
<div class="col-xs-3 button-col">
<button>5</button>
</div>
<div class="col-xs-3 button-col">
<button>6</button>
</div>
<div class="col-xs-3 button-col">
<button>x</button>
</div>
</div>
</div>
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>
here's my markup:
<style>
a.item
{
border:1px solid #aaa;
background:#ddd;
padding:10px;
display:block;
}
span.price
{
display:block;
text-align:center;
background:#555;
color:white;
}
</style>
<div class="main">
<div class="row">
<div class="col-md-3">
<a class="item" href="#">
<div class="row">
<div class="col-md-6">
IMAGE
</div>
<div class="col-md-6">
<span class='price'>123.45</span>
</div>
</div>
</a>
</div>
<div class="col-md-3">
<a class="item" href="#">
<div class="row">
<div class="col-md-6">
IMAGE
</div>
<div class="col-md-6">
<span class='price'>123.45</span>
</div>
</div>
</a>
</div>
<div class="col-md-3">
<a class="item" href="#">
<div class="row">
<div class="col-md-6">
IMAGE
</div>
<div class="col-md-6">
<span class='price'>123.45</span>
</div>
</div>
</a>
</div>
<div class="col-md-3">
<a class="item" href="#">
<div class="row">
<div class="col-md-6">
IMAGE
</div>
<div class="col-md-6">
<span class='price'>123.45</span>
</div>
</div>
</a>
</div>
</div>
</div>
it looks fine - like this:
the problem however is - when decreasing the browser window's width, it will destroy the layout and will look like this:
"image" and price are not side-bye-side anymore .. any ideas what's wrong with my code?
thanks
Include col-xs-6 next to col-md-6.
https://jsfiddle.net/gqmarfkh/ jsFiddle - I changed 2 of them as an example.
If you change .col-md-6 to col-xs-6 it should solve your problem. The class col-md-6 has no value untill the screen size is medium and up. Class col-xs-* will have a value from x-small and up. Check out this link: http://getbootstrap.com/css/#grid-options