Jump to content
Please Use CODE Tags

Please, help me fix my bootstrap

suha04
By suha04
in Programming
 Share
Posted

Hi mates!

 

After the last topic, I started searching the web on how to use bootstrap, but no matter how hard I try at my button-row, the responsivity doesn't work the way I'd like it. It's just a few lines of coding, but I'd be very grateful if someone'd help me fix it.

 

Thanks!

 

 

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Just say no to RAR.

CPU: AMD Ryzen 9 5900X · Cooler: Artic Liquid Freezer II 280 · Motherboard: MSI MEG X570 Unify · RAM: G.skill Ripjaws V 2x16GB 3600MHz CL16 (2Rx8) · Graphics Card: ASUS GeForce RTX 3060 Ti TUF Gaming · Boot Drive: 500GB WD Black SN750 M.2 NVMe SSD · Game Drive: 2TB Crucial MX500 SATA SSD · PSU: Corsair White RM850x 850W 80+ Gold · Case: Corsair 4000D Airflow · Monitor: MSI Optix MAG342CQR 34” UWQHD 3440x1440 144Hz · Keyboard: Corsair K100 RGB Optical-Mechanical Gaming Keyboard (OPX Switch) · Mouse: Corsair Ironclaw RGB Wireless Gaming Mouse

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
20 minutes ago, Chris Pratt said:

Just say no to RAR.

Okay then, here's the code:

 

html:

 

<!DOCTYPE html>

<head>

    <title>Website</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=yes>

    <link rel="stylesheet" href="bootstrap.min.css">

    <link rel="stylesheet" href="website.css">

</head>

<body>

    <div class="container">

        <div class="row">            

            <div class="col-1"><a href="placeholder1.html" class="left" class="text" role="button" id="placeholder1">Button1</a></div>

            <div class="col-1"><a href="placeholder2.html" class="others" class="text" role="button" id="placeholder2">Button2</a></div>

            <div class="col-1"><a href="placeholder3.html" class="others" class="text" role="button" id="placeholder3">Button3</a></div>

            <div class="col-1"><a href="placeholder4.html" class="others" class="text" role="button" id="placeholder4">Button4</a></div>

            <div class="col-1"><a href="placeholder5.html" class="others" class="text" role="button" id="placeholder5">Button5</a></div>

            <div class="col-1"><a href="placeholder6.html" class="right" class="text" role="button" id="placeholder6">Button6</a></div>

            <img class="col-1" src="Logo.png">           

        </div>  

    </div>

</body>

 

css:

 

.others

{

display: block;

position: Fixed;

border: 3px solid rgb(184, 8, 90);

background-color: black;

color: white;

font-size: 200%;

font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

height: 55px;

width:250px;

text-align: center;

}

 

.text

{

    font-size: 30px;

    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

}

 

.left

{

display: block;

position: Fixed;

border-radius: 100px 0px 0px 100px;

color: white;

font-size: 200%;

font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

background-color: black;

border: 3px solid rgb(184, 8, 90);

height: 55px;

width:250px;

text-align: center;

}

 

.right

{

display: block;

position: Fixed;

border-radius: 0px 100px 100px 0px;

color: white;

font-size: 200%;

font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

background-color: black;

border: 3px solid rgb(184, 8, 90);

height: 55px;

width:250px;

text-align: center;

}

 

#placeholder3

{

    left: 500px;

    

}

 

#placeholder2

{

    left: 250px;

}

 

#placeholder1

{

    left: 0px;

}

 

#placeholder4

{

    right: 500px;

    

}

 

#placeholder5

{

    right: 250px;

}

 

#placeholder6

{

    right: 0px;

}

 

img

{

    display: block;

    background-color: black;

    margin: auto;

    width: 400px;

    height: auto;

    

    border: 3px solid rgb(184, 8, 90);

}

 

 

And the logo picture is attached.

 

Logo.png

bootstrap.min.js jquery-3.5.1.min.js bootstrap.min.css

Link to comment
Share on other sites
Link to post
Share on other sites
  • 2 weeks later...
Posted

@suha04 

 

Not exactly sure what you are trying to achieve, but I took your code snippets and edited the code. Most of the issues with the responsivity came from your `.left` and `.right` class being fixed, in which I removed.

 

With my example, you can take and copy it into a codepen in which you will see the buttons wrap as the page shrinks with the help of good ole CSS flex. The bootstrap class you placed `.col-1` has a max width of 8.3% which is definitely not going to fit the text. 

 

I hope this helps give you an idea of what needed to be tweaked, for the buttons to be wrapped properly.

  

<div class="container">

    <a href="placeholder1.html" class="others" class="text" role="button" id="placeholder1">Button1</a>

    <a href="placeholder2.html" class="others" class="text" role="button" id="placeholder2">Button2</a>

    <a href="placeholder3.html" class="others" class="text" role="button" id="placeholder3">Button3</a>

    <a href="placeholder4.html" class="others" class="text" role="button" id="placeholder4">Button4</a>

    <a href="placeholder5.html" class="others" class="text" role="button" id="placeholder5">Button5</a>

    <a href="placeholder6.html" class="others" class="text" role="button" id="placeholder6">Button6</a>
</div>

  

.container {
  position: relative;
  display: flex;
  flex-flow: wrap row;
  align-items: center;
  justify-content: center;
  margin: auto;
}

.others {
  display: block;
  flex-shrink: 0;
  border: 3px solid rgb(184, 8, 90);

  background-color: black;

  color: white;

  font-size: 200%;

  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;

  height: 55px;

  width: 250px;

  text-align: center;
}

.others:first-of-type {
  border-radius: 100px 0px 0px 100px;
}

.others:last-of-type {
  border-radius: 0 100px 100px 0;
}

.text {
  font-size: 30px;

  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
On 5/26/2021 at 6:01 PM, scrottiemcwebdev said:

@suha04 

 

Not exactly sure what you are trying to achieve, but I took your code snippets and edited the code. Most of the issues with the responsivity came from your `.left` and `.right` class being fixed, in which I removed.

 

With my example, you can take and copy it into a codepen in which you will see the buttons wrap as the page shrinks with the help of good ole CSS flex. The bootstrap class you placed `.col-1` has a max width of 8.3% which is definitely not going to fit the text. 

 

I hope this helps give you an idea of what needed to be tweaked, for the buttons to be wrapped properly.

  


<div class="container">

    <a href="placeholder1.html" class="others" class="text" role="button" id="placeholder1">Button1</a>

    <a href="placeholder2.html" class="others" class="text" role="button" id="placeholder2">Button2</a>

    <a href="placeholder3.html" class="others" class="text" role="button" id="placeholder3">Button3</a>

    <a href="placeholder4.html" class="others" class="text" role="button" id="placeholder4">Button4</a>

    <a href="placeholder5.html" class="others" class="text" role="button" id="placeholder5">Button5</a>

    <a href="placeholder6.html" class="others" class="text" role="button" id="placeholder6">Button6</a>
</div>

  


.container {
  position: relative;
  display: flex;
  flex-flow: wrap row;
  align-items: center;
  justify-content: center;
  margin: auto;
}

.others {
  display: block;
  flex-shrink: 0;
  border: 3px solid rgb(184, 8, 90);

  background-color: black;

  color: white;

  font-size: 200%;

  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;

  height: 55px;

  width: 250px;

  text-align: center;
}

.others:first-of-type {
  border-radius: 100px 0px 0px 100px;
}

.others:last-of-type {
  border-radius: 0 100px 100px 0;
}

.text {
  font-size: 30px;

  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

 

Hi mate!

 

Sorry for the late reply, I had a breakdown moment a few days after my post, and since then I forgot I even asked it. However, this was exactly the problem I needed to fix, so thank you for pointing it out for me 😛

 

Cheers!

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×