Bootstrap 3 to Bootstrap 4 snippet correction

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

-1

I used this Snippet into my Rails + Sass + Bootstrap App.
https://bootsnipp.com/snippets/featured/multi-select-tiled-layout

It did not work at all initially because of incompatibility with bootstrap v. 4 so I was able to refactor a little and get some elements to work.

The only thing no working properly is hiding the checkbox. I had to change from glyficons to fontawesome because bootstrap 4 does not support glyficons any longer. The structure is basically the same so I don't know what am missing here.

HTML

.button-container{margin:20px 0 0 0}

label.btn-default.active{background-color:#007ba7; color:#FFF}

label.btn-default{width:100%; border:1px solid #efefef; margin:5px; box-shadow:5px 8px 8px 0 #ccc;}

label .bizcontent{width:100%;}

.btn-group{width:90%;}

.btn i.fa{

    opacity: 0;

}

.btn.active i.fa {

    opacity: 1;

}



.btn-default {

  color: #333;

  background-color: #fff;

  border-color: #ccc;

}

<div class='items col-lg-6'>

  <div class='info-block block-info clearfix'>

    <div class='btn-group bizmoduleselect' data-toggle='buttons'>

      <label class='btn btn-default'>

       <div class='bizcontent'>

         <input autocomplete='off' name='var_id' type='checkbox' value=''>

         <i class='fa fa-check'></i>

         <h5>Coffee</h5>

        </div>

      </label>

    </div>

  </div>

</div>

edited Jan 4 at 18:17

asked Jan 4 at 17:15

Marrento

169112

Don't use "EDIT" monikers in your posts. That's an old forum habit that is not applicable here.

– Robert Harvey♦
Jan 4 at 17:39

add a comment |

-1

I used this Snippet into my Rails + Sass + Bootstrap App.
https://bootsnipp.com/snippets/featured/multi-select-tiled-layout

It did not work at all initially because of incompatibility with bootstrap v. 4 so I was able to refactor a little and get some elements to work.

HTML

.button-container{margin:20px 0 0 0}

label.btn-default.active{background-color:#007ba7; color:#FFF}

label.btn-default{width:100%; border:1px solid #efefef; margin:5px; box-shadow:5px 8px 8px 0 #ccc;}

label .bizcontent{width:100%;}

.btn-group{width:90%;}

.btn i.fa{

    opacity: 0;

}

.btn.active i.fa {

    opacity: 1;

}



.btn-default {

  color: #333;

  background-color: #fff;

  border-color: #ccc;

}

<div class='items col-lg-6'>

  <div class='info-block block-info clearfix'>

    <div class='btn-group bizmoduleselect' data-toggle='buttons'>

      <label class='btn btn-default'>

       <div class='bizcontent'>

         <input autocomplete='off' name='var_id' type='checkbox' value=''>

         <i class='fa fa-check'></i>

         <h5>Coffee</h5>

        </div>

      </label>

    </div>

  </div>

</div>

edited Jan 4 at 18:17

asked Jan 4 at 17:15

Marrento

169112

Don't use "EDIT" monikers in your posts. That's an old forum habit that is not applicable here.

– Robert Harvey♦
Jan 4 at 17:39

add a comment |

-1

I used this Snippet into my Rails + Sass + Bootstrap App.
https://bootsnipp.com/snippets/featured/multi-select-tiled-layout

It did not work at all initially because of incompatibility with bootstrap v. 4 so I was able to refactor a little and get some elements to work.

HTML

.button-container{margin:20px 0 0 0}

label.btn-default.active{background-color:#007ba7; color:#FFF}

label.btn-default{width:100%; border:1px solid #efefef; margin:5px; box-shadow:5px 8px 8px 0 #ccc;}

label .bizcontent{width:100%;}

.btn-group{width:90%;}

.btn i.fa{

    opacity: 0;

}

.btn.active i.fa {

    opacity: 1;

}



.btn-default {

  color: #333;

  background-color: #fff;

  border-color: #ccc;

}

<div class='items col-lg-6'>

  <div class='info-block block-info clearfix'>

    <div class='btn-group bizmoduleselect' data-toggle='buttons'>

      <label class='btn btn-default'>

       <div class='bizcontent'>

         <input autocomplete='off' name='var_id' type='checkbox' value=''>

         <i class='fa fa-check'></i>

         <h5>Coffee</h5>

        </div>

      </label>

    </div>

  </div>

</div>

edited Jan 4 at 18:17

asked Jan 4 at 17:15

Marrento

169112

I used this Snippet into my Rails + Sass + Bootstrap App.
https://bootsnipp.com/snippets/featured/multi-select-tiled-layout

It did not work at all initially because of incompatibility with bootstrap v. 4 so I was able to refactor a little and get some elements to work.

HTML

.button-container{margin:20px 0 0 0}

label.btn-default.active{background-color:#007ba7; color:#FFF}

label.btn-default{width:100%; border:1px solid #efefef; margin:5px; box-shadow:5px 8px 8px 0 #ccc;}

label .bizcontent{width:100%;}

.btn-group{width:90%;}

.btn i.fa{

    opacity: 0;

}

.btn.active i.fa {

    opacity: 1;

}



.btn-default {

  color: #333;

  background-color: #fff;

  border-color: #ccc;

}

<div class='items col-lg-6'>

  <div class='info-block block-info clearfix'>

    <div class='btn-group bizmoduleselect' data-toggle='buttons'>

      <label class='btn btn-default'>

       <div class='bizcontent'>

         <input autocomplete='off' name='var_id' type='checkbox' value=''>

         <i class='fa fa-check'></i>

         <h5>Coffee</h5>

        </div>

      </label>

    </div>

  </div>

</div>

.button-container{margin:20px 0 0 0}

label.btn-default.active{background-color:#007ba7; color:#FFF}

label.btn-default{width:100%; border:1px solid #efefef; margin:5px; box-shadow:5px 8px 8px 0 #ccc;}

label .bizcontent{width:100%;}

.btn-group{width:90%;}

.btn i.fa{

    opacity: 0;

}

.btn.active i.fa {

    opacity: 1;

}



.btn-default {

  color: #333;

  background-color: #fff;

  border-color: #ccc;

}

<div class='items col-lg-6'>

  <div class='info-block block-info clearfix'>

    <div class='btn-group bizmoduleselect' data-toggle='buttons'>

      <label class='btn btn-default'>

       <div class='bizcontent'>

         <input autocomplete='off' name='var_id' type='checkbox' value=''>

         <i class='fa fa-check'></i>

         <h5>Coffee</h5>

        </div>

      </label>

    </div>

  </div>

</div>

.button-container{margin:20px 0 0 0}

label.btn-default.active{background-color:#007ba7; color:#FFF}

label.btn-default{width:100%; border:1px solid #efefef; margin:5px; box-shadow:5px 8px 8px 0 #ccc;}

label .bizcontent{width:100%;}

.btn-group{width:90%;}

.btn i.fa{

    opacity: 0;

}

.btn.active i.fa {

    opacity: 1;

}



.btn-default {

  color: #333;

  background-color: #fff;

  border-color: #ccc;

}

<div class='items col-lg-6'>

  <div class='info-block block-info clearfix'>

    <div class='btn-group bizmoduleselect' data-toggle='buttons'>

      <label class='btn btn-default'>

       <div class='bizcontent'>

         <input autocomplete='off' name='var_id' type='checkbox' value=''>

         <i class='fa fa-check'></i>

         <h5>Coffee</h5>

        </div>

      </label>

    </div>

  </div>

</div>

javascript sass bootstrap-4 frontend

edited Jan 4 at 18:17

asked Jan 4 at 17:15

Marrento

169112

edited Jan 4 at 18:17

asked Jan 4 at 17:15

Marrento

169112

edited Jan 4 at 18:17

asked Jan 4 at 17:15

Marrento

169112

asked Jan 4 at 17:15

Marrento

169112

asked Jan 4 at 17:15

Marrento

169112

Don't use "EDIT" monikers in your posts. That's an old forum habit that is not applicable here.

– Robert Harvey♦
Jan 4 at 17:39

add a comment |

Don't use "EDIT" monikers in your posts. That's an old forum habit that is not applicable here.

– Robert Harvey♦
Jan 4 at 17:39

Don't use "EDIT" monikers in your posts. That's an old forum habit that is not applicable here.

– Robert Harvey♦
Jan 4 at 17:39

add a comment |

1 Answer
1

active

oldest

votes

I was able to fix my checkboxes. I ran into some issues with data-toggle and rails form helpers but I was able to work around that as well

Here goes my code in case someone runs into the same issues.

First I would like to say that bootstrap actually provides all the functionality I was looking for. So I did not even need to use the snippet I got from the link I posted.

label.btn-default.active{

  background-color:#007ba7; 

  color:#FFF

  }



label.btn-default{

  width:100%; 

  border:1px solid #efefef; 

  margin:5px; 

  box-shadow:5px 8px 8px 0 #ccc; 

  background-color:rgba(0, 0, 0, 0.03);}



.btn-group{width:90%;}

.btn i.fa{

    opacity: 0;

}



.btn.active i.fa {

    opacity: 1;

}



.btn-default {

  color: #333;

  background-color: #fff;

  border-color: #ccc;

}



.checkboxless{

  display: none;

}

- @questions.each_with_index do |question, i|

  = f.simple_fields_for :my_answers do |b|

    = b.input :question_id, input_html: { value: question.id }, as: :hidden

    .btn-group{"data-toggle" => "buttons"}

      %label.btn.btn-default

        -# %input{name: "my_quiz[my_answers_attributes][#{i}][answer]",  type: "hidden",  value:"0"}

        %input{class: "boolean optional checkboxless", autocomplete: "off", type: "checkbox", value: "1", name: "my_quiz[my_answers_attributes][#{i}][answer]", id: "my_quiz_my_answers_attributes_#{i}_answer"}

        %i.fa.fa-check.pull-left

        %h5

          = question.title

So for the issue I was having with rails form helpers and data-togle. I solved by buiding the checkbox fields from plain html and using the index from each_with_index as the needed variable.

If you add the hidden field it won't work. I left the hidden field there commented to illustrate I had tried :)

edited Jan 5 at 23:33

answered Jan 4 at 21:19

Marrento

169112

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54043381%2fbootstrap-3-to-bootstrap-4-snippet-correction%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

I was able to fix my checkboxes. I ran into some issues with data-toggle and rails form helpers but I was able to work around that as well

Here goes my code in case someone runs into the same issues.

First I would like to say that bootstrap actually provides all the functionality I was looking for. So I did not even need to use the snippet I got from the link I posted.

label.btn-default.active{

  background-color:#007ba7; 

  color:#FFF

  }



label.btn-default{

  width:100%; 

  border:1px solid #efefef; 

  margin:5px; 

  box-shadow:5px 8px 8px 0 #ccc; 

  background-color:rgba(0, 0, 0, 0.03);}



.btn-group{width:90%;}

.btn i.fa{

    opacity: 0;

}



.btn.active i.fa {

    opacity: 1;

}



.btn-default {

  color: #333;

  background-color: #fff;

  border-color: #ccc;

}



.checkboxless{

  display: none;

}

- @questions.each_with_index do |question, i|

  = f.simple_fields_for :my_answers do |b|

    = b.input :question_id, input_html: { value: question.id }, as: :hidden

    .btn-group{"data-toggle" => "buttons"}

      %label.btn.btn-default

        -# %input{name: "my_quiz[my_answers_attributes][#{i}][answer]",  type: "hidden",  value:"0"}

        %input{class: "boolean optional checkboxless", autocomplete: "off", type: "checkbox", value: "1", name: "my_quiz[my_answers_attributes][#{i}][answer]", id: "my_quiz_my_answers_attributes_#{i}_answer"}

        %i.fa.fa-check.pull-left

        %h5

          = question.title

So for the issue I was having with rails form helpers and data-togle. I solved by buiding the checkbox fields from plain html and using the index from each_with_index as the needed variable.

If you add the hidden field it won't work. I left the hidden field there commented to illustrate I had tried :)

edited Jan 5 at 23:33

answered Jan 4 at 21:19

Marrento

169112

add a comment |

I was able to fix my checkboxes. I ran into some issues with data-toggle and rails form helpers but I was able to work around that as well

Here goes my code in case someone runs into the same issues.

First I would like to say that bootstrap actually provides all the functionality I was looking for. So I did not even need to use the snippet I got from the link I posted.

label.btn-default.active{

  background-color:#007ba7; 

  color:#FFF

  }



label.btn-default{

  width:100%; 

  border:1px solid #efefef; 

  margin:5px; 

  box-shadow:5px 8px 8px 0 #ccc; 

  background-color:rgba(0, 0, 0, 0.03);}



.btn-group{width:90%;}

.btn i.fa{

    opacity: 0;

}



.btn.active i.fa {

    opacity: 1;

}



.btn-default {

  color: #333;

  background-color: #fff;

  border-color: #ccc;

}



.checkboxless{

  display: none;

}

- @questions.each_with_index do |question, i|

  = f.simple_fields_for :my_answers do |b|

    = b.input :question_id, input_html: { value: question.id }, as: :hidden

    .btn-group{"data-toggle" => "buttons"}

      %label.btn.btn-default

        -# %input{name: "my_quiz[my_answers_attributes][#{i}][answer]",  type: "hidden",  value:"0"}

        %input{class: "boolean optional checkboxless", autocomplete: "off", type: "checkbox", value: "1", name: "my_quiz[my_answers_attributes][#{i}][answer]", id: "my_quiz_my_answers_attributes_#{i}_answer"}

        %i.fa.fa-check.pull-left

        %h5

          = question.title

So for the issue I was having with rails form helpers and data-togle. I solved by buiding the checkbox fields from plain html and using the index from each_with_index as the needed variable.

If you add the hidden field it won't work. I left the hidden field there commented to illustrate I had tried :)

edited Jan 5 at 23:33

answered Jan 4 at 21:19

Marrento

169112

add a comment |

I was able to fix my checkboxes. I ran into some issues with data-toggle and rails form helpers but I was able to work around that as well

Here goes my code in case someone runs into the same issues.

First I would like to say that bootstrap actually provides all the functionality I was looking for. So I did not even need to use the snippet I got from the link I posted.

label.btn-default.active{

  background-color:#007ba7; 

  color:#FFF

  }



label.btn-default{

  width:100%; 

  border:1px solid #efefef; 

  margin:5px; 

  box-shadow:5px 8px 8px 0 #ccc; 

  background-color:rgba(0, 0, 0, 0.03);}



.btn-group{width:90%;}

.btn i.fa{

    opacity: 0;

}



.btn.active i.fa {

    opacity: 1;

}



.btn-default {

  color: #333;

  background-color: #fff;

  border-color: #ccc;

}



.checkboxless{

  display: none;

}

- @questions.each_with_index do |question, i|

  = f.simple_fields_for :my_answers do |b|

    = b.input :question_id, input_html: { value: question.id }, as: :hidden

    .btn-group{"data-toggle" => "buttons"}

      %label.btn.btn-default

        -# %input{name: "my_quiz[my_answers_attributes][#{i}][answer]",  type: "hidden",  value:"0"}

        %input{class: "boolean optional checkboxless", autocomplete: "off", type: "checkbox", value: "1", name: "my_quiz[my_answers_attributes][#{i}][answer]", id: "my_quiz_my_answers_attributes_#{i}_answer"}

        %i.fa.fa-check.pull-left

        %h5

          = question.title

So for the issue I was having with rails form helpers and data-togle. I solved by buiding the checkbox fields from plain html and using the index from each_with_index as the needed variable.

If you add the hidden field it won't work. I left the hidden field there commented to illustrate I had tried :)

edited Jan 5 at 23:33

answered Jan 4 at 21:19

Marrento

169112

I was able to fix my checkboxes. I ran into some issues with data-toggle and rails form helpers but I was able to work around that as well

Here goes my code in case someone runs into the same issues.

First I would like to say that bootstrap actually provides all the functionality I was looking for. So I did not even need to use the snippet I got from the link I posted.

label.btn-default.active{

  background-color:#007ba7; 

  color:#FFF

  }



label.btn-default{

  width:100%; 

  border:1px solid #efefef; 

  margin:5px; 

  box-shadow:5px 8px 8px 0 #ccc; 

  background-color:rgba(0, 0, 0, 0.03);}



.btn-group{width:90%;}

.btn i.fa{

    opacity: 0;

}



.btn.active i.fa {

    opacity: 1;

}



.btn-default {

  color: #333;

  background-color: #fff;

  border-color: #ccc;

}



.checkboxless{

  display: none;

}

- @questions.each_with_index do |question, i|

  = f.simple_fields_for :my_answers do |b|

    = b.input :question_id, input_html: { value: question.id }, as: :hidden

    .btn-group{"data-toggle" => "buttons"}

      %label.btn.btn-default

        -# %input{name: "my_quiz[my_answers_attributes][#{i}][answer]",  type: "hidden",  value:"0"}

        %input{class: "boolean optional checkboxless", autocomplete: "off", type: "checkbox", value: "1", name: "my_quiz[my_answers_attributes][#{i}][answer]", id: "my_quiz_my_answers_attributes_#{i}_answer"}

        %i.fa.fa-check.pull-left

        %h5

          = question.title

So for the issue I was having with rails form helpers and data-togle. I solved by buiding the checkbox fields from plain html and using the index from each_with_index as the needed variable.

If you add the hidden field it won't work. I left the hidden field there commented to illustrate I had tried :)

label.btn-default.active{

  background-color:#007ba7; 

  color:#FFF

  }



label.btn-default{

  width:100%; 

  border:1px solid #efefef; 

  margin:5px; 

  box-shadow:5px 8px 8px 0 #ccc; 

  background-color:rgba(0, 0, 0, 0.03);}



.btn-group{width:90%;}

.btn i.fa{

    opacity: 0;

}



.btn.active i.fa {

    opacity: 1;

}



.btn-default {

  color: #333;

  background-color: #fff;

  border-color: #ccc;

}



.checkboxless{

  display: none;

}

- @questions.each_with_index do |question, i|

  = f.simple_fields_for :my_answers do |b|

    = b.input :question_id, input_html: { value: question.id }, as: :hidden

    .btn-group{"data-toggle" => "buttons"}

      %label.btn.btn-default

        -# %input{name: "my_quiz[my_answers_attributes][#{i}][answer]",  type: "hidden",  value:"0"}

        %input{class: "boolean optional checkboxless", autocomplete: "off", type: "checkbox", value: "1", name: "my_quiz[my_answers_attributes][#{i}][answer]", id: "my_quiz_my_answers_attributes_#{i}_answer"}

        %i.fa.fa-check.pull-left

        %h5

          = question.title

label.btn-default.active{

  background-color:#007ba7; 

  color:#FFF

  }



label.btn-default{

  width:100%; 

  border:1px solid #efefef; 

  margin:5px; 

  box-shadow:5px 8px 8px 0 #ccc; 

  background-color:rgba(0, 0, 0, 0.03);}



.btn-group{width:90%;}

.btn i.fa{

    opacity: 0;

}



.btn.active i.fa {

    opacity: 1;

}



.btn-default {

  color: #333;

  background-color: #fff;

  border-color: #ccc;

}



.checkboxless{

  display: none;

}

- @questions.each_with_index do |question, i|

  = f.simple_fields_for :my_answers do |b|

    = b.input :question_id, input_html: { value: question.id }, as: :hidden

    .btn-group{"data-toggle" => "buttons"}

      %label.btn.btn-default

        -# %input{name: "my_quiz[my_answers_attributes][#{i}][answer]",  type: "hidden",  value:"0"}

        %input{class: "boolean optional checkboxless", autocomplete: "off", type: "checkbox", value: "1", name: "my_quiz[my_answers_attributes][#{i}][answer]", id: "my_quiz_my_answers_attributes_#{i}_answer"}

        %i.fa.fa-check.pull-left

        %h5

          = question.title

edited Jan 5 at 23:33

answered Jan 4 at 21:19

Marrento

169112

edited Jan 5 at 23:33

answered Jan 4 at 21:19

Marrento

169112

answered Jan 4 at 21:19

Marrento

169112

answered Jan 4 at 21:19

Marrento

169112

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk