My bootstrap grid container is not full width. See image:
The container is only the bit at the top.
here is the code:
HTML:
<div class="container" style="width:100%">
<div id="my-row" class="row" style="width:100%">
<div class="col-sm-4 panel" style="background-color: red">
<h4 class="white light" style="margin-top:0px; padding: 20px 0px 0px 20px; float: left;">WHAT WE GROW</h4>
</div>
<div class="col-sm-4 panel " style="background-color: yellow ">
</div>
<div class="col-sm-4 panel " style="background-color: blue ">
<h4 class="white light " style="margin-top:0px; padding: 20px 20px 0px 0px; float: right; color: pink; ">SIGN UP FREE</h4>
</div>
</div>
</div>
CSS:
#my-row {
display: table;
height:20%;
}
#my-row .panel {
float: none;
display: table-cell;
vertical-align: top;
}
How do I make the container go the full width?
First of all use: .container-fluid for full width, no need to add style="width:100%" if you use it.
Second, remove margin and add full width to row:
#my-row {
display: table;
height:20%;
width: 100%;
margin: 0;
}
Remove padding from container-fluid:
.no-padding {
padding: 0 !important;
}
Answer:
<div class="container-fluid no-padding">
</div>
DEMO
You just have to remove width:100% from the #my-row element.
DEMO
Instead of using the container class you should use the container-fluid class.
This gives the div 100% width.
If you really want to use container you can add !important after setting the width to 100%. This will override the normal bootstrap styles. But I do not recommend this.
Add this css below to the .container class..
padding-left: 0;
padding-right: 0;
Add this css below to the #my-row id..
margin-left: 0;
margin-right: 0;
View my live demo on jsfiddle
Related
I am using bootstrap and the images have this whitespace in between them which I can't seem to remove
I've tried setting the max width, object-fit, and floating to left, and removing padding
<style>
body {
font-family: Arial, Helvetica, sans-serif;
background-color: white;
}
.top {
position: absolute;
top: 0;
}
.imageStyle{
height: 100%;
width: 100%;
}
.c {
background-color: black;
}
</style>
<div class="container-fluid top">
<div class="row">
<div class="col-7">
<img src="Images/Background.png" align="left" class="img-fluid float-left imageStyle back">
</div>
<div class="col-5 c">
</div>
</div>
</div>
Well, Bootstrap's col-* classes have built-in padding (padding-left: 15px, padding-right: 15px). You can remove that padding by assigning the class px-0** on the col-7 div.
** sets padding-left: 0 and padding-right: 0
see here: https://codepen.io/anon/pen/pBeMLy
Is that the source of your issue or do you have something else in mind?
add * to your css it selects all of the elements in the DOM then remove padding and margin by adding padding: 0; and margin: 0;, try to replace the img tag with a div tag then add background-image to your css.
*{
padding: 0; margin: 0;
}
.image-style{
background-image: url("https://images.pexels.com/photos/1137745/pexels-photo-1137745.jpeg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 50vh;
}
.c{
background-color: #000;
height: 50vh;
}
<div class="container-fluid top">
<div class="row">
<div class="col-7 image-style">
<!-- I M A G E -->
</div>
<div class="col-5 c">
</div>
</div>
</div>
I used the no-gutters class in bootstrap
I want create this.
What I have so far is this, but it is not responsive as screen size changes. It stays on specific width, that is why i am thinking to replace this with image
<div class="container-fluid">
<div class="betn-footer">
</div>
</div>
.betn-footer{
background-color:#f4f3f3;
height:50px;
text-align:center;
position:absolute;
border-bottom-left-radius:50%;
border-bottom-right-radius:50%;
margin-top:-20px;
margin-left:65px;
width:973.88px;
box-shadow: 0 21px 30px -10px #080808;
}
Tell me if there is any other option to do this. Thank you!
Just remove your fixed widths and margins:
.container-fluid { margin-bottom: 2em; }
.betn-footer {
background-color: #f4f3f3;
height: 50px;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
box-shadow: 0 21px 30px -10px #080808;
}
<div class="container-fluid" style="width:200px;">
<div class="betn-footer"></div>
</div>
<div class="container-fluid" style="width:500px;">
<div class="betn-footer"></div>
</div>
<div class="container-fluid" style="width:1000px;">
<div class="betn-footer"></div>
</div>
You should not use margin-left and instead center the footer / your content with margin: 0 auto. Then you can set your footer width to a flexible width via using %
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto }
...
<IMG class="displayed" src="..." alt="...">
it will always display a picture in the center of the page.
In one of my row's I'd like to put a max width and center my text within that div.
My homepage text currently looks like::
I'd like to put a max width and center the text within this one section.
Ideal outcome:
CSS
.homepage-text {
font-size: 130%;
}
.light-section {
background-color: lightblue;
/* color: white; */
text-align: center:
}
HTML
<div class="row light-section">
<div class="col-sm-12">
<div class="col-sm-12 homepage-text">
<p>Text sit's here</p>
</div></div></div>
Live Link: http://185.123.97.138/~kidsdrum/moneynest.co.uk/
Maybe I didn't understand exactly what did you mean, but try this:
.homepage-text {
font-size: 130%;
max-width: 1000px;
margin: 0 auto;
float: none;
}
Try this code :
.homepage-text {
font-size: 130%;
width: 960px;
margin: auto;
float: none;
}
I've set a fixed width of 960px instead of a fluid width of 100% and center this container with margin: auto;
Also, you have to unset the float property to make the margin: auto; works.
Wrap the content in a fixed width or a maxed width max-width div, then make it float:none; and set the right and left margins auto !important
<div class="row light-section">
<div class="col-sm-12">
<div class="col-sm-12 homepage-text" style="width: 400px; float: none;margin: 0 auto !important;">
<p>Text sit's here</p>
</div>
</div>
</div>
You could also pull this off using dynamic margin & width values, without altering the float nor using margin: 0 auto; (If you want to use that margin, you will have to use float: none; Otherwise, it won't automatically center the homepage-text.)
.homepage-text {
font-size: 130%;
margin: 0 25% 0 25%; // Same as margin: 0 25%; but it illustrates 25+25+50=100%
width: 50%;
}
Bootstrap has already done that job for you. All you need to set is the max-width of the container class. Doing so helps to maintain consistency in the page layout. Here is the fiddle.
.container {
max-width:700px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="container">
<p>Text sit's here</p>
</div>
</div>
I'm currently designing a dashboard and I'm looking for a good/right way to align multiple divs in a container. I want the divs taking up maximum space left and right with the right margins .
<div class="wrapper">
<div class="container">
<div class="1"></div>
<div class="2"></div>
<div class="3"></div>
<div class="4"></div>
</div>
</div>
.container {
margin: 15px;
}
What is the best way to achieve this?
The easiest way would be to use display and the table-layout properties :
http://jsfiddle.net/3Q4qv/
.wrapper {
border:solid;
display:table;
border-collapse:separate;
border-spacing:15px;
/* give it width if you wish */
}
.container {
display:table-row;
}
.container > div {
display:table-cell;
border:solid;
/* let's give a min size since it is empty */
height:2em;
min-width:2em;
}
you can even make a mix with padding and border-spacing : http://jsfiddle.net/3Q4qv/1/
.wrapper {
border:solid;
display:table;
border-collapse:separate;
border-spacing:5px;
padding:10px;
}
Check out this JSFiddle: http://jsfiddle.net/4Y3jS/3/ You should set a specific width on your container class, and then float each of the inner divs left.
HTML:
<div class="container">
<div class="box-1"><img style="width:50px; height: 50px; " src="http://www.mlahanas.de/Greeks/images/sq1.jpg"></img></div>
<div class="box-2"><img style="width:50px; height: 50px; " src="http://www.mlahanas.de/Greeks/images/sq1.jpg"></img></div>
<div class="box-3"><img style="width:50px; height: 50px; " src="http://www.mlahanas.de/Greeks/images/sq1.jpg"></img></div>
<div class="box-4"><img style="width:50px; height: 50px; " src="http://www.mlahanas.de/Greeks/images/sq1.jpg"></img></div>
</div>
CSS:
.container {
width: 300px;
}
.box-1, .box-2, .box-3, .box-4 {
float: left;
padding: 0 2px;
}
Use any width in your container like:
.container {
width: 400px;
}
Then you can set the style for all elements inside. Look that if you want to add border at the elements, try to use the box-sizing property.
.box {
width: 21%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
margin: 0 2%;
}
Try something like this: JSFiddle
Basically floating the blocks and letting their width be determined by a percentage of the parent (up to 25% since there are 4 - notice that I used only 23% and then I placed a 1% margin around all blocks giving you a 2% space between any two blocks -- adjust these numbers as you see fit).
.container {
margin: 15px;
}
.box {
float: left;
width: 23%;
margin: 0 1%;
}
<div class="container">
<div class="1 box"></div>
<div class="2 box"></div>
<div class="3 box"></div>
<div class="4 box"></div>
</div>
If you don't want space between the boxes, this approach really shines - use width:25%; margin: 0;
Alternatively, you could use display: inline-block;
<div class="wrapper">
<div class="container">
<div class="1 box"></div><!--
--><div class="2 box"></div><!--
--><div class="3 box"></div><!--
--><div class="4 box"></div>
</div>
</div>
.box {
display: inline-block;
width: 25%;
margin: 0;
}
I have some html and css that does what I want, but with img placeholders..
Am looking to recreate the effect of these img with css for div boxes..
<div class="item-box">{{ item.title }}</div> <!--with css for .item-box-->
Here's the html:
<div class="row">
<div class="col-xs-6 col-sm-3 col-md-2">
<img src="http://placehold.it/200x200/336699" alt="">
</div>
...
<div class="col-xs-6 col-sm-3 col-md-2">
<img src="http://placehold.it/200x200" alt="">
</div>
</div>
And the css:
.row {
margin: 0;
}
img {
width: 100%;
}
.col-xs-6 {
padding: 1.5%;
margin: 0;;
}
.col-sm-3 {
padding: 1.5%;
margin: 0;
}
.col-md-2 {
padding: 1.5%;
margin: 0;
}
Plus a fiddle (responsive on browser adjustment): http://jsfiddle.net/3hHC9/embedded/result/
Currently your image is present inside the div , Your question is not clear as far as i understood you want to do this with css
the best and easy way would be to use the image in div background so that it act as placeholder. You have to give min-width and min-height to container , to
ensure that it is visible with the image as placeholder even if it is empty or have less content
div{
background-image: url("http://placehold.it/200x200");
background-size: cover;
min-height: 100px; // need to specify min-height and min-width
min-width: 100px;
}