CODEWITHSUNDEEP
htmltwitter-bootstrap
Toranksu
Toranksu

Reputation: 65

Column spacing Bootstrap 4

I am currently developing an TYPO3 Extension for a website. I am using bootstrap 4 and i have three different parts for the extension. On web it should look like:

A B
C

and on mobile:

A
B
C

Mobile view is fine with my current approach: mobile view

A is just a selection picker, B is a Google Map and C are Results. The columns have different heights.

Currenlty looking like on web

My issue: I don't want Column C to have this much margin. In fact I want it to be just underneath column A.

My code:

        <!DOCTYPE html>
        <f:layout name="Default" />
        <f:section name="main">
        <div class="row kleingaerten container">
                <select class="selectpicker col-12 col-sm-4" data-header="Wähle einen Bezirk"  data-live-search="true">
                    <option data-tokens="">Alle Bezirke</option>
                        <f:for each="{bezirke}" as="bezirk">
                            <option data-tokens="b{bezirk.uid}" >{bezirk.name}</option>
                        </f:for>
                </select>


            <div class="col-12 col-sm-8">
                <div id="map" style="width:100%; height:400px;" ></div>
            </div>


            <div class="col-12 col-sm-4">
                <f:for each="{kleingaerten}" as="kleingarten">
                    <div class="card  {kleingarten.bezirkClasses} " data-lat="{kleingarten.adresse.breitengrad}" data-lng="{kleingarten.adresse.laengengrad}" data-name="{kleingarten.titel}" data-strasse="{kleingarten.adresse.strasse}" data-hausnummer="{kleingarten.adresse.hausnummer}" data-plz="{kleingarten.adresse.postleitzahl}" data-ort="{kleingarten.adresse.stadt}" data-webauftritt='<a href="#">Kleingarten</a>'
                    id="g{kleingarten.uid}" data-id="g{kleingarten.uid}"
                    >
                        <div class="container">
                            <h7><b>{kleingarten.titel}</b></h7> 
                            <div>{kleingarten.adresse.strasse} {kleingarten.adresse.hausnummer}</div> 
                            <div>{kleingarten.adresse.postleitzahl}
                            {kleingarten.adresse.stadt}</div> 
                            <a href="#">Kleingarten</a>
                        </div>
                    </div>
                </f:for>
            </div>
    </div>
</f:section> 
</html>

Upvotes: 1

Views: 122

Answers (2)

Pushparaj
Pushparaj

Reputation: 1080

Just follow this steps and fiddle or snippet below.(resize screen to check)

Step 1:Make B column first and use bootstrap class .float-md-right

Step 2:Make A column second and add class .order-first(for moving to top in mobile view)

Step 3:Make C column last.

Wrap 3 columns A,B,C in div and add class .d-flex to make .order class to work and .flex-wrap class to wrap when screen size changes and .d-md-block to override .d-flex and make it work only on mobile devices

https://jsfiddle.net/raj_mutant/9vgL605f/

#map {
  background: green;
}

.a-section {
  background: yellow;
  height: 100px;
}

.c-section {
  background: red;
  height: 400px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container my-4">
  <div class="d-flex d-md-block flex-wrap">
    <div class="col-md-8 col-12  float-md-right">
      <div id="map" style="width:100%; height:400px;">B</div>
    </div>
    <div class="col-md-4 order-first">
      <div class="a-section">
        A
      </div>
    </div>
    <div class="col-md-4">
      <div class="c-section">
        C
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Lead Developer
Lead Developer

Reputation: 1169

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-12 col-md-4">
    <div>
      Part A
    </div>
    <div>
      Part B <br>
      Part B <br>
      Part B <br>
      Part B <br>
      Part B <br>
      Part B <br>
      Part B <br>
    </div>
  </div>
  <div class="col-12 col-md-8">
  Part C (Map part in your app)
  </div>
</div>

You don't need to separate as 3 parts.

You can insert A and B into one div like code snippet.

And You need to change

FROM

"col-12 col-sm-8"
"col-12 col-sm-4"

TO

"col-8 col-sm-12"
"col-4 col-sm-12"

Upvotes: 1

Related Questions