Trouble with Bootstrap Grid

HTML-CSS
1

I have doing a sample project and having trouble with using bootstrap grid. I think some of the css in my header is messing with the bootstrap classes below it. Below is my html and my css

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Best Soil Test</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/876d2b1d31.js" crossorigin="anonymous"></script>
</head>
<body>
    <div class="header">
        <span><a href="./index.html" class="header_links">Home</a></span>
        <span><a href="./tests.html" class="header_links">Tests</a></span>
        <span><a href="./about.html" class="header_links">About</a></span>
        <span><a href="./contacthtml" class="header_links">Contact</a></span>
    </div>
    
    <div class="container text-center">
        <div class="row">
            <div class="col" id="box1">
                <p>TTTTTT</p>            
            </div>
            <div class="col">
                HHH
            </div>
        </div>
    </div>
</body>
</html>

CSS

body {
    background-color: coral;
    height: 2000px;
}

.header {
    padding: 20px 16px;
    background: #555;
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 18px;
    letter-spacing: 1px;
    word-spacing: 2px;
    color: #000000;
    font-weight: 400;
    text-decoration: none !important;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    position: sticky; top: 0;
    border-radius: 10px;
  }

.header > span >  a:link {
    color: black;
    text-decoration: none;
}

.header > span > a:visited {
    color: black;
    text-decoration: none;
}

.header > span > a:hover {
    color: pink;
    background-color: blue;
    text-decoration: none;
    border-radius: 20%;
    padding: 10px;
}

.header > span {
    margin-right: 40px;
    text-decoration: none;
}

#box1 {
    border: 2px solid #000000;
}

any help would be appreciated

2

Hi,
First of all, make sure to add the bootstrap library into your head element.
Bootsrap uses col-*-* for each box inside a row. after your div with .row class, you add your columns with the class col-*-*. you will replace both ( * ) with values. the first * is replaced by the size of your column ( sm , xs , lg). and the second * is replaced by the number of units upto 12. Overall your column should class should look something like class= "col-sm-4".
Your code is also correct and I think you should only include the bootstrap library if it is not already included by the site.
Hope this helps.

3

It would help if you told us what isn’t working for you.

Your code should create a two-column layout as long as you are using Bootstrap V4 and above.

4

sorry i didnt explain my issue.

I am trying to use the grid system in the ‘container’ class. when i try to implement to child divs to the container row, they dont adapt to the grid system.

not sure if something im doing is making them not work.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.