CODEWITHSUNDEEP
htmlcsstwitter-bootstrapcarousel
blubbiedevis
blubbiedevis

Reputation: 415

Troubles with Bootstrap Carousel: images won't resize according to container size

I'm using Bootstrap on my website. My website has two columns on a desktop screen: a big area for my content, and a small area at the right side for some information about upcoming events. The two areas nicely resize (become smaller) when I make my browser smaller, and at some point, the rightmost column jumps to the bottom, just as the responsiveness is intended. On my homepage I use the carousel based on this example of w3schools. The problem is that the picture of the carousel never resizes according to the column width, it always stays the same. In the w3school example, you can see that resizing your browser results in resizing the images. My HTML:

<!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Arimo:400,700'>
    <link rel="stylesheet" type='text/css' href="/Content/bootstrap.css" />
    <link rel="stylesheet" type='text/css' href="/Content/bootstrap-datepicker.css" />
    <link rel="stylesheet" type='text/css' href="/Content/NYC.css" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="/Scripts/bootstrap-datepicker.js"></script>
    <script src="/Scripts/bootstrap.min.js"></script>
    <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />

</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"></a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/">Home</a></li>
                    <li><a href="/Event">Agenda</a></li>

                    <li><a href="/Photo">Foto&#39;s</a></li>



                    <li><a href="/Contact">Contact</a></li>

                        <li><a href="/Account/Login">Login</a></li>
                                    </ul>
            </div> <!--/.nav-collapse -->
        </div>
    </nav>

    <div class="container">
        <div class="row">
            <div class="col-sm-8">


<header>
    <h2>Welkom</h2>
</header>



<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
            <li data-target="#myCarousel" data-slide-to="4"></li>

    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">

            <img src='https://farm8.staticflickr.com/7497/15440536044_ddb9b9a4f2_z.jpg' alt="Foto" >
            <div class="carousel-caption">
                <h2>Caption</h2>
                </div>
        </div>

            <div class="item">

                <img src='https://farm8.staticflickr.com/7542/15440460614_e147f37c21_z.jpg' alt="Foto">
                    <div class="carousel-caption">
                        <h2>Caption</h2>
                    </div>
            </div>
            <div class="item">

                <img src='https://farm8.staticflickr.com/7562/15761616062_9cd995c76f_z.jpg' alt="Foto">
                    <div class="carousel-caption">
                        <h2>Caption</h2>
                    </div>
            </div>
            <div class="item">

                <img src='https://farm3.staticflickr.com/2905/13976192867_78bd01faa1_z.jpg' alt="Foto">
                    <div class="carousel-caption">
                        <h2>Caption</h2>
                    </div>
            </div>
            <div class="item">

                <img src='https://farm4.staticflickr.com/3949/15574689588_2b427e30fa_z.jpg' alt="Foto">
                    <div class="carousel-caption">
                        <h2>Caption</h2>
                    </div>
            </div>
    </div><!-- /.carousel-inner -->

    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div><!-- /.carousel -->



            </div>


            <div class="col-sm-3 col-sm-offset-1">



<header>
    <h3>Vandaag</h3>
</header>


    <ul class="interestingevents">
        <li>
            <p class="posted">Niks te zien</p>
        </li>
    </ul>


<header>
    <h3>Komende evenementen</h3>
</header>

<ul class="interestingevents">

        <li>
            <a href='/Event/showEvent?eventID=13'>
                <p class="posted">
                    zondag 8 maart 2015
                </p>

                        <img src="/Content/Media/logosailing40x40.png" />


                <p class="text">
                    Winterwedstrijd
                    </p>
                <br/>
            </a>
        </li>
        <li>
            <a href='/Event/showEvent?eventID=20'>
                <p class="posted">
                    zaterdag 14 maart 2015
                </p>

                        <img src="/Content/Media/logogeneral40x40.png" />


                <p class="text">
                    Onderhoud infrastructuur
                    </p>
                <br/>
            </a>
        </li>
        <li>
            <a href='/Event/showEvent?eventID=21'>
                <p class="posted">
                    zondag 15 maart 2015
                </p>

                        <img src="/Content/Media/logogeneral40x40.png" />


                <p class="text">
                    Onderhoud infrastructuur
                    </p>
                <br/>
            </a>
        </li>

</ul>




<header>
    <h3>Gepasseerde evenementen</h3>
</header>

<ul class="interestingevents">
        <li>
            <p class="posted">
                zondag 8 februari 2015
            </p>


                    <img src="/Content/Media/logosailing40x40.png" />


            <p class="text">
                <a href='/Event/showEvent?eventID=12'>Winterwedstrijd</a>
            </p>
            <br />
        </li>
        <li>
            <p class="posted">
                zondag 18 januari 2015
            </p>


                    <img src="/Content/Media/logogeneral40x40.png" />


            <p class="text">
                <a href='/Event/showEvent?eventID=17'>Ledenvergadering</a>
            </p>
            <br />
        </li>
        <li>
            <p class="posted">
                zondag 4 januari 2015
            </p>


                    <img src="/Content/Media/logosailing40x40.png" />


            <p class="text">
                <a href='/Event/showEvent?eventID=10'>Winterwedstrijd</a>
            </p>
            <br />
        </li>
</ul>


            </div>

        </div>
    </div>




    <footer>
        <div id="copyright">
            <div class="container">
                <p>Created by </p>
            </div>
        </div>
    </footer>




<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Firefox","requestId":"c3ad45de45c543c5bc071cf0007d01e5"}
</script>
<script type="text/javascript" src="http://localhost:60883/d9c407548b294087843ff4faeef78add/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

Upvotes: 0

Views: 684

Answers (1)

fructurj
fructurj

Reputation: 104

Maybe you can try with the Bootstrap CDN links:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

Take a look at the Bootstrap website.

Upvotes: 1

Related Questions