CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
bloodless2010
bloodless2010

Reputation: 349

bootstrap grid system text alignment over multiple rows

I'm attempting to design a website, but having trouble getting text to align nicely. I'm beginning to feel like this isn't possible with the bootstrap grid system.

Here is the result I have and my current code:

<div class="row">
    <div class="col-md-3 text-center logo">
        <img src="img/LogoMedium.jpg">
    </div>

    <div class="col-md-3 text-center">
        <table class="case">
            <tbody>
                <tr>
                    <td>Case ID</td>
                    <td class="alt">#1</td>
                </tr>
                <tr>
                    <td>Title</td>
                    <td class="alt">Lorem ipsum</td>
                </tr>
                <tr>
                    <td>Location</td>
                    <td class="alt">Earth</td>
                </tr>
                <tr>
                    <td>Tags</td>
                    <td class="alt">&nbsp;</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="col-md-6">
        <div id="mapid"></div>
    </div>

    <div class="col-md-6">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>

enter image description here

I am hoping I can get a way for it to look something like this: enter image description here

No matter what I try the map keeps forcing the other columns in the row to be too long in height and it pushes the text further down. Any help is appreciated, thank you

Upvotes: 0

Views: 78

Answers (1)

Henrique Erzinger
Henrique Erzinger

Reputation: 1147

You are right, it isn't possible. That is because this kind of grid system works within the css flow layout. To get what you want, you'll need to use float.

Here's a quick and dirty example:

.main {
  max-width: 800px;
}

.main div {
  background: #BADA55;
  min-height: 100px;
  margin-bottom: 12px;
}

.header {
  display: grid;
  grid-gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}

.logo, .text {
  width: 100%;
}

.map {
  width: 50%;
  height: 250px;
  margin-left: 12px;
  float: right;
}
<div class="main">
  <div class="map"></div>
  
  <header class="header">
    <div class="logo"></div>
    <div class="text"></div>
  </header>
  
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, delectus? Quam aliquid maiores cum, harum quis, ratione dolores, commodi rerum reiciendis aut ipsa? Labore dicta nemo consequuntur, a repellat saepe? Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, delectus? Quam aliquid maiores cum, harum quis, ratione dolores, commodi rerum reiciendis aut ipsa? Labore dicta nemo consequuntur, a repellat saepe?
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, delectus? Quam aliquid maiores cum, harum quis, ratione dolores, commodi rerum reiciendis aut ipsa? Labore dicta nemo consequuntur, a repellat saepe?
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, delectus? Quam aliquid maiores cum, harum quis, ratione dolores, commodi rerum reiciendis aut ipsa? Labore dicta nemo consequuntur, a repellat saepe?Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, delectus? Quam aliquid maiores cum, harum quis, ratione dolores, commodi rerum reiciendis aut ipsa? Labore dicta nemo consequuntur, a repellat saepe?
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, delectus? Quam aliquid maiores cum, harum quis, ratione dolores, commodi rerum reiciendis aut ipsa? Labore dicta nemo consequuntur, a repellat saepe?
  
  
</div>

Upvotes: 2

Related Questions