Bootstrap container

[Verwijderd]

Mijn vraag

https://imgur.com/a/aFjnmb9

Op deze afbeelding zie je bij de bovenste blok een bootstrap container met daarin 2 keer een col-md-6.
Nu wil ik in het blok daaronder precies het zelfde. enkel moet daar omheen nog een container-fluid met 2 blokken zodat ik links en rechts een andere achtergrond-kleur kan doen.

Enkel als ik dit doe kan ik daarin geen container meer neerzetten, omdat het 2 blokken naast elkaar zijn.
Wat het probleem nu is, is dat de lengte veel langer wordt bij grote resolutie's, en het niet gelijk loopt met een container. Weet iemand of hier een nette oplossing voor is?


Relevante software en hardware die ik gebruik
WordPress, Bootstrap.

Wat ik al gevonden of geprobeerd heb
Ik heb geprobeerd om bij verschillende resolutie's de width ver veranderen, maar nog steeds loopt het dan niet gelijk.
Ook heb ik geprobeerd om verschillende columns te gebruiken bij xs,sm,md,lg. Dit werkte ook niet.

[Cyw00d]

in een container-fluid mag geen container. Je kunt daarin dus gewoon je 2x col-md-6 definieren.

[ Voor 4% gewijzigd door Cyw00d op 07-06-2018 12:02 ]

[Verwijderd]

Dat heb ik nu ook.

een container-fluid met daarin 2x een col-md-6.
maar dan krijg je dus dat die veel breder is dan een container. Ik heb nu gedaan dat ik in die col-md-6 een nieuwe container heb van: col-md-10 col-md-offset-2. Zodat die dus links meer ruimte heeft. Op een resolutie van mijn laptop lijnt die dan ongeveer gelijk uit.

Maar op grotere resolutie's, wordt die alweer veel breder dan de container erboven.

[Cyw00d]

Ik dacht dat je dat juist wilde bereiken, container fluid is inderdaad om hem breder (lees: 100%) te maken dan de normale container. Container in een col-md krijg je problemen van, het is me nog niet duidelijk wat je precies wilt bereiken dan.

[Verwijderd]

Heb je de afbeelding gezien?
Daar heb ik ook lijntjes neergezet.

De bovenste-blok is een container.
De onderste-blok moet ook een container zodat links en rechts gelijk uitlijnen.
Enkel moet onder de onderste blok links en rechts een andere kleur achtergrond. van beide 50% zoals je op de foto ziet.

[Mj2sL]

Als ik het goed begrijp probeer je een tweekleurige achtergrond te krijgen, maar verder dezelfde structuur aan te houden?

Wat je zou kunnen doen is de volgende structuur:

div (geen bootstrap div, gewoon normale div)
div.container
div.row
div.col-md-6
div.col-md-6

En dan met css background gradients de eerste div twee kleuren geven, bijvoorbeeld zo:
background: linear-gradient(90deg, red 50%, blue 50%)

Een eleganter alternatief is CSS Grid gebruiken voor je layout, daarmee is dit een fluitje van een cent en wat minder 'hacky', maar je vraagt om Bootstrap

[ Voor 0% gewijzigd door Mj2sL op 16-06-2018 10:09 . Reden: red 49.999%, blue 50% kan allebei 50 zijn; .row class ]

[Verwijderd]

background: linear-gradient(90deg, red 49.999%, blue 50%), Deze die zocht ik!!!

Nu heb ik gewoon de zelfde lay-out zoals het bovenste blok, ik geef alleen de div eromheen die backgroud-color zodat die opsplitst in die 2 kleuren.

Bedankt!!

[Mj2sL]

Top geen probleem.

Toevoeging, je kunt beide percentages gewoon op 50% zetten, ziet er wat logischer uit.

[418O2]

Er moet wel een .row tussen de container en col