As I understand flexbox fills available space in width.
I inspected the the row many times and I really do not understand why it does not fill all available space in width. It's display flex + nothing strange here. And as you can see chrome tells that there is a lot of available space to fill.
Before this row div I created another div but only d-flex and background-red; and it worked correct and filled all available width space. While this row doesnt do this. And the question is why?
I also searched internet looking for answer but could not find any.
<div class="container">
<div class="row justify-content-md-center">
<div class="col-10 pb-2 text-justify news_content">
test
</div>
</div>
</div>
https://jsfiddle.net/g1xLhz6r/
Changing the bootstrap class .container to .container-fluid and changing the class .col-10 to .col gives the result you describe. Remember that .col-10 means use 10 of the 12 available columns so puts a 1-column space on either side of that div.
.news_content {
background: yellow;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid"><!-- Change to container-fluid -->
<div class="row justify-content-md-center">
<div class="col pb-2 text-justify news_content">
test
</div>
</div>
</div>
You can also just eliminate the class .container or .container-fluid from the outer div and add the bootstrap class no-gutters to the div with class of row as shown here (you still need to use .col instead of .col-10):
.news_content {
background: yellow;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div><!-- removed class = container -->
<div class="row no-gutters justify-content-md-center"><!-- added no-gutters -->
<div class="col pb-2 text-justify news_content">
test
</div>
</div>
</div>
no-gutters
Related
How do I get a gap between the two columns?
This question has been asked here a lot of times, but all aswers I found did not work. For example: Bootstrap: add margin/padding space between columns
Bootstrap 5 documentation says to use gx-? to manipulate the gutter. However, it does not change the gap between both columns. Adding a margin like in the link seams to move the second column into another row.
Here is a running example:
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="row gx-5">
<div class="p-3 col-9 border border-3 border-primary">
<div class="border">Field1</div>
</div>
<div class="p-3 col-3 border border-3 border-primary">
<div class="border">Field2</div>
</div>
</div>
</body>
</html>
I want to have a full width 2 row, "1 column" layout, that takes up the entire viewport. The top row should have it's contents on the bottom of that row, and the bottom row should have it's contents on the top of that row.
Using some examples from bootstrap, I was able to achieve this: https://codepen.io/afagard/pen/QWpJWze
However, I am not sure if I am doing it correctly even though it looks as expected. Specifically, I tried to set the container to 100vh but that did not result in any changes to flexboxes so I've got each row at 50vh. I mostly do backend work and am trying to learn flexboxes.
Here is an example of a flexbox solution using just the bootstrap classes and no additional css:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<div class="container-fluid p-0 vh-100 d-flex flex-column text-center">
<div class="flex-grow-1 d-flex flex-column bg-primary">
<div class="mt-auto">
Top half
</div>
</div>
<div class="flex-grow-1 d-flex flex-column bg-secondary">
<div class="mb-auto">
Bottom half
</div>
</div>
</div>
.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
So the code is something like:
<section height=“1000px” width=”100%”>
<div class=" container">
<div class="row">
<div class="col-md-12"></div>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</section>
The objetive is to distribute the columns height equally according to the parent container height and width which are fixed. regardless its content. See the graphic to clarify what is pretended. I want to turnt this:
Into this:
I have seen other post that suggest to use "display:flex" to do something similar to this but not exactly. When I use "display:flex", to try to use later align-items, then bootstrap columns info is missed. Thanks.
Fundamental Bootstrap
BS uses classes that determine layout, style, and responsiveness. BS CSS is tightly integrated so that conflicts are minimized and overrides are difficult. You need to use BS classes as much as possible.
If you require unusual styles that aren't covered by BS classes then keep them minimal -- preferably to a single element by using style and/or width/height attributes.
<main ... height='1000px' style='min-height: 1000px'>...</main>
At the top level of the DOM are the basic layout tags. Its a hierarchy that should be adhered to:
<body>
<main class='container'>
<sector class='row'>
<!-- col-* | the total of all * cannot exceed 12 per .row -->
<div class='col-6'></div><div class='col-6'></div>
Note, the use of <main> and <section> tags. Its valid and OK semantically but not required. I do this to break up the monotony of <div> which makes developers error prone (Your example was missing an end tag). So the class hierarchy is required -- the alternative tags are not required but recommended.
In the OP HTML, the .container was wrapped in a <section> as per point #3, the only tag that should wrap .container is <body>. So remove that <section>.
Also, in OP HTML, the last .row has four .col-md-6 The total number per .row should be 12. Add another .row and move two of those .col-md-6 into it.
BS Classes
The following is a brief outline of which BS classes and inline styles were used and why:
<style>
.box::after {content: attr(class);} - Displays tag's classList for demo purposes
<main>
.container - Required layout
.d-flex, .flex-column, .align-content-stretch - Makes all .row to stretch vertically and evenly
.text-center - All descendant tags text are centered due to inheritance
Inline styles - width='100%' height='1000px' style='min-height: 1000px'
<section>
.row - Required layout
.flex-fill - Ensures that the tag's and its sibling's heights are evenly filled within the height of their parent tag
<div>
.col-md-12/6 - Required layout
.d-flex, .flex-wrap, .justify-content-center, .align-content-center - All content within will be horizontally and vertically centered
Also, you'll want to know how to override BS styles eventually (if not already) -- refer to this article.
Demo
Note: Details are commented in demo, review the demo in Full Page Mode.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<!-- External stylesheets go here - these styles will override* styles from
preceding stylesheets -->
<!-- Example: <link href="style.css" rel="stylesheet"> -->
<!-- Any styles only applying to this page goes into the <style> tag below.
These styles will override* any style from a stylesheet -->
<style>
body {
background: #000;
}
.box::after {
content: attr(class);
}
</style>
</head>
<body>
<!-- Any inline style (aka style attribute or width/height attribute) overrides*
external stylesheets and style tags -->
<!-- *override is guaranteed due to the rules of cascading with the exception of
!importance and specificity -->
<main class="container bg-dark border border-light d-flex flex-column align-content-stretch text-center" width='100%' height='1000px' style='min-height: 1000px'>
<section class="row flex-fill">
<div class="box col-md-12 bg-primary border border-dark d-flex flex-wrap justify-content-center align-content-center"></div>
</section>
<section class="row flex-fill">
<div class="box col-md-6 bg-warning border border-dark d-flex flex-wrap justify-content-center align-content-center"></div>
<div class="box col-md-6 bg-success border border-dark d-flex flex-wrap justify-content-center align-content-center"></div>
</section>
<section class="row flex-fill">
<div class="box col-md-6 bg-danger border border-dark d-flex flex-wrap justify-content-center align-content-center"></div>
<div class="box col-md-6 bg-info border border-dark d-flex flex-wrap justify-content-center align-content-center"></div>
</section>
</main>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!-- All external script files should here -->
<!-- Example: <script src='script.js'></script> -->
<script>
<!-- Script for just this page belongs -->
</script>
</body>
</html>
I have problem with centering components within col-md-12. For example I have 12 columns with <h1> or <h2> inside. I want to <h1> to be centered.
<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-12">
<div id="naglowek">
<h1>Something</h1>
</div>
</div>
</div>
</div>
I tried to access css class text-center or block-center to divs, but everytime <h1> was floated to the left. I need have this centered and set padding on my own. How can I solve this?
<div class="col-md-12 text-center"> works for bootstrap, no need to add any style unless you have already some style for h1. even if that's the case, you can use .text-center for h1
seems you are using width in that parent div. don't do that ever if you need content to be 100% width. and as per background, if you need 100% area occupy the background, you can simply use it in the div if not, you better use it with some pseudo classes :before or :after
In bootstrap 4
I know it's not the direct answer to this question but it may help someone
to center the childs horizontally, use bootstrap-4 class
justify-content-center
to center the childs vertically, use bootstrap-4 class
align-items-center
but remember don't forget to use d-flex class with these
it's a bootstrap-4 utility class, like so
<div class="d-flex justify-content-center align-items-center" style="height:100px;">
<span class="bg-primary">MIDDLE</span>
</div>
copy and paste this snippet to check how it works
Note: make sure to add bootstrap-4 utilities if this code does not work.
Hope this will help someone.
Add class="text-center" to div.
<div id="naglowek" class="text-center">
<h1>Something</h1>
</div>
text-center class is from bootstrap.
You can add the text-center class to the h1.
<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-12">
<div id="naglowek">
<h1 class="text-center">Something</h1>
</div>
</div>
</div>
</div>