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>
Related
So I've got a 2 column layout in Bootstrap 5 and each column needs to remain at 50% width e.g.
<div class="container-fluid">
<div class="row">
<div class="col">
One of two columns
</div>
<div class="col">
One of two columns
</div>
</div>
</div>
If I wanted the content of the first col to be perfectly flush to the left and right hand edge of the column (no padding etc), but still keep the second column with the default padding, it would seem that if I simply did this:
<div class="container-fluid">
<div class="row">
<div class="col p-0">
One of two columns
</div>
<div class="col">
One of two columns
</div>
</div>
</div>
It makes column 1 slightly less wide and column 2 wider. Thus column 2 is out of alignment as both columns are no longer 50% in width.
To keep both columns the same width but have no padding on column 1, the only solution I can come up with is to then adjust the flex property on all columns within .container-fluid to increase the flex-basis value to an arbitrary amount below 50% e.g.
.container-fluid .col { flex: 1 0 20%; }
This then has the desired effect and keeps both columns in alignment. But it feels a bit hacky.
I wonder if I've missed something?
Are you using the latest bootstrap? It seems to work fine here. Both column contents are exactly the same width.
<html lang="en">
<head>
<title>Document</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
crossorigin="anonymous"
/>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col p-0">
One of two columns
</div>
<div class="col">
One of two columns
</div>
</div>
</div>
</body>
<script
src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js"
integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.min.js"
integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy"
crossorigin="anonymous"
></script>
</html>
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
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>
can somebody explain me, I have an issue with the CSS of bootstrap
On this page you can see the two headings h1 and h2 that are in the same row can stick together instead of taking space as a block because the row has a display:flex property. Is there any way to make these two headings on two separated line? I tried to add display:block to the two headings but that doesn't work. Thank you all!
Ideal way is to have two rows. But as you asked, you can do something like this:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row">
<h1 class="d-block w-100">Heading 1</h1>
<h1 class="d-block w-100">Heading 2</h1>
</div>
you can add class flex-column to you row.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" style="background-color: red;">
<div class="row flex-column">
<h1>Heading 1</h1>
<h1>Heading 2</h1>
</div>
</div>
I want to add a border to the top of my column. I am trying to use bootstrap 4, and I just can't figure it out.
I am using <div> tags to make the columns here is my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Untitled Document</title>
<style type="text/css">
</style>
</head>
<body>
<div class="row">
<div class="col-lg2, col-md-2, col-sm-2, col-xs-2" style="background: #efefd8; min-height:77px;">
<h4><b><center>
COL 1
</center></b></h4>
</div>
<div class="col-lg2, col-md-2, col-sm-2, col-xs-2" style="background: #efefd8; min-height:77px;">
<h4><b><center>
COL 2
</center></b></h4>
</div>
<div class="col-lg-2, col-md-2, col-sm-2, col-xs-2" style="background:#efefd8; min-height:77px;">
<h4><b><center>
COL 3
</center></b></h4>
</div>
<div class="col-lg-2, col-md-2, col-sm-2, col-xs-2" style="background: #efefd8; min-height:77px;">
<h4><b><center>
COL 4
</center></b></h4>
</div>
<div class="col-lg-2, col-md-2, col-sm-2, col-xs-2">
</div>
</div>
</body>
</html>
Remove the commas from your column classes:
<div class="col-lg2 col-md-2 col-sm-2 col-xs-2" style="background: #efefd8; min-height:77px;">
Use the class "text-center" to align text to the center.
You can add a border top by adding a custom class to the columns like "border-top"
and then in your css file:
.border-top {
border-top: 1px solid black;
}
Other things to note, you should make an external stylesheet rather than inlining your styles in a style tag, that will become super unmanageable as you build out an entire website, the whole point of css is to have selectors that match multiple elements on your site and apply the same consistent styles across the whole site. I would strongly recommend taking a free course on CSS, which can be found all over the internet or taking a paid class.