Question 248260 in CSS Question posted in
Some basic documentation can be found here.

Custom CSS interfering with bootstrap grid system

I’m facing an issue with the >div part in my CSS selector .row > div. It seems to be causing an error in my grid system implementation. How can I resolve this error, and what is the reason behind it?

I’m using the descendant selector because without it, the border is applied to one large box, but I want it to be applied to both columns.

[edit] columns also not being implemented when I use the margin property in the CSS rule.

/* styles.css */
.row > div {
    padding: 20px;
    margin: 20px;
    border: 2px blue solid; 
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">
    <title>Tasks</title>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-sm-12 for-columns">
                <p> some text here </p>
            </div>
            <div class="col-lg-6 col-sm-12 for-columns">
                <p> some text here </p>
            </div>          
        </div>
    </div>    
</body>
</html>
Tags:

2

Answers


  1. 0

    You can reduce the padding of div or watch boostrap website for help.https://getbootstrap.com/
    Bootstrap

    Login or Signup to reply.
  2. 0

    Mixins in Bootstrap version 5.3 have changed. If you were using Bootstrap version 4, the mixin looked like this:

    @mixin make-row($gutter: $grid-gutter-width) {
  display: flex;
  flex-wrap: wrap;
  margin-right: -$gutter / 2;
  margin-left: -$gutter / 2;
}

    In the version you import, Mixins looks like this:

    @mixin make-row($gutter: $grid-gutter-width) {
  --#{$prefix}gutter-x: #{$gutter};
  --#{$prefix}gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--#{$prefix}gutter-y));
  margin-right: calc(-.5 * var(--#{$prefix}gutter-x));
  margin-left: calc(-.5 * var(--#{$prefix}gutter-x));
}

    After importing bootstrap, you need to overwrite the styles.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search