Why is my Bootstrap row adding padding to my element? - html

I'm trying out bootstrap column system and I'm trying to center a text but it wont work because it has a padding that maybe comes from the bootstrap row class here's my code
<section className="home-main-content row" style={{paddingRight:'0px', marginRight:0}}>
<div className="text-a-img row col-12">
<div className="ti-title col-12 mt-4 text-center row">
<h1>Fast response</h1>
</div>
<div className="ti-img col-12"></div>
<div className="ti-text-col-12"></div>
</div>
<div className="text-a-img row col-12">
<div className="ti-title col-12 mt-4 text-center row">
<h1>Fast response</h1>
</div>
<div className="ti-img col-12"></div>
<div className="ti-text-col-12"></div>
</div>
<div className="text-a-img row col-12">
<div className="ti-title col-12 mt-4 text-center row">
<h1>Fast response</h1>
</div>
<div className="ti-img col-12"></div>
<div className="ti-text-col-12"></div>
</div>
</section>
those custom class names did nothing cause my css is still empty it looked like this in action
the only way I can get rid of this padding is to remove the row class and I don't want to do that I've tried inline styles custom class etc, how do I get rid of this padding?

Logically this isn't the way to go with bootstrap grids. The first issue I can see here is that you are directly using row inside a row. Ideally row should be immediately followed by a col. and if you want to introduce new grid rows/cols, you should do in that column. So it would be something like that:
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-6">
</div>
<div class="col-6">
</div>
</div>
</div>
</div>
and in your case:
<section className="home-main-content row" style={{paddingRight:'0px', marginRight:0}}>
<div className="text-a-img col-12">
<div className="row">
<div className="ti-title col-12 mt-4 text-center row">
<h1>Fast response</h1>
</div>
<div className="ti-img col-12"></div>
<div className="ti-text-col-12"></div>
</div>
</div>
</section>
Also some other things to consider:
Always wrap you rows/cols grid with container class, either container or container-fluid.
Plus, consider setting you own margin and padding values for rows and columns, as bootstrap also have default values for row and col class. So please consider them as well.
And also you are clearly using react.js, so I'll suggest to go for REACTSTRAP. its a bootstrap wrapper for react. you'll have much cleaner code to work with. its as easy as this:
<Container>
<Row>
<Col md={12}>
</Col>
</Row>
</Container>

As I mentioned, immediately nested rows is non-standard. The styles you've shown are for elements that are children of rows and are related to gutters. So by nesting rows as you have that styles are applied to the interior element.
Either remove the outer row class or put a column between the rows, per standard implementation.

Did you try to write "text-align: center" in css

Related

Why does bootstrap handle col spacing differently depending on num of cols?

<br>
<h6>
This row/deck contains two elements. You can see that even with col-md-4 it spans more than 2/3 of the width.
</h6>
<div class="flex-row">
<div class="card-deck">
<div class="card col-12 col-md-4">
</div>
<div class="card col-12 col-md-4">
</div>
</div>
</div> <br><br>
<h6>
This row/deck contains three elements. You can see that each card spaces 1/3 of the width as expected.
</h6>
<div class="flex-row">
<div class="card-deck">
<div class="card col-12 col-md-4">
</div>
<div class="card col-12 col-md-4">
</div>
<div class="card col-12 col-md-4">
</div>
</div>
</div>
</div>
https://jsfiddle.net/9e85Lb0y/
In this example there are two flex-rows each containing a card deck. The first deck has 2 cards and the second deck has 3 cards. All of the cards are identical. Why is it that the top row has wider cards? I would have expected the top row to have the same widths as the bottom row.
Columns aren't meant to be inside card-deck. They're only supposed to be contained in .row. The cards would go inside the columns.
From the Bootstrap docs...
"Rows are wrappers for columns... In a grid layout, content must be
placed within columns and only columns may be immediate children of
rows."
If you're trying to set widths for the cards in card-decks, see:
Bootstrap 4 card-deck with number of columns based on viewport, or
bootstrap 4 card-deck containing cards with different width
TLDR
Use flex-row and col-* to explicitly specify widths. Use card-deck and card to create evenly sized blocks. Avoid mixing the two, they are not designed for use together straight out of the box.
Long Answer
The issue here is most likely caused by the mixture of both the flex-row and card-deck classes. While both offer very similar functionality, there are some key differences which separate how they behave.
The card-deck class simply guarantees that any immediate elements with the card class are all the same width as one another.
<div class="card-deck">
<div class="card">
<!-- Content -->
</div>
<div class="card">
<!-- Content -->
</div>
<div class="card">
<!-- Content -->
</div>
</div>
Every <div class="card"></div> will now become a uniform width. They are not guaranteed to fill the whole of their parent container. The card class also applies left and right margins of 15px to keep them separated.
<div class="flex-row">
<div class="col-4">
<!-- 1/3 Width Column -->
</div>
<div class="col-4">
<!-- 1/3 Width Column -->
</div>
<div class="col-4">
<!-- 1/3 Width Column -->
</div>
</div>
The flex-row and col-* classes on the other hand allow you to create columns of specific size. Each col-* class simply applies a width to the element, the onus is on you to make sure your content will fit appropriately at each breakpoint. col's SHOULD NOT have any margins applied as CSS width declarations do not account for margins.

Elements in div overlapping on resize Bootstrap

I'm having issue with my labels overlapping within my div row
My bootstrap looks as follows
<div class="col-xs-12 col-md-12 col-lg-12">
<div class="row">
<div class="col-xs-12 col-md-12 col-lg-2 ">
<div class='card'>
<div class='card-block'
<div class="row text-nowrap">
<label class="control-label col-xs-12 col-md-12 col-lg-6" for="FinalMonthEnd">Final Month End:</label>
<kendo-dropdownlist class="col-xs-11 col-md-11 col-lg-5" id="FinalMonthEnd">
</kendo-dropdownlist>
</div>
</div>
</div>
<div class="col-xs-12 col-md-12 col-lg-10 ">
<kendo-grid [kendoGridBinding]='grid' >
</kendo-grid>
</div>
</div>
</div>
I had to add this to my css as the label text is large so when it gets resized the text will go to the next line one letter at a time.
.text-nowrap {
white-space: nowrap;
}
When the page is resized down before it gets to the col-md threshold the two start merging together and overlapping each other and looks terrible. How can I prevent this so that each stay separate?
(1) <div class='card-block' is missing a >.
(2) Try applying form-group class instead of row to parent div of label and kendo-dropdownlist.
(3) Try adding form-control class to kendo-dropdownlist.
(4) Class prefix col-xs is dropped in Bootstrap v4.0 and is no more recognizable. You should use col- instead (although it will not make difference to your code, just mentioned it for info).
Hope this can help with some direction.

Multiple rows inside a row with Bootstrap 4

I'm trying to create a full width page using Bootstrap. I have a setup similar to this:
<body>
<div class="container-fluid">
<div class="row">
The first row goes here
</div>
<div class="row">
The second row goes here
</div>
<div class="row">
The third row goes here
</div>
</div>
</body>
If I wanted to create a row inside a row, how would I do that? This is what I am trying to achieve:
<body>
<div class="container-fluid">
<div class="row">
<div class="row text-center">
<h1>Some title</h1>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4">
Grid perhaps
</div>
<div class="col-md-4">
More grid
</div>
<div class="col-md-2"></div>
</div>
</div>
</div>
</body>
So basically I want to put the title on one row and some grids on another row. The tricky part here is, I want to place some columns that are 4 columns wide in the middle, and then have "2 columns padding" on the left and right.
My question may sound like others, but is unique because of the padding. How do I make this layout properly?
Bootstrap has a smart (but delicate) gutters system providing "natural" (margins + paddings) for content on all devices 1.
This system is based on two simple assumptions:
columns are immediate children of .rows 2
content is placed inside columns
That's why, if you want to place a .row inside another .row (to further divide one of your cols), you'd have to use this markup:
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-md-4 offset-md-2">
Grid perhaps
</div>
<div class="col-md-4">
More grid
</div>
</div>
</div>
</div>
The above doesn't make much sense by itself (you could just use the markup of the child row and you'd get the same result). But it's useful when you want to offset (or limit) an entire area of a layout, like this:
<div class="row">
<div class="col-md-8 offset-md-2 col-sm-10 offset-sm-1 col offset-0">
<div class="row">
<div class="col-md-6">Grid</div>
<div class="col-md-6">More grid</div>
<div class="col-md-6">Grid</div>
<div class="col-md-6">More grid</div>
<div class="col-md-6">Grid</div>
<div class="col-md-6">More grid</div>
<div class="col-md-6">Grid</div>
<div class="col-md-6">More grid</div>
<div class="col-md-6">Grid</div>
<div class="col-md-6">More grid</div>
</div>
</div>
</div>
See this fiddle for a live example.
1 To get rid of Bootstrap's gutters (in v4), one would need to apply no-gutters class on .row.
2 This is a "general principle", not a "strict rule". Other elements are allowed (and even recommended) as direct children of .rows (such as column breaks). At the other end, other elements extend from .rows (such as .form-rows), thus inheriting the gutters system and being valid column parents.
.row should not be the immediate child of another .row
.col* should not be the immediate child of another .col*
From the Bootstrap docs:
"Content should be placed within columns, and only columns may be
immediate children of rows."
I don't understand why you think you need a row in a row, and what's wrong with just using your layout w/o the nested row. Do you realize that col-12 is the width of a full row?
<div class="container-fluid">
<div class="row">
<div class="col-12 text-center">
<h1>Some title</h1>
</div>
</div>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-4">
Grid perhaps
</div>
<div class="col-md-4">
More grid
</div>
<div class="col-md-2">
</div>
</div>
</div>
http://www.codeply.com/go/jfrWn4QDf1
Bootstrap 4, the same rule applies:
"Rows are wrappers for columns. Each column has horizontal padding
(called a gutter) for controlling the space between them... In a grid
layout, content must be placed within columns and only columns may be
immediate children of rows" __ Bootstrap 4.1 Docs
Linked: Columns must be immediate children of rows?

What's the meaning of the "row" class in Bootstrap, its difference from containers, and how does it stack with col-***-*?

I'm trying to follow the guide here: http://getbootstrap.com/css/
and I just can't seem to understand what the "row" class is doing. I was trying some of the examples in the guide such as:
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
I tried it with the row div and without it, and I was trying to place everything inside a container, and there was no difference at all, they all looked the same.
Could anyone explain what the meaning of the "row" class is ?
In Bootstrap, the "row" class is used mainly to hold columns in it. Bootstrap divides each row into a grid of 12 virtual columns. In the following example, the col-md-6 div will have the width of 6/12 of the "row"s div, meaning 50%. The col-md-4 will hold 33.3%, and the col-md-2 will hold the remaining 16.66%.
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-4"></div>
<div class="col-md-2"></div>
</div>
I like to think of the row as a container that can contain X many columns equal to 12. You would use the row class to separate different stacked element (columns).
The columns as you defined them col-xs-12 col-md-8 mean that on a medium sized screen and above the div will span 8/12 of the page and on a xs small screen (mobile) it will span the full 12 columns. This works with the col-xs-12 col-md-4 class because 8 + 4 = 12.
If your entire site is split this way (8/12 and 4/12) then all you really would need is one row! Other wise you'd create another row for different column width. An example would be:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8"></div>
<div class="col-xs-12 col-sm-4"></div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4"></div>
<div class="col-xs-12 col-sm-2"></div>
<div class="col-xs-12 col-sm-6"></div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3"></div>
<div class="col-xs-12 col-sm-3"></div>
<div class="col-xs-12 col-sm-3"></div>
<div class="col-xs-12 col-sm-3"></div>
</div>
</div>
The container class is used to create a nice margin around your entire site, but if you have a portion of your site you want to span across the entire width, you would need to close the container and create a container-fluid class. Then create another container to get the margin back. Hope that all makes since! Just how I think about it as.
The difference can be seen here with row class. Row like container is a class applied to the element.
P.S: run the snippet in full view
.color {
background: #cfcfcf
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class='color container'>
Container only
</div>
<p>
<div class='color container-fluid'>
<div class=row>
Fluid Container & row
</div>
</div>
<p>
<div class='color container'>
<div class=row>
Container & Row
</div>
</div>

Center element in Bootstrap row with two elements at each side

I'm working with Bootstrap 3.0 and I need one row with three elements. I want one fixed at the center and other two at the left and right sides. The following code shows what I have. This works, but it makes three rows.
<div class="row-centered">
<span class="text-left">text</span>
<div class="center-block" style="width:200px;background-color:#ccc;">...</div>
<div class="text-right">text</div>
</div>
You could use <div class="row"> and <div class="col-sm-4"> (where "col-sm-4" is interchangable with classes like "col-sm-3", "col-md-4", etc.) to put elements in-line on the same row - here's a JSFiddle.
<div class="row">
<div class="col-xs-4 text-right">text</div>
<div class="col-xs-4" style="background-color:#ccc;">...</div>
<div class="col-xs-4 text-left">text</div>
</div>
try using a tradition row and take advantage of the Bootstrap Grid. Static widths are a bad idea but if you told me specifically what width you are looking to achieve we can better suit it with a column size.
<div class="row">
<div class="col-xs-4 text-left">text</div>
<div class="col-xs-4 text-center" style="background-color:#CCC;">...</div>
<div class="col-xs-4 text-right">text</div>
</div>