bobmello.com

bobmello.com Bobmello.com

Grid System - Grid com duas colunas para todos dispositivos : : : : Bom dia!

Postado em: 25/06/2017 às 12:06:46 PM

Vote neste post

Avaliação 4.00 de 5.00

Total de Votos 1

Classificação

0.00%

100.00%

0.00%

Grid com duas colunas para todos dispositivos

Como Aparecerá na Tela

Exemplo grid com duas colunas para todos dispositivos

.col-xs-6

.col-xs-4

.col-xs-8

.col-xs-3

.col-xs-9

Código Fonte

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exemplo grid com duas colunas para todos dispositivos</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
    /* style customizado para este exemplo */
    .demo-content{
        padding: 15px;
        font-size: 18px;
        min-height: 300px;
        background: #dbdfe5;
        margin-bottom: 10px;
    }
    .demo-content.bg-alt{
        background: #abb1b8;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-6">
                <div class="demo-content">.col-xs-6</div>
            </div>
            <div class="col-xs-6">
                <div class="demo-content bg-alt">.col-xs-6</div>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-xs-4">
                <div class="demo-content">.col-xs-4</div>
            </div>
            <div class="col-xs-8">
                <div class="demo-content bg-alt">.col-xs-8</div>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-xs-3">
                <div class="demo-content">.col-xs-3</div>
            </div>
            <div class="col-xs-9">
                <div class="demo-content bg-alt">.col-xs-9</div>
            </div>
        </div>
    </div>

Bobmello.com

Voltar

Veja também:

Link Relacionado

Comentários:

Grid System - Grid com duas colunas para todos dispositivos

Não há comentários no momento, seja o primeiro à comentar

Regras básicas

Os comentarios podem conter elogios ou criticas

Porem não serão tolerados agressões verbais e palavras de baixo calão.

Direcionamento dos comentarios

Os comentarios devem abster-se unicamente ao post em questão.

Da aprovação dos comentarios

Todos comentarios serão aprovados, elogios ou criticas, desde que sigam as normas estabelecidas.

Comentarios mostrados

Seram mostrados sempre os 20 últimos comentários, esse limite é para que a página não fique poluida com excesso de comentários.

Obrigado a todos

Comentem.

bobmello-ADM

Deixe seu comentário

Preencha os campos abaixo: