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>
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'm pretty new to coding and I know very little, so I apologize if the answer to this question is very simple, but I scoured the internet for hours and came up with nothing. So, I have a very basic column set up, ie, something along the lines of:
<div class="row">
<div class="col-6 col-sm-3">CONTENT
<div class="row">
<div class="col-6 col-sm-3">CONTENT</div>
<div class="col-6 col-sm-3">CONTENT</div>
</div>
</div>
<div class="col-6 col-sm-3">CONTENT</div>
</div>
Where I have a row of two primary columns and two additional columns in the leftmost of the two primary columns. The height of the rightmost primary column is dependent upon the height of the content in the leftmost primary column and scales in size with said column, which I believe that is how it usually works. But for the secondary columns inside the primary leftmost column, I need the height of the leftmost secondary column to scale with the height of the content in the rightmost secondary column. In visual terms: Example.
I know I could simply set a height for the content of that column, but the issue is that the content on the page is fluid, so on different size screens, it doesn't always match up. Is there a way to do this? Thanks!
Looks like your layout is reverse. Column classes indicate the number of columns you'd like to use out of the possible 12 per row. So, if you want two equal-width columns across, you can use .col-6. You can use this code:
<div class="row">
<div class="col-md-6 col-12">CONTENT
<div class="row">
<div class="col-md-6 col-12">CONTENT</div>
<div class="col-md-6 col-12">CONTENT</div>
</div>
</div>
<div class="col-md-6 col-12">CONTENT</div>
</div>
If you want two equal-width columns across. You can use this code
.bg-p{
background:#b8b8b8;
width:100%;
padding:1rem;
}
.bg-c{
background:#939393;
width:100%;
padding:1rem;
min-height:150px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<title>Demo</title>
</head>
<body>
<div class="row">
<div class="col-sm-6">
<div class="bg-p">P1
<div class="row">
<div class="col-sm-6">
<div class="bg-c">S1</div>
</div>
<div class="col-sm-6">
<div class="bg-c">S2</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 d-flex">
<div class="bg-p">P2
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</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>
I don't know how to use Bootstrap Grid classes combined with BEM. Especially I mean container, row and col- classes. I want to do this in the best semantic way too.
I found a question like that in:
How to properly mix Bootstrap and BEM?
but there was not a satisfactory answer there.
when the "header" is a block I should do like this?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<header class="header">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-3">
<div class="header__logo">...</div>
</div>
<div class="col-xl-3">
<div class="header__logo">...</div>
</div>
</div>
</div>
</header>
this looks like a lot of unnecessary nesting