I want to have two containers, because when I change the size, it also changes the size of the menu. Here's my index http://paste.laravel.com/GN8, I want this part:
#if ($news->count())
#foreach($news as $news)
<div class="container">
<div class="doc-content-box">
<legend>{{ $news->title }} <div id="spaceholder"></div>
<p>
<h6><i class="icon-calendar"></i> {{ $news->created_at }} {{ $news->author }}
</p>
</h6>
</legend>
<div style="margin-top:7px">
<p>{{ $news->content }}</p>
</div>
</div> <!-- /container -->
<div id="spaceholder"> </div>
#endforeach
#else
{{ 'There are no news.' }}
#endif
be width 749px, when I copy the .container which I added before, it just pulls it to the left.
I want it to be something like container-two.
I also have custom CSS that overrides container:
http://paste.laravel.com/JEt
Add the container this styling:
margin: 0 auto;
Related
I would like to displays images s in the image bellow
I do know that I can use laravel chunk() helper function to achieve this which is what I have done but as bellow
#foreach ($images->chunk(4) as $key=>$image)
<div class="row">
#foreach ($image as $item)
#if ($key===0)
<div class="col-md-3">
<div>
<span class="image-block block2">
<a class="image-zoom" href="{{ asset('uploads/property/large/'.$item->path) }}" rel="prettyPhoto[gallery]">
<img src="{{ asset('uploads/property/small/'.$item->path) }}" class="img-responsive" alt="CEC Gallery"></a>
</span>
</div>
</div>
#else
<div class="col-md-4">
<div>
<span class="image-block block2">
<a class="image-zoom" href="{{ asset('uploads/property/large/'.$item->path) }}" rel="prettyPhoto[gallery]">
<img src="{{ asset('uploads/property/small/'.$item->path) }}" class="img-responsive" alt="CEC Gallery"></a>
</span>
</div>
</div>
#endif
#endforeach
</div>
#endforeach
this gives me the following result
From what you can see the rows not stopping at two and staking the remaining images as in the expected image. What could I be doing wrong or how could I do. The images could be as many as 200 and here I am just working with 12
I have a form and inside this one I added another form.
The second form is working good but the second is not working.
There is the form part in my Twig template
<div>
{{ form_start(registrationForm) }}
<div>
{{ form_label(registrationForm.name, 'name') }}
{{ form_widget(registrationForm.name) }}
</div>
<div>
...
</div>
<div>
<div>
<a>Change password</a>
<!-- Modal -->
<div>
{{ form_start(passwordForm) }}
{{ form_label(passwordForm.password, 'change password') }}
{{ form_widget(passwordForm.password) }}
<div>
<button type="submit">Save</button>
</div>
{{ form_end(passwordForm) }}
</div>
</div>
</div>
<div>
{{ form_label(registrationForm.email, 'email') }}
{{ form_widget(registrationForm.email) }}
</div>
<div>
<div>
<button type="submit">Save changes</button>
</div>
</div>
{{ form_end(registrationForm) }}
So the passwordForm is working (the button submits it) but the registration form submit button doesn't work anymore. Does anyone have an idea about how to resolve this issue? Thanks!
EDIT:
Fixed this issue by taking out the passwordForm and putting it after the registerationForm. In my case, the position doesn't matter because it's a modal which appears when the button is clicked.
I have the following code:
<h2 id="yachts" class="mt-0">Our Yachts</h2>
<div class="card-group">
{{ $pages := sort (where $.Site.RegularPages "Section" "boats") "Weight" "asc" }}
{{ range $pages }}
<div class="card">
<img src="{{ .RelPermalink | safeCSS }}{{ .Params.heroimage | safeCSS }}" class="card-img-top" alt="...">
<div class="card-body clearfix">
<h4 class="card-title">{{ .LinkTitle }}</h4>
<p class="card-text border-light border-top border-bottom">
<span class="row">
<span class="col-6 text-muted text-left">
{{- partialCached "icons/users.svg" . -}}{{ .Params.pax }}
</span>
<span class="col-6 text-muted text-right">
{{- partialCached "icons/bed.svg" . -}}{{ .Params.bunks }}
</span>
</span>
</p>
<p class="card-text">{{ .Description }}</p>
Learn More
</div>
</div>
{{ end }}
</div>
(The logic stuff inside of the {{ tags is Hugo templating markup (Golang) which is irrelevant at this point).
The result of this code looks like this in one of the uses:
I would like to position the buttons on the same level (bottom right of each card).
I tried doing it via position relative on the card and position absolute on the buttons, but that positions them at their current location, not the real bottom of the card. What would be the "flex way" to tell these buttons where they belong?
Try min-height for .card-text
.card-text{
min-height:250px;
}
It turns out that Bootstrap offers the card-footer class that does exactly what I wanted to achieve. Using bg-light or our own class for styling then can make it look right.
<div class="card-footer bg-light">
Learn More
</div>
From the documentation:
When using card groups with footers, their content will automatically line up.
So according to this: https://getbootstrap.com/docs/3.3/css/#grid-column-ordering I should be able to swap the position of the divs based on the viewport.
I tried with the following html (it is twig - but that shouldn't make a difference):
<div class="row">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-xs-12 col-xs-push-12" id="recommend-container">
<h1>
<i class="fas fa-chess-king"></i>
Solomon
</h1>
<hr />
<div id="recommend-contents">
<p>Solomon Recommends:</p>
{% for type,recommend in recommendations %}
<h3>{{ type }}</h3>
<ul>
{% for index,name in recommend %}
<li>{{ name }}</li>
{% endfor %}
</ul>
{% endfor %}
</div>
</div>
<div class="col-md-6 col-xs-12 col-xs-pull-12" id="register-section-container">
<h1>Register</h1>
<hr />
{{ form_start(form) }}
{{ form_row(form.username, { 'attr': {'class': 'form-control login-input', 'placeholder': 'username'} }) }}
{{ form_row(form.email, { 'attr': {'class': 'form-control login-input', 'placeholder': 'email'} }) }}
{{ form_row(form.plainPassword.first, { 'attr': {'class': 'form-control login-input', 'placeholder': 'password'} }) }}
{{ form_row(form.plainPassword.second, { 'attr': {'class': 'form-control login-input', 'placeholder': 'retype password'} }) }}
<div class="register-btn-container">
<button class="btn btn-primary d-inline-block" type="submit">
<i class="fas fa-check"></i>
Register
</button>
<p class="d-inline-block">Already signed up? Login</p>
</div>
{{ form_end(form) }}
</div>
</div>
</div>
</div>
which not only doesn't work on mobile, but creates a weird space between the divs on desktop view? I really don't understand the logic of it, how do I debug or fix? (CSS is the real Isildur's bane)
I believe you issue is du to the fact that Bootstrap is a mobile first framework, and you try to use it as a desktop first one.
You should place divs the way you want them to be displayed on a mobile, THEN pull/push them on larger screen :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<!-- LEFT ON DESKTOP -->
<div class="col-xs-12 col-sm-6 col-sm-push-6" id="recommend-container">
I'm on the right on desktop
</div>
<!-- RIGHT ON DESKTOP -->
<div class="col-xs-12 col-sm-6 col-sm-pull-6" id="register-section-container">
I'm on the left on desktop
</div>
</div>
</div>
Here is that will append:
on mobile devices (viewport under 768px width): the .col-xs-12 rule apply so divs should be display on top of each other in the same order as the code.
Then when you reach 768px width (and up): the .col-sm-6 rule apply so you should have the two columns displayed side by side as each column is set to occupy 1/2 of the available space (6/12 to be exact :)).
And as you want to "inverse" the "logical" order of the columns, you add one rule to push the first column on the right (.col-sm-pull-6), and one rule to pull the second column on the left (.col-sm-pull-6).
As long as you don't have rules specific to superior width (aka: "md" and "lg"), the "sm" rule will be used on larger screens.
Is passing liquid variables as inline styles commonly frowned upon? Here is an example of my markup:
<div class="span-8-12">
<h6> {{page.role}}</h6>
<h1 style="color:{{ page.accentColor }};"> {{page.title}} </h1>
</div>
<article class="intro">
<p style="color:{{ page.txtColor }};"> {{ page.summary }} </p>
</article>
I am setting h1 and p colors using the liquid variables in my posts. I know I could pass the variable directly to a CSS file, but then'd i'd have to write even more markup and CSS. Is this method valid or is there a better method on systematically changing values of color based off page variables?
Better would be to set a class, rather than directly setting the styles inline.
<div class=" {{ page.typeOfClass }}">
<div class="span-8-12">
<h6> {{page.role}}</h6>
<h1 > {{page.title}} </h1>
</div>
<article class="intro">
<p > {{ page.summary }} </p>
</article>
</div>
Then in your whatever.css set the styles for the different classes you want:
.someClass h1{
color:blue;
}
.someClass .intro p{
color:red;
}
for example.