Overriding Bootstrap 3 CSS styles - html

I have this style:
.form-style{
margin: 50px auto;/* also tried margin: 50px auto !important; */
/* other styles */
}
And I use it in my div element like this:
<div class="row">
<div id="myDiv" class="form-style col-md-6 col-md-offset-3">
<p>This is a text.</p>
</div>
</div>
If I don't use form-style my div is appear at the center. But I want to use form-style and when I use it, the margin property of the form-style will prevent the bootstrap col-md-offset-3 to make my div center. How can I override the parent margin so that it haven't been set for my div?
If I remove the margin from form-style it works fine. But I can't remove the margin since it is used in other parts of my project.

Not sure why you want something like this as it seems a hack but your issue is that your element is floating that's why the margin auto is not working, so you need to remove the floating to make it working. (but it's not a good idea as it will make bootstrap behave strange)
.form-style {
margin: 50px auto!important;
float: none!important;
/* other styles */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class=container>
<div class="row">
<div id="myDiv" class="form-style col-xs-6 col-xs-offset-3">
<p>This is a text.</p>
</div>
</div>
</div>

From your question is seems that you don't want to replace the offset value of left to right, but want the margin set to the top and bottom. If this is the case this will work without any override of Bootstrap values. Also, adding the div id will not affect any other places that form-style is used.
#myDiv.form-style {
margin-top: 50px;
margin-bottom: 50px;
border: 1px solid;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div id="myDiv" class="form-style col-md-6 offset-md-3">
<p>This is a text.</p>
</div>
</div>

Related

How can I add margin between three Bootstrap columns without them wrapping?

.background-color {
background-color: lightgrey;
height: 200px;
border: 1px solid black;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-4 background-color">1</div>
<div class="col-4 background-color">2</div>
<div class="col-4 background-color">3</div>
</div>
</div>
So I have three columns which are each 4 columns in width and whenever I add m-3 (margin all around) they break off because of that, how can I contain them? So they stay all 3 on the same line?
.background-color {
background-color: lightgrey;
height: 200px;
border: 1px solid black;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-4 background-color m-3">1</div>
<div class="col-4 background-color m-3">2</div>
<div class="col-4 background-color m-3">3</div>
</div>
</div>
Only way I saw around this was to nest other elements.
<div class="container">
<div class="row">
<div class="col-4"><div class="col-12 background-color m-3">1</div></div>
<div class="col-4"><div class="col-12 background-color m-3">2</div></div>
<div class="col-4"><div class="col-12 background-color m-3">3</div></div>
</div>
</div>
The Bootstrap column system (as you probably know) is based on the idea that the page has 12 notional columns. You then use the col-* classes to indicate how many of those 12 columns each element takes up. So, in this case, you've declared that each element takes up 4 columns, which means they use all 12 notional columns.
The problem is that margins in HTML are outside the element. So, if you have three elements, each using 4 columns, and then add some margin, you now have more than the width of the 12 columns available (here, 12 columns plus three lots of m-3). As a result, the third element doesn't have enough space to be displayed and flows to the next line.
To avoid this, you can use padding instead of margins (because paddings are inside the element, you get visual separation while sticking to the grid widths). Alternatively, you could reduce the width of the elements to col-3 and add your margin outside that. However, this may mean (depending on your layout) that it doesn't use the full width.
Ultimately, if you need three elements across the page with margins, it may be best to define your own classes rather than trying to use the Bootstrap classes. Frameworks are great when you work with them, and a pain when you work against them!
.background-color {
background-color: lightgrey;
height: 200px;
border: 1px solid black;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col background-color m-3 ">1
</div>
<div class="col background-color m-3">2</div>
<div class="col background-color m-3">3</div>
</div>
</div>
use col instead of col-4

Does bootstrap support col in row without container

I'm using bootstrap 4.6.0 and wondering if next usage is supported. Everything works, but shouldn't I use another container:
<div class="container-fluid">
<div class="row">
<div class="col-6">
<!-- <div class="container-fluid"> -->
<div class="row">
<div class="col-6">A1</div>
<div class="col-6">A2sdfgsdfgsdfgsdfgsd fgsdfgdfgsdfgsdfg</div>
</div>
<!-- </div> -->
</div>
<div class="col-6">
<h1>Blasdfgsdfgsdfgsdfgsdfgsdsdfgsdfgsdfgsdfgsdfgsd sdfgsdfgsdfgsdfgsdfgsd</h1>
</div>
</div>
</div>
Are there any drawbacks for this usage? Inspecting bootstrap .container-fluid, it has only this style:
.container, .container-fluid, .container-xl, .container-lg, .container-md, .container-sm {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
No need to use container or container-fluid classes to nest rows.
Documentation: https://getbootstrap.com/docs/4.6/layout/grid/#nesting
.bd-example-row .row>.col, .bd-example-row .row>[class^="col-"] {
padding-top: .75rem;
padding-bottom: .75rem;
background-color: rgba(86,61,124,0.15);
border: 1px solid rgba(86,61,124,0.2);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container bd-example-row">
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
The difference between .container and .container fluid is that the .container has a max-width style rule applied. This is set at 1170px which when you add the 15px padding left and right, gives a total column width of 1200px.
The margin:0 auto in the styling you provided means that the .container 1200px column is horizontally centred in the viewport.
This is the only difference between them and so it’s fine to use one or the other. The .container-fluid is identical except it doesn’t have the max-width styling and so takes the full width of the viewport.
All you are doing is applying a nested row in your column, which is required to offset the left and right padding of the col. this correct- otherwise you would have left and right gutters of 30 px. But you only need one parent div with either .container or .container-fluid class.
Only the outermost row needs a container. As shown in the docs for "Nesting" the inner rows are placed directly inside the column.
Additionally, the container docs state...
"While containers can be nested, most layouts do not require a nested
container."

Issue displaying div's side by side

I am trying to create a scrollable div which should show 3 div's side by side.
Below is my html code, Issue with below code is it is not showing 3 div's side by side instead it is displaying one after other.
<div id="myDIV2" class="mygrid-wrapper-div">
<h1>This is scrollable div </h1>
<div class="row row-list">
<div class="col-xs-4">
<div>
Test1
</div></div>
<div class="col-xs-4">Test2</div>
<div class="col-xs-4">
<div>
Test3
</div></div>
</div></div>
css code:
<style>
.mygrid-wrapper-div {
/*border: solid red 5px;*/
overflow: scroll;
height: 40%;
}
</style>
A div is a "block-level" element. Block-level elements are 100% of the width of their parent element and displayed on their own line by default.
There are several ways to override this layout:
Set float for the element, which reduces it's width to the width of the content and allows other elements to be on the same line with the floated element.
Set the width to an amount that leaves left over space for another element to fit on the same line and set the element to be display:inline or display:inline-block.
Take the element out of the normal document flow by setting its position property to absolute, relative or fixed.
Make the elements flexitems within a flex container.
.mygrid-wrapper-div {
overflow: scroll;
height: 40%;
}
.col-xs-4 {
border: 1px solid red;
float:left;
}
<div id="myDIV2" class="mygrid-wrapper-div">
<h1>This is scrollable div </h1>
<div class="row row-list">
<div class="col-xs-4">
<div ng-controller="myController">
<div ng-repeat="c in chart">
<div google-chart chart="c">test</div>
</div></div></div>
<div class="col-xs-4">22222222 </div>
<div class="col-xs-4"> <div ng-controller="myController">
<div ng-repeat="c1 in chart">
<div google-chart chart="c1">test</div>
</div></div></div>
</div></div>
Add the css style:
float:left;
to your divs.
Your plnkr.co example was not loading bootstrap, which is why you were not seeing your divs aligned as expected. Made the following changes to make it work:
Removed:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
Added:
<link data-require="bootstrap-css" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
<link data-require="bootstrap#*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
Check https://plnkr.co/edit/r6a7lJpNNG2UI1qDbcb6?p=preview

padding issue in bootstrap with fullpage.js

I have webpage where I have implemented fullpage.js but the issue is there is padding-left and padding-right automatically added at container-fluid if I remove that,there is some white spaces on the left. This problem comes only when I add rows inside the container-fluid
html
<div class="container-fluid">
<div id="fullpage">
<div class="row section" id="home">HomePage</div>
<div class="row section" id="products">Products</div>
<div class="row section" id="pricing">Pricing</div>
<div class="row section" id="contact">Contact</div>
</div>
<div id="footer">Footer</div>
</div>
PS:Using bootstrap 4
.containers are meant to work together with .rows in Bootstrap. They have a clever system involving margins and paddings that cancel each other but make it look good on all devices.
Easiest way around that would be to place .container-fluid inside #fullpage, not the other way around.
As an alternative, if, for various reasons, you'd rather not (or cannot) change the markup, you could transfer the negative margins from .rows to #fullpage:
#fullpage {
margin-left: -15px;
margin-right: -15px;
}
#fullpage>.row {
margin-left: 0;
margin-right: 0;
}

Bootstrap Column is not expanding vertically

<body>
<div class="container">
<div class="row">
<div class="col-xs-12" style="background-color:red;">
dfsasfssssssssssssssssssssssssssssssssssssssssssssss
</div>
</div>
</div>
</body>
PLUNK to edit
This is probably something very obvious, but I thought bootstrap columns expanded vertically with content. Mine do not.
Bonus question: Was it always default behavior for bootstrap to indent "container" - how do I avoid this?
That's bootstrap normal behavior, because col-*-* is set float:left, so you need to use word-wrap:break-word, because you don't have spaces in your text.
To avoid the indent you mentioned (the default padding that bootstrap add to .container), you can reset by set .container {padding:0}
.col-xs-12 {
background:red; /* demo */
word-wrap: break-word
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12">
dfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssss
</div>
</div>
</div>