0

I am developing a module for Drupal 8, currently using the default Bartik theme. My module defines some pages through twig templates. As I am displaying several sections of a dashboard, I would like to show two DIVs next to each other side by side.

I am looking for something similar to the Bootstrap Grid. I am even thinking to just try to use Bootstrap inside my module regardless of the Drupal theme, as I used Bootstrap before but I am new to Drupal theming.

Is there some way the Bartik theme (or different Drupal 8 theme) provides to display elements responsively side by side?

  • The first thing that comes to mind is Display Suite and designing your own responsive layouts for it. – J. Reynolds Apr 2 '15 at 16:45
  • I would be happy to just assign a css class in my template or some similarly "raw" method. No drag'n'drop or other fancy stuff required. Still, thanks for pointing out Display Suite! – sleidig Apr 2 '15 at 20:18
2

I ended up working around it by extracting the relevant css classes of bootstrap into my custom css file. Now I can use the bootstrap grid without disturbing the normal Drupal theme:

.row {
  margin-right: -15px;
  margin-left: -15px;
  box-sizing: border-box;
}
.row:before, .row:after {
  display: table;
  content: " ";
}
.row:after {
  clear: both;
}

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  float: left;
  box-sizing: border-box;
}

.col-md-12 {
  width: 100%;
}
.col-md-11 {
  width: 91.66666667%;
}
.col-md-10 {
  width: 83.33333333%;
}
.col-md-9 {
  width: 75%;
}
.col-md-8 {
  width: 66.66666667%;
}
.col-md-7 {
  width: 58.33333333%;
}
.col-md-6 {
  width: 50%;
}
.col-md-5 {
  width: 41.66666667%;
}
.col-md-4 {
  width: 33.33333333%;
}
.col-md-3 {
  width: 25%;
}
.col-md-2 {
  width: 16.66666667%;
}
.col-md-1 {
  width: 8.33333333%;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.