2 simple speakers with bootstrap

Asked

Viewed 1,231 times

1

I have a simple question about bootstrap. I may lack some insight to understand the case. I even have some mastery over, but following these images:

margin entre 2 colunas

outra representação do caso

I know it’s a simple question, I know how to solve it with css normally, but I want to know how best to do this with the advent of bootstrap in mind. As this structure will be repeated in several parts I can’t leave the css too convoluted... so: What is the best way to do this using bootstrap?

twitter-bootstrap margin

  • Bootstrap 3 or 4? Edit your question and put your HTML code and CSS you used if possible.

  • In version 4, thank you so much for the answer. helped me a lot =D

  • Expensive in version 4 then it is even better pq Grid is in Flex. In the documentation there are some native classes of the framework that can also help you align things with Flex. Although for aso Col I prefer the same offset. Good luck with the project []s

1 answer

1


In Bootstrap 4 and 3 too, you can use the offset to adjust the div in the center of the cointainer.

Bootstrap 4

Notice that just put offset-2 in the first div and it worked. (see that with this I have 2 + 4 + 4 + 2, vc tb could do 3+3+3+3 col-3 offset-3 in the first div, just remember that at most can add up to 12 ok) Here is the official documentation on the offset, will help you understand the concept. https://getbootstrap.com/docs/4.0/layout/grid/#Offsetting-Columns

    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
div[class^="col-"] {
    height: 50px;
    box-sizing: border-box;
    border: 1px solid;
}

</style>
</head>
<body>
    
<div class="container">
    <div class="row">
        <div class="col-4 offset-2">Col 1</div>
        <div class="col-4">Col 2</div>
    </div>
</div>

Bootstrap 3

In this example I did with two columns of 3 and 3 offset

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
    />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <style>
        div[class^="col-"] {
            height: 50px;
            box-sizing: border-box;
            border: 1px solid;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-xs-3 col-xs-offset-3">.col-md-3 .col-md-offset-3</div>
            <div class="col-xs-3">.col-md-3</div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

</html>

Browser other questions tagged twitter-bootstrap margin

You are not signed in. Login or sign up in order to post.