Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Square responsive divs using Bootstrap 4

Tags:

css

twitter-bootstrap

I want to create a grid system similar to this page using Bootstrap 4. I want to create a square box in a col-sm-4 and a longer rectangle next to it in a col-sm-8 of the same height. I'm having trouble creating a square box that is responsive. How can I do this?!

Current code:

<div class="container">
    <div class="row section-box">
        <div class="col-sm-4 text-center description-text">
        first square box.
        </div>
        <div class="col-sm-8 description-image">
        second rectangle box.
        </div>
    </div>
</div>

Things I've tried:

  • Using jQuery to set the height. This doesn't work with padding on the div, and isn't responsive.
  • This link where I managed to get a square box with a rectangle next to it, but as soon as text was added it was no longer a square.
like image 436
Tometoyou Avatar asked Sep 17 '17 16:09

Tometoyou

People also ask

How do I square in Bootstrap?

Square. Create a square-shaped element by using a . square class with . square-<sm|md|lg> .

How do I make 5 columns in Bootstrap 4?

Populate the 'row' div with 5 divs with class 'col'. Because Bootstrap 4.0+ grid system has now shifted to Flexbox, the columns will arrange by themselves into five equally sized DOM elements.

How do I make 5 columns in Bootstrap?

You can get the 5 colums to wrap within the same . row using a clearfix break such as <div class="col-12"></div> or <div class="w-100"></div> every 5 columns. As of Bootstrap 4.4, you can also use the row-cols-5 class on the row ... Save this answer.

1 Answers

You could use bootstrap 4 embed-responsive class and it's done

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
</head>
<body>
<div class="container">
    <div class="row m-5">
        <div class="col-1">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-1</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-2">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-2</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-3">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-3</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-4">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-4</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-5">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-5</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-6">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-6</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-7">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-7</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-8">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-8</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-9">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-9</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-10">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-10</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-11">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-11</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-12">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-12</div>
            </div>
        </div>
    </div>
</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
like image 200
Vincent Guyard Avatar answered Nov 15 '22 05:11

Vincent Guyard
Sign in to Comment

Related questions

loading Spinner - always keep in the middle of the screen even while scrolling the page
Atom Snippets - Unexpected New Line Error
Placing text under image that is floating left
CSS background-position top right corner
Bootstrap Radio Button uncheck by jQuery
Can you make a flexbox child expand to fit parent but not contents?
Using css modules how do I define a global class
Header that stays fixed in place as navigating through pages (it is never reloaded)
How to delay showing of progress if ajax takes less than X seconds?
Prevent elements from stretching to 100% width of their flex container
How to Place Two Input Fields Side-by-Side
Remove blue border appearing around element when clicked
How to make image 3D using CSS
R Markdown slides with reveal.js: How to left align list items (bullets and numbers)?
3 rows, 100% height layout, with flexbox
Centering a spinner within a div
CSS Bootstrap container background
Change font-size When Selection is made
Darkening a background image on a bootstrap carousel
CSS - Underline, strikethrough and overline (with styles and colors) in one element

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!